/* ============================================================================
   登录页 —— 医疗科技风格
   配色取「临床蓝 + 生命青」：深蓝承载专业与可信，青色承载医疗与生命体征，
   辅以极淡的心电波形与流动网格，避免常见 SaaS 登录页的塑料感。
   独立文件、只作用于 #login，不污染后台内部样式。
   ========================================================================= */

#login.login-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  overflow: hidden;
  /* 主色阶：深蓝 → 临床蓝 → 生命青 */
  background:
    radial-gradient(1200px 620px at 82% 8%, rgba(45, 212, 191, .16), transparent 62%),
    radial-gradient(900px 520px at 12% 92%, rgba(56, 189, 248, .18), transparent 60%),
    linear-gradient(160deg, #062143 0%, #0A3A6B 42%, #0E4F86 100%);
}

/* ---------- 背景装饰层 ---------- */
#login .lg-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* 呼吸式网格：科技行业的通用语言，用极低的透明度避免喧宾夺主 */
#login .lg-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(148, 210, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 210, 255, .07) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;
  mask-image: radial-gradient(72% 68% at 50% 42%, #000 42%, transparent 100%);
  -webkit-mask-image: radial-gradient(72% 68% at 50% 42%, #000 42%, transparent 100%);
  animation: lgGridDrift 24s linear infinite;
}
@keyframes lgGridDrift { to { background-position: 54px 54px, 54px 54px; } }

/* 两枚漂移光晕制造景深 */
#login .lg-orb {
  position: absolute; border-radius: 50%; filter: blur(58px);
  animation: lgOrbFloat 19s ease-in-out infinite;
}
#login .lg-orb--a {
  width: 400px; height: 400px; top: -90px; right: -70px;
  background: radial-gradient(circle, rgba(45, 212, 191, .34), transparent 68%);
}
#login .lg-orb--b {
  width: 470px; height: 470px; bottom: -150px; left: -120px;
  background: radial-gradient(circle, rgba(59, 130, 246, .34), transparent 68%);
  animation-duration: 25s; animation-direction: reverse;
}
@keyframes lgOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(26px, -34px, 0) scale(1.09); }
}

/* 粒子网络画布（生命体征 / 数据节点感） */
#login #loginFx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .72; }

/* 底部心电波形：医疗行业最直白的视觉符号，做成缓慢横移的描边动画 */
#login .lg-ecg {
  position: absolute; left: 0; right: 0; bottom: 0; width: 200%; height: 150px;
  opacity: .3;
  animation: lgEcgSlide 17s linear infinite;
}
#login .lg-ecg polyline {
  fill: none; stroke: #5EEAD4; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, .55));
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: lgEcgDraw 5.5s ease-in-out infinite;
}
@keyframes lgEcgSlide { to { transform: translateX(-50%); } }
@keyframes lgEcgDraw {
  0%   { stroke-dashoffset: 2400; opacity: .25; }
  45%  { stroke-dashoffset: 0;    opacity: .85; }
  100% { stroke-dashoffset: 0;    opacity: .18; }
}

/* ---------- 主体卡片 ---------- */
#login .login-split {
  position: relative; z-index: 2;
  display: flex; width: min(940px, 96vw); min-height: 540px;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(3, 22, 48, .48), 0 0 0 1px rgba(255, 255, 255, .09) inset;
  animation: lgCardIn .55s cubic-bezier(.16, .84, .34, 1) both;
}
@keyframes lgCardIn { from { opacity: 0; transform: translateY(22px) scale(.985); } }

/* ---------- 左侧品牌区 ---------- */
#login .login-aside {
  flex: 1 1 47%; padding: 38px 34px; color: #fff; position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    linear-gradient(rgba(10, 58, 107, .34), rgba(6, 33, 67, .58)),
    linear-gradient(155deg, #0B4580 0%, #0A3A6B 55%, #0E6395 100%);
  overflow: hidden;
}
/* 品牌面板里的细网格，与右侧大背景呼应 */
#login .login-aside::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
}
#login .lg-aside-inner { position: relative; z-index: 2; }
#login .login-aside > .copy { position: relative; z-index: 2; }

#login .brand { text-align: center; font-size: 23px; font-weight: 700; letter-spacing: 1.5px; }
#login .brand small {
  display: block; font-size: 11px; font-weight: 400; opacity: .78;
  margin-top: 5px; letter-spacing: 3.4px; text-align: center;
}
#login .brand::after {
  content: ''; display: block; width: 46px; height: 3px; border-radius: 2px;
  margin: 13px auto 0;
  background: linear-gradient(90deg, #5EEAD4, #38BDF8);
  box-shadow: 0 0 12px rgba(94, 234, 212, .6);
}

/* 当前企业徽标：多租户下避免「不知道登的是哪家」 */
#login .lg-ent {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 18px; padding: 7px 14px; border-radius: 999px;
  background: rgba(94, 234, 212, .13); border: 1px solid rgba(94, 234, 212, .3);
  font-size: 12.5px; width: fit-content; margin-left: auto; margin-right: auto;
}
#login .lg-ent-label { opacity: .72; }
#login .lg-ent b { color: #7FF3DE; font-weight: 600; letter-spacing: .3px; }
#login .lg-ent-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #5EEAD4; flex: none;
  box-shadow: 0 0 0 0 rgba(94, 234, 212, .65);
  animation: lgPulse 2.1s ease-out infinite;
}
@keyframes lgPulse {
  70%  { box-shadow: 0 0 0 8px rgba(94, 234, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}

#login .login-aside h2 { font-size: 25px; font-weight: 600; line-height: 1.45; margin: 20px 0 14px; }
#login .login-aside p { font-size: 13.5px; line-height: 1.95; opacity: .86; }
#login .login-feats { list-style: none; padding: 0; margin: 20px 0 0; }
#login .login-feats li {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  font-size: 13.5px; opacity: .92; line-height: 1.6;
}
#login .login-feats li .fi {
  width: 26px; height: 26px; border-radius: 8px; flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(94, 234, 212, .16); color: #7FF3DE;
  font-size: 13px; font-weight: 600;
  border: 1px solid rgba(94, 234, 212, .26);
}
#login .login-aside .copy { font-size: 11.5px; opacity: .55; }

