/* ============================================================
 * 登录页样式（浅色医疗蓝白）
 * ============================================================
 * 配色口径：
 *   底色      #eef5fc   主色 #1e6fd9   强调色 #0ea5e9
 *   卡片      半透明白 rgba(255,255,255,0.88)
 *   正文      #12304d   次级文字 #5b7899   弱化文字 #93a9c0
 *
 * 结构说明：
 *   1~5  背景层（纯装饰，pointer-events:none，不参与交互）
 *   6~13 内容层（容器 → 卡片 → 品牌 → 表单 → 按钮 → 页脚 → 版权）
 *   14   左下角功能按钮组
 *   15   响应式
 *
 * 关联文件：includes/bg-decor.php 的浮动图标类名 f1~f6 必须与本文件一致
 * ============================================================ */

/* ===== 1. 基础复位 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 三层径向渐变叠加浅底，营造医疗蓝色的空间纵深 */
  background:
    radial-gradient(
      900px 700px at 12% 15%,
      rgba(56, 152, 236, 0.1),
      transparent 62%
    ),
    radial-gradient(
      800px 650px at 88% 78%,
      rgba(20, 112, 220, 0.1),
      transparent 60%
    ),
    radial-gradient(
      700px 700px at 50% 120%,
      rgba(14, 165, 233, 0.08),
      transparent 65%
    ),
    #eef5fc;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 卡片靠右，左侧留给装饰区 */
  padding: 20px 10% 20px 20px;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  position: relative;
  overflow: hidden;
  color: #12304d;
}

/* ===== 2. 细网格纹理：增强纵深（最底层，不遮挡装饰与卡片） ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 111, 217, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 111, 217, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  /* 用径向遮罩让网格从中心向外淡出，避免满屏死板 */
  -webkit-mask-image: radial-gradient(
    ellipse 90% 80% at 50% 45%,
    #000 25%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 90% 80% at 50% 45%,
    #000 25%,
    transparent 78%
  );
}

/* ===== 3. 左侧装饰区（大标题 + 副标题） ===== */
.left-deco {
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
.left-deco .big-title {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0ea5e9, #1e6fd9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin-bottom: 12px;
}
.left-deco .big-sub {
  font-size: 1.05rem;
  color: #5b7899;
  font-weight: 400;
  letter-spacing: 2px;
}
/* 副标题里的图标需要恢复可见色（父级被 -webkit-text-fill-color 透明化） */
.left-deco .big-sub i {
  -webkit-text-fill-color: initial;
  color: #0ea5e9;
  margin-right: 4px;
}

/* ===== 4. 浮动图标 - 统一蓝色系（6 个，与 bg-decor.php 的 f1~f6 对应） ===== */
.float-icon {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  animation: floatAround 20s ease-in-out infinite;
  /* 浅底不需要霓虹发光，仅保留一层极淡的投影 */
  text-shadow: 0 4px 14px rgba(30, 111, 217, 0.14);
}
.float-icon.f1 {
  top: 8%;
  left: 4%;
  font-size: 4.2rem;
  color: #0ea5e9;
  animation-delay: 0s;
  opacity: 0.16;
}
.float-icon.f2 {
  top: 62%;
  left: 6%;
  font-size: 3.6rem;
  color: #1e6fd9;
  animation-delay: -4s;
  opacity: 0.14;
}
.float-icon.f3 {
  top: 16%;
  left: 34%;
  font-size: 2.6rem;
  color: #0ea5e9;
  animation-delay: -8s;
  opacity: 0.1;
}
.float-icon.f4 {
  bottom: 10%;
  left: 26%;
  font-size: 3rem;
  color: #1e6fd9;
  animation-delay: -12s;
  opacity: 0.12;
}
.float-icon.f5 {
  top: 10%;
  right: 4%;
  font-size: 3.4rem;
  color: #0ea5e9;
  animation-delay: -6s;
  opacity: 0.12;
}
.float-icon.f6 {
  bottom: 12%;
  right: 6%;
  font-size: 3.8rem;
  color: #1e6fd9;
  animation-delay: -10s;
  opacity: 0.13;
}

@keyframes floatAround {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(25px, -20px) rotate(8deg) scale(1.08);
  }
  40% {
    transform: translate(-15px, 18px) rotate(-5deg) scale(0.95);
  }
  60% {
    transform: translate(20px, 12px) rotate(6deg) scale(1.05);
  }
  80% {
    transform: translate(-10px, -15px) rotate(-3deg) scale(0.98);
  }
}

