/* TP8 登录展示层：保持原认证、验证码和安全回跳流程。 */
:root { --login-ink:var(--admin-ink); --login-muted:var(--admin-muted); --login-blue:var(--admin-brand); --login-border:var(--admin-border); }
*, *::before, *::after { box-sizing:border-box; }
html { min-height:100%; }
body#body {
  margin:0; min-height:100vh; min-height:100dvh; display:flex; align-items:center;
  justify-content:center; padding:32px; color:var(--login-ink);
  background:var(--admin-page-gradient);
  font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased;
}
.main-body.no-qrcode { width:min(1240px,100%); }
.new-login {
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); min-height:660px;
  overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:26px; background:#fff;
  box-shadow:0 32px 90px -30px rgba(39,58,96,.2),0 4px 18px rgba(39,58,96,.04);
}
.new-login .top {
  /* 品牌区复用菜单渐变，文字采用深色，光影继续独立流动。 */
  --login-brand-gradient:
    var(--admin-nav-gradient);
  position:relative; display:flex; flex-direction:column; min-width:0; padding:48px 56px 32px;
  isolation:isolate; overflow:hidden;
  background:var(--login-brand-gradient); color:var(--admin-brand-ink);
}
/* 保留多角配色的取景范围，光影单独叠加，底色不再变形。 */
.new-login .top::before {
  content:""; position:absolute; inset:-172px; z-index:0; pointer-events:none;
  background:var(--login-brand-gradient);
}
/* 三层光影独立游走，扩大采样范围，柔化移动边缘。 */
.brand-light { position:absolute; inset:-35%; z-index:0; pointer-events:none; }
.brand-light span { position:absolute; inset:0; opacity:.88; filter:blur(22px); }
.brand-light-cool { background:radial-gradient(ellipse 32% 36% at 72% 26%,rgba(218,244,255,.34),transparent 74%); }
.brand-light-violet { background:radial-gradient(ellipse 34% 32% at 28% 74%,rgba(199,174,255,.28),transparent 76%); }
.brand-light-shade { background:radial-gradient(ellipse 32% 50% at 64% 42%,rgba(82,84,160,.06),transparent 78%); }
.login-brand { position:relative; z-index:1; display:flex; align-items:center; gap:13px; font-size:17px; font-weight:600; line-height:1.5; }
.brand-mark {
  display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px;
  border:0; border-radius:13px; background:transparent; color:#fff; box-shadow:0 8px 22px -12px rgba(7,3,18,.5);
}
.brand-mark img { display:block; width:100%; height:100%; }
.brand-story { position:relative; z-index:1; margin-top:80px; }
.brand-story h2 { margin:0; font-size:clamp(42px,4vw,54px); font-weight:600; line-height:1.25; letter-spacing:-1.5px; }
.brand-period { color:#4d4d91; }
.brand-art { position:absolute; z-index:1; left:20px; bottom:62px; display:block; width:calc(100% - 40px); height:auto; margin:0; opacity:.98; filter:drop-shadow(0 24px 28px rgba(26,39,99,.14)); pointer-events:none; }
.brand-footer { position:relative; z-index:1; margin-top:auto; color:var(--admin-brand-ink); font-size:12px; letter-spacing:3px; line-height:1.6; }
.new-login .bottom { display:flex; align-items:center; justify-content:center; min-width:0; padding:60px 64px; background:linear-gradient(145deg,#fff,#fdfdff); }
.form-login { width:100%; max-width:380px; }
.login-heading { margin-bottom:34px; }
.login-eyebrow { display:block; margin-bottom:12px; color:var(--login-blue); font-size:12px; font-weight:500; letter-spacing:2px; }
.login-heading h1 { margin:0 0 12px; font-size:32px; font-weight:600; line-height:1.35; letter-spacing:.5px; }
.login-heading p { margin:0; color:var(--login-muted); font-size:14px; line-height:1.7; }
.field-label { display:block; margin:20px 0 9px; color:#44516a; font-size:13px; font-weight:500; line-height:1.5; }
.item {
  display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:0 15px;
  border:1px solid var(--login-border); border-radius:10px; background:#fcfdff;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.item:hover { border-color:#b7c5dc; }
.item:focus-within { border-color:var(--admin-focus); background:#fff; box-shadow:0 0 0 3px rgba(66,102,197,.08); }
.icon { display:flex; flex:0 0 19px; color:#8291aa; }
.icon svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.item:focus-within .icon { color:var(--login-blue); }
.item input {
  width:100%; min-width:0; height:52px; flex:1; padding:0; border:0; outline:0;
  background:transparent; color:var(--login-ink); font-family:inherit; font-size:14px;
}
.item input::placeholder { color:#939fb2; }
.item input:-webkit-autofill { -webkit-box-shadow:0 0 0 60px #fbfcfe inset; -webkit-text-fill-color:var(--login-ink); }
/* 验证码不压缩，窄屏隐藏装饰图标，把空间留给输入和图片。 */
#validatePanel { gap:10px; padding-right:6px; min-height:60px; }
.validateImg {
  display:block; flex:0 0 138px; width:138px; height:48px; padding:2px;
  border:1px solid #e2e7f0; border-radius:6px; background:#fff; cursor:pointer; object-fit:fill; transition:opacity .18s;
}
.validateImg.is-refreshing { opacity:.45; }
.validateImg:focus-visible { outline:2px solid var(--login-blue); outline-offset:2px; }
.captcha-hint { margin:9px 0 0; color:var(--login-muted); font-size:12px; line-height:1.6; }
.error {
  display:none; margin-top:16px; padding:10px 12px; border:1px solid #f5d7d9;
  border-radius:8px; background:#fff5f5; color:#bf3546; font-size:13px; line-height:1.6; overflow-wrap:anywhere;
}
.deal {
  width:100%; height:54px; margin-top:26px; border:1px solid rgba(255,255,255,.2); border-radius:10px;
  background:var(--admin-action-gradient); box-shadow:0 8px 20px -8px rgba(93,96,175,.35);
  color:#fff; font-family:inherit; font-size:15px; font-weight:500; letter-spacing:2px; cursor:pointer;
  transition:box-shadow .18s;
}
.deal:hover { background:var(--admin-action-gradient-hover); box-shadow:0 8px 20px -8px rgba(93,96,175,.35); }
.deal:focus-visible { outline:3px solid #abc5fa; outline-offset:3px; }
.deal:disabled { cursor:wait; opacity:.7; }
.login-footnote { margin:24px 0 0; color:#7b879b; font-size:12px; text-align:center; line-height:1.7; }
@media (max-width:1000px) {
  .new-login .top { padding:36px; }
  .new-login .bottom { padding:44px 32px; }
  .brand-story { margin-top:72px; }
  .brand-story h2 { font-size:42px; }
}
@media (min-width:761px) and (max-height:780px) {
  body#body { padding:24px; }
  .new-login { min-height:620px; }
  .new-login .top { padding:40px; }
  .brand-story { margin-top:56px; }
  .brand-art { left:30px; bottom:58px; width:calc(100% - 60px); }
  .new-login .bottom { padding:40px; }
}
@media (max-width:760px) {
  body#body { padding:20px 16px; }
  .main-body.no-qrcode { max-width:480px; }
  .new-login { grid-template-columns:minmax(0,1fr); min-height:0; border-radius:18px; }
  .new-login .top { padding:26px 28px; }
  .brand-mark { flex-basis:36px; width:36px; height:36px; border-radius:10px; }
  .login-brand { font-size:15px; }
  .brand-story { margin-top:24px; }
  .brand-story h2 { font-size:32px; line-height:1.3; letter-spacing:-.5px; }
  .brand-art,.brand-footer { display:none; }
  .new-login .bottom { padding:30px 28px; }
  .login-heading { margin-bottom:24px; }
  .login-eyebrow { display:none; }
  .login-heading h1 { font-size:25px; margin-bottom:8px; }
}
@media (max-width:380px) {
  body#body { padding:12px; }
  .new-login .top,.new-login .bottom { padding:24px 20px; }
  #validatePanel .icon { display:none; }
  #validatePanel { padding-left:10px; gap:8px; }
  .validateImg { flex-basis:128px; width:128px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}