/* R6.13.21 登录页专用视觉层。
   仅在 route=login 加载，避免污染全站 app.css。 */
/* R6.13.21 登录页视觉重构：桌面 / 平板 / 手机统一自适应 */
body.route-login{
  --login-green:#11865f;
  --login-green-2:#2eaa78;
  --login-green-dark:#0c4d3a;
  --login-text:#173f33;
  --login-muted:#71859a;
  --login-line:#dce9e3;
  --login-panel:#ffffff;
  --login-soft:#f5faf7;
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -8%,rgba(67,175,128,.12),transparent 34%),
    radial-gradient(circle at -5% 55%,rgba(77,169,135,.09),transparent 28%),
    radial-gradient(circle at 105% 48%,rgba(82,155,139,.08),transparent 30%),
    linear-gradient(180deg,#fbfdfc 0%,#f1f8f4 100%);
  color:var(--login-text);
}
body.route-login::before,
body.route-login::after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  opacity:.55;
}
body.route-login::before{
  inset:0;
  background:
    radial-gradient(circle at 7% 47%,rgba(73,181,137,.3) 0 3px,transparent 4px),
    radial-gradient(circle at 12% 56%,rgba(73,181,137,.23) 0 2px,transparent 3px),
    radial-gradient(circle at 89% 47%,rgba(73,181,137,.25) 0 3px,transparent 4px),
    radial-gradient(circle at 94% 59%,rgba(73,181,137,.18) 0 2px,transparent 3px),
    linear-gradient(62deg,transparent 8%,rgba(55,145,111,.09) 8.1% 8.2%,transparent 8.3% 100%),
    linear-gradient(118deg,transparent 90%,rgba(55,145,111,.08) 90.1% 90.2%,transparent 90.3% 100%);
}
body.route-login::after{
  left:-10vw;
  right:-10vw;
  bottom:-95px;
  height:220px;
  background:
    repeating-radial-gradient(ellipse at 50% 100%,rgba(54,150,111,.08) 0 1px,transparent 1.5px 7px);
  transform:rotate(-2deg);
  filter:blur(.1px);
}
.route-login .login-main{
  position:relative;
  z-index:1;
  width:100%;
  max-width:700px;
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  padding:30px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.route-login .login-main--compact{padding-top:30px}
.route-login .login-surface{
  width:100%;
  max-width:620px;
  padding:34px 30px 26px;
  border:1px solid rgba(189,217,204,.82);
  border-radius:30px;
  background:rgba(255,255,255,.91);
  box-shadow:0 26px 80px rgba(22,83,61,.13),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  animation:login-surface-in .58s cubic-bezier(.22,.8,.24,1) both;
}
.route-login .login-entry-header{
  position:relative;
  margin:0 0 26px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:center;
}
.route-login .login-entry-header::before,
.route-login .login-entry-header::after{
  content:"";
  position:absolute;
  top:62px;
  width:44px;
  height:28px;
  opacity:.45;
  background-image:radial-gradient(circle,#72c4a4 1.6px,transparent 1.8px);
  background-size:12px 12px;
}
.route-login .login-entry-header::before{left:6px}
.route-login .login-entry-header::after{right:6px}
.route-login .login-brand-mark{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(50,180,127,.23);
  border-radius:20px;
  color:#10a36f;
  background:linear-gradient(145deg,rgba(234,250,242,.95),rgba(255,255,255,.98));
  box-shadow:0 12px 28px rgba(22,151,101,.14),inset 0 0 0 6px rgba(53,196,141,.06);
  animation:login-mark-float 4.8s ease-in-out infinite;
}
.route-login .login-brand-mark svg{width:34px;height:34px;filter:drop-shadow(0 4px 7px rgba(17,134,95,.16))}
.route-login .login-entry-header strong{
  display:block;
  font-size:38px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:.015em;
  color:#0f4a39;
}
.route-login .login-entry-header>span:last-child{
  display:block;
  margin-top:10px;
  font-size:15px;
  line-height:1.5;
  font-weight:700;
  color:#728296;
}
.route-login .login-auth-tabs{
  position:relative;
  margin:0 0 26px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  border:1px solid var(--login-line);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  box-shadow:0 12px 30px rgba(29,84,63,.07);
}
.route-login .login-auth-tabs a{
  position:relative;
  min-height:64px;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border-radius:0;
  color:#637389;
  font-size:16px;
  font-weight:900;
  text-decoration:none;
  transition:color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.route-login .login-auth-tabs a+a{border-left:1px solid #e6efea}
.route-login .login-auth-tabs a:hover{background:#f7fbf9;color:#315e50;text-decoration:none}
.route-login .login-auth-tabs a.active{
  color:#0f9d69;
  background:linear-gradient(180deg,#fff,#fbfffd);
  box-shadow:none;
}
.route-login .login-auth-tabs a.active::after{
  content:"";
  position:absolute;
  left:28%;
  right:28%;
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,#12a973,#41c491);
  box-shadow:0 -2px 12px rgba(36,177,123,.18);
}
.route-login .login-tab-icon{width:23px;height:23px;display:inline-grid;place-items:center;flex:0 0 23px}
.route-login .login-tab-icon svg{width:22px;height:22px}
.route-login .login-card{
  margin:0;
  padding:0;
  border:1px solid var(--login-line);
  border-radius:20px;
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 38px rgba(26,84,62,.075);
  overflow:hidden;
}
.route-login .login-field-stack{display:block}
.route-login .login-field{
  position:relative;
  min-height:84px;
  margin:0!important;
  padding:0 22px 0 0;
  display:grid!important;
  grid-template-columns:166px minmax(0,1fr);
  align-items:stretch;
  color:var(--login-text)!important;
  background:rgba(255,255,255,.72);
  transition:background-color .18s ease,box-shadow .18s ease;
}
.route-login .login-field+.login-field{border-top:1px solid #e4ede8}
.route-login .login-field:focus-within{
  z-index:2;
  background:#fcfffd;
  box-shadow:inset 3px 0 0 #21a875;
}
.route-login .login-field-label{
  padding:0 15px;
  display:flex;
  align-items:center;
  gap:12px;
  border-right:1px solid #e6efea;
  color:#18483a;
  font-size:15px;
  font-weight:950;
  white-space:nowrap;
}
.route-login .login-field-label-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 34px;
  color:#149769;
  border-radius:11px;
  background:linear-gradient(145deg,#f0faf5,#fff);
}
.route-login .login-field-label-icon svg{width:20px;height:20px;max-width:20px;max-height:20px;display:block;overflow:visible}
.route-login .login-field-label-text{min-width:0;overflow:visible;text-overflow:clip}
.route-login .login-field-control{
  min-width:0;
  display:flex;
  align-items:center;
  gap:0;
  padding-left:14px;
}
.route-login .login-field-icon{display:none!important}
.route-login .login-field-control>input,
.route-login .login-field-control .sms-code-row input,
.route-login .captcha-row.captcha-image-row input{
  width:100%;
  min-width:0;
  height:50px;
  min-height:50px;
  margin:0!important;
  padding:0 8px;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#173f33;
  font-size:15px;
  font-weight:750;
}
.route-login .login-field-control input::placeholder{color:#97a6b8;font-weight:650;opacity:1}
.route-login .login-field--captcha{min-height:92px}
.route-login .login-field--captcha .login-field-control{padding:12px 0 12px 14px}
.route-login .captcha-row.captcha-image-row{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 122px 78px!important;
  grid-template-areas:"captcha-input captcha-preview captcha-refresh"!important;
  gap:8px!important;
  align-items:center!important;
}
.route-login .captcha-row.captcha-image-row input{
  grid-area:captcha-input!important;
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  padding:0 12px!important;
  border:1px solid #e0ebe5!important;
  border-radius:13px!important;
  background:#fbfdfc!important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}

.route-login .captcha-row.captcha-image-row input[type="hidden"]{display:none!important}
.route-login .captcha-row.captcha-image-row input:focus{
  border-color:#7cc8a7!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(40,169,116,.09)!important;
}
.route-login .captcha-preview{
  grid-area:captcha-preview!important;
  width:122px!important;
  min-width:122px!important;
  min-height:48px!important;
  height:48px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #d8e9e0!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#f2faf6,#fbfefd)!important;
}
.route-login .captcha-image{
  width:118px!important;
  height:44px!important;
  max-width:118px!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
}
.route-login .captcha-refresh-btn{
  grid-area:captcha-refresh!important;
  width:78px;
  min-width:78px;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 10px!important;
  border:1px solid #d6e6de!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#128e63!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:900!important;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease!important;
}
.route-login .captcha-refresh-btn:hover{
  border-color:#9ad0b8!important;
  background:#f5fbf8!important;
  transform:translateY(-1px);
}
.route-login .sms-code-row{
  width:100%;
  min-width:0;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 126px;
  gap:10px;
  align-items:center;
}
.route-login .sms-code-row input{
  padding:0 14px!important;
  border:1px solid #e0ebe5!important;
  border-radius:13px!important;
  background:#fbfdfc!important;
}
.route-login .sms-send-btn{
  width:126px;
  min-width:126px;
  height:48px!important;
  min-height:48px!important;
  border-radius:13px!important;
  border-color:#d6e6de!important;
  background:#fff!important;
  color:#128e63!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
.route-login .login-submit{
  position:relative;
  isolation:isolate;
  width:calc(100% - 0px);
  height:60px!important;
  min-height:60px!important;
  margin:24px 0 0!important;
  overflow:hidden;
  border:0!important;
  border-radius:17px!important;
  background:linear-gradient(100deg,#39b87c 0%,#0d855d 62%,#08774f 100%)!important;
  box-shadow:0 14px 30px rgba(12,124,84,.2)!important;
  color:#fff!important;
  font-size:17px!important;
  font-weight:950!important;
  letter-spacing:.18em;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.route-login .login-submit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.4px);
  background-size:8px 8px;
  background-position:right -20px top 0;
  opacity:.28;
  mask-image:linear-gradient(90deg,transparent 68%,#000 92%);
  -webkit-mask-image:linear-gradient(90deg,transparent 68%,#000 92%);
}
.route-login .login-submit::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  z-index:-1;
  width:28%;
  height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:rotate(18deg) translateX(-180%);
  transition:transform .6s ease;
}
.route-login .login-submit:hover{
  transform:translateY(-2px);
  filter:saturate(108%);
  box-shadow:0 18px 38px rgba(12,124,84,.26)!important;
}
.route-login .login-submit:hover::after{transform:rotate(18deg) translateX(520%)}
.route-login .login-submit:active{transform:translateY(0) scale(.995)}
.route-login .login-trust{
  min-height:58px;
  margin-top:18px;
  padding:16px 3px 0;
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid #e4eee8;
  color:#748399;
  font-size:13px;
  font-weight:700;
}
.route-login .login-trust-icon{width:22px;height:22px;display:grid;place-items:center;color:#3eb681;flex:0 0 22px}
.route-login .login-trust-icon svg{width:21px;height:21px}
.route-login .login-trust-status{margin-left:auto;color:#11845e;font-weight:900;white-space:nowrap}
.route-login .login-lock-warning{
  margin:-6px 0 18px;
  padding:12px 15px;
  border:1px solid #fecaca;
  border-radius:14px;
  background:#fff8f8;
  box-shadow:none;
}
@keyframes login-surface-in{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes login-mark-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@media(max-width:900px){
  .route-login .login-main{max-width:660px;padding:24px 22px}
  .route-login .login-main--compact{padding-top:24px}
  .route-login .login-surface{max-width:600px;padding:30px 26px 24px;border-radius:28px}
  .route-login .login-entry-header strong{font-size:35px}
  .route-login .login-auth-tabs a{min-height:60px;font-size:15px}
  .route-login .login-field{grid-template-columns:156px minmax(0,1fr);min-height:80px}
  .route-login .login-field-label{padding:0 14px;gap:10px}
  .route-login .login-field-label-icon{width:32px;height:32px;flex-basis:32px;border-radius:10px}
  .route-login .login-field-label-icon svg{width:18px;height:18px;max-width:18px;max-height:18px}
  .route-login .captcha-row.captcha-image-row{grid-template-columns:minmax(0,1fr) 116px 74px!important}
  .route-login .captcha-preview{width:116px!important;min-width:116px!important}
  .route-login .captcha-image{width:112px!important;max-width:112px!important}
  .route-login .captcha-refresh-btn{width:74px;min-width:74px}
}
@media(max-width:640px){
  body.route-login{background:linear-gradient(180deg,#f9fcfa 0%,#eff7f2 100%)}
  body.route-login::before{opacity:.28}
  body.route-login::after{height:120px;bottom:-46px;opacity:.36}
  .route-login .login-main{
    max-width:none;
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
    box-sizing:border-box;
    align-items:stretch;
    justify-content:flex-start;
  }
  .route-login .login-main--compact{padding-top:max(8px,env(safe-area-inset-top))}
  .route-login .login-surface{
    max-width:100%;
    margin-block:auto;
    padding:14px 14px 12px;
    border-radius:21px;
    box-shadow:0 14px 38px rgba(22,83,61,.10);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .route-login .login-entry-header{margin-bottom:10px}
  .route-login .login-entry-header::before,
  .route-login .login-entry-header::after{display:none}
  .route-login .login-brand-mark{width:42px;height:42px;margin-bottom:5px;border-radius:14px}
  .route-login .login-brand-mark svg{width:24px;height:24px}
  .route-login .login-entry-header strong{font-size:26px;line-height:1.06}
  .route-login .login-entry-header>span:last-child{margin-top:4px;font-size:12px;line-height:1.3}
  .route-login .login-auth-tabs{margin-bottom:10px;border-radius:14px}
  .route-login .login-auth-tabs a{min-height:46px;padding:7px 5px;gap:5px;font-size:12px}
  .route-login .login-tab-icon{width:18px;height:18px;flex-basis:18px}
  .route-login .login-tab-icon svg{width:18px;height:18px}
  .route-login .login-auth-tabs a.active::after{left:20%;right:20%;height:2px}
  .route-login .login-card{border-radius:16px}
  .route-login .login-field{
    min-height:62px;
    padding:8px 10px;
    grid-template-columns:116px minmax(0,1fr);
    gap:0;
    align-items:stretch;
  }
  .route-login .login-field-label{
    min-height:0;
    padding:0 8px 0 0;
    gap:7px;
    align-self:stretch;
    justify-content:flex-start;
    border-right:1px solid #e6efea;
    font-size:12px;
  }
  .route-login .login-field-label-icon{width:28px;height:28px;flex-basis:28px;border-radius:9px}
  .route-login .login-field-label-icon svg{width:17px;height:17px;max-width:17px;max-height:17px}
  .route-login .login-field-control{gap:0;align-items:center;padding-left:9px}
  .route-login .login-field-control>input{height:44px;min-height:44px;padding:0 3px;font-size:14px}
  .route-login .login-field--captcha{min-height:108px}
  .route-login .login-field--captcha .login-field-control{padding:4px 0 4px 9px}
  .route-login .captcha-row.captcha-image-row{
    grid-template-columns:minmax(0,1fr) 82px!important;
    grid-template-areas:
      "captcha-input captcha-input"
      "captcha-preview captcha-refresh"!important;
    gap:7px!important;
  }
  .route-login .captcha-row.captcha-image-row input{height:44px!important;min-height:44px!important;padding:0 10px!important;border-radius:11px!important;font-size:14px}
  .route-login .captcha-preview{grid-area:captcha-preview!important;width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;justify-content:center!important;padding:0 4px}
  .route-login .captcha-image{width:116px!important;max-width:100%!important;height:40px!important}
  .route-login .captcha-refresh-btn{grid-area:captcha-refresh!important;width:82px;min-width:82px;height:44px!important;min-height:44px!important;padding:0 6px!important;font-size:12px!important}
  .route-login .sms-code-row{grid-template-columns:minmax(0,1fr) 94px;gap:7px}
  .route-login .sms-code-row input{height:44px!important;min-height:44px!important;padding:0 9px!important;font-size:13px}
  .route-login .sms-send-btn{width:94px;min-width:94px;height:44px!important;min-height:44px!important;padding-left:6px!important;padding-right:6px!important;font-size:12px!important}
  .route-login .login-submit{height:48px!important;min-height:48px!important;margin-top:12px!important;border-radius:13px!important;font-size:15px!important}
}
@media(max-width:380px){
  .route-login .login-main{padding-left:6px;padding-right:6px}
  .route-login .login-surface{padding:12px 10px 10px;border-radius:19px}
  .route-login .login-entry-header{margin-bottom:8px}
  .route-login .login-brand-mark{width:38px;height:38px;margin-bottom:4px;border-radius:13px}
  .route-login .login-brand-mark svg{width:22px;height:22px}
  .route-login .login-entry-header strong{font-size:24px}
  .route-login .login-entry-header>span:last-child{font-size:11px;margin-top:3px}
  .route-login .login-auth-tabs{margin-bottom:8px}
  .route-login .login-auth-tabs a{min-height:44px;font-size:11.5px;gap:4px;padding-left:3px;padding-right:3px}
  .route-login .login-field{grid-template-columns:110px minmax(0,1fr);min-height:60px;padding:7px 8px}
  .route-login .login-field-label{padding-right:7px;gap:6px;font-size:11.5px}
  .route-login .login-field-label-icon{width:26px;height:26px;flex-basis:26px}
  .route-login .login-field-label-icon svg{width:16px;height:16px;max-width:16px;max-height:16px}
  .route-login .login-field-control{padding-left:8px;gap:0}
  .route-login .login-field--captcha{min-height:104px}
  .route-login .login-field--captcha .login-field-control{padding-left:8px}
  .route-login .captcha-row.captcha-image-row{grid-template-columns:minmax(0,1fr) 78px!important;gap:6px!important}
  .route-login .captcha-refresh-btn{width:78px;min-width:78px;padding:0 4px!important}
  .route-login .sms-code-row{grid-template-columns:minmax(0,1fr) 88px;gap:6px}
  .route-login .sms-send-btn{width:88px;min-width:88px;padding-left:4px!important;padding-right:4px!important;font-size:11.5px!important}
  .route-login .login-submit{height:46px!important;min-height:46px!important;margin-top:10px!important}
}

/* 移动端使用上下 auto margin：内容能放下时严格垂直居中；
   可视高度不足时自动退化为顶部开始并允许正常滚动，避免居中造成顶部被裁切。 */

/* R6.13.23 登录页底部访问 IP 安全审计栏 */
.route-login .login-security-footer{
  margin-top:20px;
  padding:17px 4px 0;
  min-height:55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid #e1ece7;
  color:#718293;
  font-size:12px;
  line-height:1.45;
  font-weight:800;
}
.route-login .login-security-ip{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.route-login .login-security-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  color:#38b77f;
}
.route-login .login-security-icon svg{width:21px;height:21px}
.route-login .login-security-footer strong{
  color:#315f50;
  font:800 11px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  overflow-wrap:anywhere;
}
.route-login .login-security-audit{
  flex:0 0 auto;
  color:#16865f;
  font-weight:900;
  white-space:nowrap;
}
@media(max-width:640px){
  .route-login .login-security-footer{
    margin-top:9px;
    padding:9px 1px 0;
    min-height:0;
    gap:5px;
    font-size:9px;
    line-height:1.25;
    flex-wrap:nowrap;
  }
  .route-login .login-security-ip{gap:4px;flex:1 1 auto;white-space:nowrap}
  .route-login .login-security-icon{width:16px;height:16px;flex-basis:16px}
  .route-login .login-security-icon svg{width:15px;height:15px}
  .route-login .login-security-footer strong{font-size:8.5px;line-height:1.25;overflow-wrap:normal}
  .route-login .login-security-audit{margin-left:auto;font-size:9px;white-space:nowrap}
}
@media(max-width:340px){
  .route-login .login-security-footer{align-items:flex-start;flex-wrap:wrap}
  .route-login .login-security-ip{flex:1 1 100%}
  .route-login .login-security-audit{margin-left:20px}
}
@media(prefers-reduced-motion:reduce){
  .route-login .login-surface,
  .route-login .login-brand-mark,
  .route-login .login-submit,
  .route-login .login-submit::after,
  .route-login .captcha-refresh-btn{animation:none!important;transition:none!important}
}