/* ---------- 右侧表单区 ---------- */
#login .login-main {
  flex: 1 1 53%; padding: 34px 40px 28px; background: #fff;
  display: flex; flex-direction: column; justify-content: center;
}

/* 双入口切换 */
#login .lg-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 22px;
  background: #F1F5F9; border-radius: 12px;
}
#login .lg-tab {
  flex: 1; padding: 9px 8px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: #64748B; font-size: 13.5px; font-weight: 500;
  font-family: inherit; transition: all .22s;
}
#login .lg-tab:hover { color: #0C447C; }
#login .lg-tab.is-active {
  background: #fff; color: #0C447C; font-weight: 600;
  box-shadow: 0 2px 8px rgba(12, 68, 124, .14);
}
#login .lg-tab:focus-visible { outline: 2px solid #1a56db; outline-offset: 1px; }

#login .login-main h1 { font-size: 21px; font-weight: 600; margin-bottom: 5px; color: #0F172A; }
#login .login-main .sub { color: #64748B; font-size: 13px; margin-bottom: 20px; }

#login .field { margin-bottom: 15px; }
#login .fl { display: block; font-size: 12.5px; color: #475569; margin-bottom: 6px; font-weight: 500; }
#login .input {
  width: 100%; padding: 11px 13px; font-size: 16px;   /* ≥16px 防 iOS 聚焦缩放 */
  border: 1px solid #D8E2EC; border-radius: 10px;
  background: #FBFCFE; color: #0F172A; font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#login .input::placeholder { color: #A9B6C6; }
#login .input:focus {
  outline: none; background: #fff; border-color: #38BDF8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .16);
}

/* 密码可见切换 */
#login .lg-pwd-wrap { position: relative; }
#login .lg-pwd-wrap .input { padding-right: 44px; }
#login .lg-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; opacity: .5; transition: opacity .2s;
  background-repeat: no-repeat; background-position: center; background-size: 17px 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
#login .lg-eye:hover { opacity: .85; background-color: #F1F5F9; }
#login .lg-eye.is-on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10 10 0 0 1 12 20c-7 0-11-8-11-8a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c7 0 11 8 11 8a18 18 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* 错误 / 锁定提示 */
#login .lg-alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; margin-bottom: 15px; border-radius: 10px;
  font-size: 13px; line-height: 1.6; animation: lgShake .34s ease;
  background: #FEF2F2; border: 1px solid #FECACA; color: #B42318;
}
#login .lg-alert.is-lock {
  background: #FFFBEB; border-color: #FDE68A; color: #92400E;
}
#login .lg-alert.is-info {
  background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF;
}
#login .lg-alert b { font-variant-numeric: tabular-nums; }
@keyframes lgShake {
  0%, 100% { transform: translateX(0); }
  22%      { transform: translateX(-5px); }
  46%      { transform: translateX(5px); }
  70%      { transform: translateX(-3px); }
}

/* 登录按钮：临床蓝 → 生命青渐变 */
#login .lg-submit {
  width: 100%; justify-content: center; padding: 11px; margin-top: 2px;
  font-size: 15px; font-weight: 600; letter-spacing: 3px; border: none;
  border-radius: 10px; cursor: pointer; color: #fff;
  background: linear-gradient(100deg, #0C447C 0%, #1976C4 52%, #14A5B8 100%);
  background-size: 180% 100%; background-position: 0% 50%;
  box-shadow: 0 6px 18px rgba(12, 68, 124, .26);
  transition: background-position .45s, box-shadow .25s, transform .12s;
}
#login .lg-submit:hover {
  background-position: 100% 50%;
  box-shadow: 0 9px 24px rgba(12, 68, 124, .34);
}
#login .lg-submit:active { transform: translateY(1px); }
#login .lg-submit:disabled { opacity: .62; cursor: not-allowed; box-shadow: none; }
#login .lg-submit:focus-visible { outline: 2px solid #0C447C; outline-offset: 2px; }

#login .login-main .login-tip {
  margin-top: 16px; font-size: 12px; color: #94A3B8; line-height: 1.85;
}
#login .login-tip b { color: #475569; }
#login .lg-foot {
  margin-top: auto; padding-top: 16px; font-size: 11.5px; color: #B4C0CE;
  text-align: center; border-top: 1px solid #EEF2F7;
}

/* ---------- 窄屏：只留表单，品牌区收起（保留 logo + 企业徽标） ---------- */
@media (max-width: 760px) {
  #login.login-wrap { padding: 16px 12px; align-items: flex-start; }
  #login .login-split { flex-direction: column; min-height: 0; width: 100%; border-radius: 16px; }
  #login .login-aside { flex: none; padding: 22px 20px 18px; }
  #login .login-aside h2 { font-size: 19px; margin: 14px 0 0; }
  #login .login-aside p,
  #login .login-feats,
  #login .login-aside .copy { display: none; }
  #login .lg-ent { margin-top: 12px; }
  #login .login-main { padding: 22px 20px 18px; }
  #login .lg-ecg { height: 84px; }
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  #login .lg-grid, #login .lg-orb, #login .lg-ecg,
  #login .lg-ecg polyline, #login .lg-ent-dot,
  #login .login-split { animation: none !important; }
}