/* ===== 5. 背景光晕（浅底上加强层次） ===== */
.bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(100px);
}
.bg-glow.g1 {
  width: 620px;
  height: 620px;
  background: rgba(56, 152, 236, 0.18);
  top: -220px;
  left: 6%;
  animation: glowPulse 12s ease-in-out infinite;
}
.bg-glow.g2 {
  width: 560px;
  height: 560px;
  background: rgba(20, 112, 220, 0.16);
  bottom: -200px;
  right: 8%;
  animation: glowPulse 15s ease-in-out infinite;
  animation-delay: -6s;
}
@keyframes glowPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* ===== 6. 登录容器（靠右，宽度即卡片宽度） ===== */
#loginCardContainer {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: 0;
}

.login-wrapper {
  position: relative;
  z-index: 1;
}

/* ===== 7. 登录卡片（玻璃拟态） ===== */
.login-card {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(30, 111, 217, 0.14);
  border-radius: 18px;
  box-shadow:
    0 18px 50px rgba(21, 72, 131, 0.12),
    inset 0 0 40px rgba(56, 152, 236, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}
.login-card:hover {
  border-color: rgba(30, 111, 217, 0.26);
  box-shadow:
    0 24px 60px rgba(21, 72, 131, 0.16),
    inset 0 0 50px rgba(56, 152, 236, 0.08);
}

/* ===== 8. 品牌区 ===== */
.login-brand {
  padding: 20px 28px 8px;
  text-align: center;
}
.login-brand h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 4px;
  /* 渐变文字：与左侧大标题同一色系，形成呼应 */
  background: linear-gradient(135deg, #1e6fd9, #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}
.login-brand p {
  font-size: 0.78rem;
  color: #5b7899;
  margin: 0;
  letter-spacing: 0.5px;
}

/* ===== 9. 表单区 ===== */
.login-body {
  padding: 6px 28px 12px;
}
.form-group {
  margin-bottom: 10px;
}
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #2f5276;
  margin-bottom: 4px;
}
.form-group label i {
  width: 16px;
  color: #0ea5e9;
  font-size: 0.75rem;
}
.input-wrap {
  position: relative;
}
.input-wrap .form-control {
  width: 100%;
  padding: 7px 12px;
  border: 1.5px solid rgba(30, 111, 217, 0.18);
  border-radius: 8px;
  font-size: 0.82rem;
  background: #f5f9fd;
  color: #12304d;
  height: auto;
  line-height: 1.3;
  transition: all 0.3s ease;
}
.input-wrap .form-control:focus {
  border-color: #1e6fd9;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(30, 111, 217, 0.16);
  outline: none;
}
.input-wrap .form-control::placeholder {
  color: #93a9c0;
  font-size: 0.78rem;
}
/* 浅色主题下浏览器自动填充会强制黄底，此处把背景与文字覆盖回浅色 */
.input-wrap .form-control:-webkit-autofill,
.input-wrap .form-control:-webkit-autofill:hover,
.input-wrap .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #12304d;
  -webkit-box-shadow: 0 0 0 1000px #f5f9fd inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===== 10. 记住用户名 ===== */
.form-remember {
  margin-bottom: 12px;
}
.chk-remember {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #3a5878;
  cursor: pointer;
  /* 去掉 label 通用样式里的块级与下边距，做成行内勾选 */
  margin-bottom: 0 !important;
  -webkit-user-select: none;
  user-select: none;
}
.chk-remember input[type='checkbox'] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #1e6fd9; /* 现代浏览器原生勾选框着色，免去自绘控件 */
  cursor: pointer;
}
.chk-remember:hover span {
  color: #0b56b0;
}

/* ===== 11. 登录按钮 ===== */
.btn-login {
  width: 100%;
  padding: 7px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e6fd9, #3aa0ea);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
  line-height: 1.3;
  box-shadow: 0 4px 16px rgba(30, 111, 217, 0.28);
}
.btn-login:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #1b62c4, #2f96e0);
  box-shadow: 0 6px 24px rgba(30, 111, 217, 0.36);
}
.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(30, 111, 217, 0.22);
}
/* 提交中：按钮禁用态与加载图标 */
.btn-login:disabled {
  cursor: not-allowed;
  opacity: 0.75;
  transform: none;
}
.btn-login i {
  margin-right: 6px;
}

/* ===== 12. 卡片页脚（机构归属说明，固定显示） ===== */
.login-footer {
  padding: 12px 28px 20px;
  text-align: center;
  border-top: 1px solid rgba(30, 111, 217, 0.14);
}
.login-footer .footer-hint {
  font-size: 0.78rem;
  color: #93a9c0;
}
.login-footer .footer-hint i {
  margin-right: 4px;
  color: rgba(30, 111, 217, 0.65);
}

/* ===== 13. 版权信息（单行：版权主体 + 版本 + 备案号） =====
 * 层级设计：主体（年份 + 系统简称）0.72rem → 次级（版本 / 备案号）0.66rem，
 * 字号与对比度各拉开一档，避免四类信息并排同级、摊成一条等长的带子。
 */
.copyright {
  text-align: center;
  margin-top: 20px;
  /* 左右各留 10px：文字不贴容器边缘（原先会顶满整行） */
  padding: 16px 10px 0;
  border-top: 1px solid rgba(18, 48, 77, 0.08);
  font-size: 0.72rem;              /* 主体层级 */
  color: #93a9c0;
  line-height: 1.8;
}
/* 版本号：次级层级 */
.copyright .version {
  color: #a9bccd;
  font-size: 0.66rem;
  letter-spacing: 0.5px;
}
/* 版权与备案号之间的分隔符 */
.copyright .icp-sep {
  margin: 0 6px;
  color: #a9bccd;
}
/* 备案号链接：与版本号同属次级层级；点击后新窗口打开工信部备案系统 */
.copyright .icp-link {
  color: #1e6fd9;
  font-size: 0.66rem;
  text-decoration: none;
  transition: color 0.3s ease;
}
.copyright .icp-link:hover {
  color: #0b56b0;
  text-decoration: underline;
}
.copyright .icp-link i {
  margin-right: 3px;
  font-size: 0.62rem;
}

/* ===== 14. 左下角功能按钮组 ===== */
.bottom-actions {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999;
  display: inline-flex;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(30, 111, 217, 0.18);
  box-shadow: 0 8px 28px rgba(21, 72, 131, 0.14);
  overflow: hidden;
}
.bottom-actions .btn-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border: none;
  background: transparent;
  color: #1e6fd9;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.bottom-actions .btn-act:hover {
  background: rgba(30, 111, 217, 0.1);
  color: #0b56b0;
}
.bottom-actions .btn-act i {
  font-size: 0.82rem;
}

/* ===== 15. 响应式 ===== */
@media (max-width: 900px) {
  body {
    justify-content: center;
    padding: 20px;
  }
  /* 窄屏隐藏左侧大标题与浮动图标，避免与卡片抢空间 */
  .left-deco {
    display: none;
  }
  .login-wrapper {
    margin: 0 auto;
  }
  #loginCardContainer {
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  .login-wrapper {
    max-width: 100%;
  }
  #loginCardContainer {
    max-width: 100%;
  }
  .login-brand {
    padding: 16px 20px 6px;
  }
  .login-brand h1 {
    font-size: 1.2rem;
  }
  .login-body {
    padding: 6px 20px 14px;
  }
  .login-footer {
    padding: 10px 20px 16px;
  }
  .float-icon {
    display: none;
  }
  .bottom-actions {
    left: 12px;
    bottom: 12px;
  }
}

/* ===== 16. 空闲超时提示（登录页顶部，一次性） ===== */
.login-notice {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(30, 111, 217, 0.22);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(21, 72, 131, 0.14);
  color: #12304d;
  font-size: 13px;
  line-height: 1.4;
}

.login-notice i {
  color: #1e6fd9;
}