/* ==========================================================================
   登录页 / 安装向导 · 独立视觉
   ========================================================================== */

.auth-wrap {
  min-height: 100vh;
  display: grid;
  /* 左侧品牌面板收窄（约 38%），右侧表单区留出更多空间 */
  grid-template-columns: minmax(340px, 5fr) 7fr;
  background: var(--bg);
}

/* ---------------------------------------------------------- 左侧品牌面板 */
.auth-aside {
  position: relative;
  background: linear-gradient(155deg, #1e1b4b 0%, #312e81 45%, #1e3a8a 100%);
  color: #fff;
  padding: 42px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-aside::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(129,140,248,.44), transparent 46%),
    radial-gradient(circle at 78% 82%, rgba(56,189,248,.34), transparent 48%),
    radial-gradient(circle at 58% 8%, rgba(168,85,247,.24), transparent 40%);
}
.auth-aside::after {
  content: '';
  position: absolute; inset: 0;
  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: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 76%);
}
.auth-aside-inner { position: relative; z-index: 2; }

.auth-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 34px;
}
.auth-logo-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, #818cf8, #38bdf8);
  display: grid; place-items: center; font-size: 22px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(56,189,248,.4);
  overflow: hidden; flex: 0 0 auto; color: #fff;
}
.auth-logo-icon svg { width: 26px; height: 26px; display: block; }
.auth-logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.auth-logo-text b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.auth-logo-text span { font-size: 11px; color: #a5b4fc; letter-spacing: 1.4px; text-transform: uppercase; }

.auth-hero h1 {
  font-size: 29px; line-height: 1.34; color: #fff;
  font-weight: 700; letter-spacing: -.8px; margin-bottom: 14px;
}
.auth-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #a5b4fc, #67e8f9);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-hero p {
  font-size: 13.5px; color: rgba(226,232,240,.8); line-height: 1.8;
  padding-left: 13px; border-left: 2px solid rgba(129,140,248,.55);
}

/* 垂直能力清单（比原来的四宫格更紧凑，适合窄栏） */
.auth-features { margin-top: 30px; display: flex; flex-direction: column; gap: 11px; }
.auth-feature {
  display: flex; align-items: flex-start; gap: 11px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  padding: 11px 13px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: all .2s var(--ease);
}
.auth-feature:hover {
  background: rgba(255,255,255,.115);
  transform: translateX(3px);
  border-color: rgba(129,140,248,.42);
}
.auth-feature .fi {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(129,140,248,.32), rgba(56,189,248,.22));
  border: 1px solid rgba(255,255,255,.14);
  color: #c7d2fe;
}
.auth-feature .fi svg { width: 17px; height: 17px; display: block; }
.auth-feature .fbody { flex: 1 1 auto; min-width: 0; }
.auth-feature .ft { font-size: 13px; font-weight: 600; color: #fff; }
.auth-feature .fd { font-size: 11.2px; color: rgba(199,210,254,.78); margin-top: 2px; line-height: 1.5; }

/* 底部统计条 */
.auth-bottom { position: relative; z-index: 2; }
.auth-stats {
  position: relative; z-index: 2;
  display: flex; gap: 0; margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,.13);
  padding-top: 18px;
}
.auth-stat { flex: 1; text-align: center; }
.auth-stat + .auth-stat { border-left: 1px solid rgba(255,255,255,.11); }
.auth-stat .sv {
  font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.4px; line-height: 1.2;
}
.auth-stat .sl { font-size: 11px; color: rgba(165,180,252,.85); margin-top: 3px; }

.auth-foot-note {
  position: relative; z-index: 2;
  font-size: 11.5px; color: rgba(148,163,184,.82); margin-top: 20px;
}

/* ---------------------------------------------------------- 右侧表单区 */
.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 44px 32px; background: var(--surface);
  overflow-y: auto;
  position: relative;
}
.auth-card { width: 100%; max-width: 412px; animation: fadeUp .45s var(--ease); }
.auth-card-head { margin-bottom: 24px; }
.auth-card-head h2 { font-size: 26px; letter-spacing: -.5px; margin-bottom: 7px; }
.auth-card-head p { color: var(--text-muted); font-size: 13.5px; }

/* 登录模式标签 */
.mode-switch {
  display: flex; gap: 4px; padding: 4px;
  background: var(--ink-100); border-radius: var(--r-md); margin-bottom: 24px;
}
.mode-switch .ms-item {
  flex: 1; text-align: center; padding: 8px 6px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  border-radius: var(--r-sm); cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap;
}
.mode-switch .ms-item.active {
  background: #fff; color: var(--primary-700);
  box-shadow: var(--shadow-sm); font-weight: 600;
}

.auth-field { margin-bottom: 17px; }
.auth-field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-700); margin-bottom: 8px;
}
.auth-field .icon { display: inline-flex; opacity: .75; }
.auth-field .icon svg { width: 15px; height: 15px; display: block; }

.field-wrap { position: relative; }
.field-wrap .input { padding-left: 42px; height: 46px; font-size: 14.5px; }
.field-wrap .field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--ink-400); pointer-events: none;
  transition: color .18s var(--ease);
}
.field-wrap .field-icon svg { width: 17px; height: 17px; display: block; }
.field-wrap .input:focus + .field-icon,
.field-wrap:focus-within .field-icon { color: var(--primary-500); }

.captcha-row { display: flex; gap: 10px; align-items: stretch; }
.captcha-row .input { flex: 1 1 auto; min-width: 0; }
.captcha-img {
  /* 图片实际比例 160:52（≈3.08），固定高度即可等比得到 160px 宽，字符更清晰 */
  height: 52px; width: auto; min-width: 132px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  cursor: pointer; flex: 0 0 auto;
  background: var(--ink-50);
  object-fit: contain;          /* 等比缩放，避免字被压扁 */
  display: block;
}

.auth-submit {
  width: 100%; height: 47px; margin-top: 8px;
  font-size: 15px; font-weight: 600; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  box-shadow: var(--shadow-primary);
}
.auth-submit:hover { box-shadow: 0 12px 30px rgba(79,70,229,.36); }

.auth-extra {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; font-size: 13px;
}
.auth-tip {
  margin-top: 24px; padding: 13px 15px;
  background: var(--info-soft); border: 1px solid rgba(14,165,233,.2);
  border-radius: var(--r-md); font-size: 12.5px; color: #0369a1; line-height: 1.7;
}
.auth-tip b { font-weight: 600; }

.auth-copyright {
  margin-top: 30px; text-align: center; font-size: 12px; color: var(--text-light);
}

@media (max-width: 1080px) {
  .auth-wrap { grid-template-columns: minmax(300px, 4fr) 6fr; }
  .auth-aside { padding: 34px 28px; }
  .auth-hero h1 { font-size: 25px; }
  .auth-feature .fd { display: none; }
}

@media (max-width: 860px) {
  /* 移动端：品牌信息收敛为「顶部横幅」，不再堆叠整块侧栏，
     否则登录表单会被推出首屏，用户必须长距离滑动才能看到输入框。 */
  .auth-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;      /* 品牌带自适应，表单区占满剩余高度 */
    min-height: 100vh;
    min-height: 100dvh;                /* 移动端动态视口，底部不漏底色 */
    background: var(--surface);        /* 与卡片同色 → 右侧/底部不再漏出浅灰色块 */
  }
  /* 顶部品牌带独立成块，高度由内容决定，不会与卡片「切」在一起 */
  .auth-aside {
    display: block;
    padding: 26px 18px 30px;
    min-height: auto;
    background: linear-gradient(150deg, #4338ca 0%, #4f46e5 52%, #3b82f6 100%);
    border-radius: 0 0 24px 24px;
    overflow: hidden;
  }
  .auth-aside::before,
  .auth-aside::after { display: none; }          /* 去掉桌面端装饰光斑与网格 */
  .auth-aside-inner { max-width: 460px; margin: 0 auto; }

  /* 顶部品牌条：logo + 系统名称 */
  .auth-logo { margin-bottom: 14px; gap: 11px; align-items: center; }
  .auth-logo-icon { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
  .auth-logo-icon svg { width: 23px; height: 23px; }
  .auth-logo-text b { font-size: 17px; letter-spacing: -.2px; color: #fff; }
  .auth-logo-text span { font-size: 10.5px; letter-spacing: 1.1px; color: rgba(199, 210, 254, .78); }

  /* 品牌带内保留一句简短标语，避免大片空白 */
  .auth-hero { display: block; }
  .auth-hero h1 { font-size: 19px; line-height: 1.4; margin-bottom: 6px; }
  .auth-hero h1 em { color: #c7d2fe; -webkit-text-fill-color: #c7d2fe; background: none; }
  .auth-hero p { font-size: 12.5px; padding-left: 11px; border-left-color: rgba(199,210,254,.5); margin: 0; }

  .auth-features, .auth-stats, .auth-bottom { display: none; }

  /* 整页统一为白色：内容不足一屏时，右侧/底部也保持与卡片一致的白色 */
  body { background: var(--surface); }

  /* 表单卡片必须整体落在品牌带「下方」，绝不与蓝色区域重叠。
     此处原为 margin-top:-16px（想让卡片骑在品牌带圆角上），
     实际效果是卡片上边缘压进蓝色区、把品牌带的标语文字盖住，
     因此改为留出明确的正向间距。 */
  .auth-main {
    padding: 18px 15px calc(30px + env(safe-area-inset-bottom));
    margin-top: 0;
    align-items: center;      /* 在剩余空间内垂直居中，充分利用底部空间、页面更饱满 */
    min-height: auto;
    background: transparent;
  }
  .auth-card {
    max-width: 460px;
    margin: 0 auto;
    background: var(--surface);       /* 透明父级下卡片必须有自身底色 */
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .11);
    border: 1px solid rgba(15, 23, 42, .07);
  }

  .auth-foot-note { display: none; }
}

@media (max-width: 480px) {
  /* 手机首屏适配：品牌带 + 表单整体收紧，
     原布局在 390×844 下总高 903px，底部版权行被挤出首屏（需滚动 59px）。
     这里按项压缩纵向留白，使整页（含版权）能在一屏内看完。 */
  .auth-aside { padding: 16px 15px 18px; border-radius: 0 0 22px 22px; }
  .auth-logo { margin-bottom: 9px; }
  .auth-logo-icon { width: 38px; height: 38px; border-radius: 11px; }
  .auth-logo-icon svg { width: 21px; height: 21px; }
  .auth-logo-text b { font-size: 16px; }
  .auth-logo-text span { font-size: 10px; }
  .auth-hero h1 { font-size: 17px; line-height: 1.32; margin-bottom: 5px; }
  .auth-hero p { font-size: 12px; line-height: 1.6; }

  .auth-main { padding: 14px 13px calc(18px + env(safe-area-inset-bottom)); margin-top: 0; }
  .auth-card { border-radius: 16px; }
  .auth-card-head { padding: 16px 18px 0; margin-bottom: 12px; }
  .auth-card-head h2 { font-size: 21px; }
  .auth-card-head p { font-size: 13px; }
  .mode-switch { margin-bottom: 16px; }
  .auth-field { margin-bottom: 14px; }
  .auth-field label { margin-bottom: 6px; }
  .auth-card-body { padding: 0 18px 18px; }
  .field-wrap .input { height: 46px; font-size: 16px; } /* 16px 防 iOS 聚焦缩放 */
  .captcha-img { height: 52px; min-width: 128px; }
  .auth-submit { margin-top: 6px; }
  .auth-extra { margin-top: 12px; }
  .auth-tip { margin-top: 14px; padding: 11px 13px; font-size: 12px; }
  .auth-copyright { margin-top: 14px; }
  .btn-block { height: 46px; font-size: 15px; }
}

/* 矮屏手机（如 667/700 高度的老机型）：进一步压缩，保证交卷/登录按钮不被推出屏幕 */
@media (max-width: 480px) and (max-height: 720px) {
  /* 矮屏下内容可能高于一屏，回到顶部对齐，避免垂直居中把顶部裁切掉 */
  .auth-main { align-items: flex-start; }
  .auth-aside { padding: 13px 15px 15px; }
  .auth-logo { margin-bottom: 7px; }
  .auth-hero h1 { font-size: 15.5px; }
  .auth-hero p { display: none; }         /* 矮屏下隐藏标语，优先保证表单可见 */
  .auth-card-head { padding: 13px 18px 0; margin-bottom: 10px; }
  .auth-card-head h2 { font-size: 19px; }
  .mode-switch { margin-bottom: 13px; }
  .auth-field { margin-bottom: 12px; }
  .auth-tip { margin-top: 12px; }
  .auth-copyright { margin-top: 10px; }
}

@media (max-width: 360px) {
  /* 极窄屏（≤360px）：一行放不下输入框+验证码图，改为上下排列，
     否则输入框会被压缩到看不清占位文字。
     验证码图保持原始宽高比（160:52 ≈ 3.08），不设 width:100% 以免横向拉扁。
     .field-wrap 上有内联 flex:1，需用 !important 覆盖。 */
  .captcha-row { flex-wrap: wrap; row-gap: 8px; }
  .captcha-row .field-wrap { flex: 0 0 100% !important; }
  .captcha-img {
    height: 54px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    object-fit: contain;      /* 等比缩放，不畸变 */
    margin-top: 1px;
  }
}

/* ==========================================================================
   安装向导
   ========================================================================== */
.install-wrap { max-width: 860px; margin: 0 auto; padding: 34px 18px 60px; }
.install-head { text-align: center; margin-bottom: 30px; }
.install-head .logo {
  width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--primary-500), #38bdf8);
  display: grid; place-items: center; font-size: 29px; color: #fff;
  box-shadow: var(--shadow-primary);
}
.install-head h1 { font-size: 26px; letter-spacing: -.5px; margin-bottom: 7px; }
.install-head p { color: var(--text-muted); font-size: 13.5px; }

.steps { display: flex; align-items: center; gap: 0; margin-bottom: 30px; }
.step { flex: 1; display: flex; align-items: center; gap: 10px; position: relative; }
.step:not(:last-child)::after {
  content: ''; flex: 1; height: 2px; background: var(--ink-200); margin: 0 8px;
  border-radius: 2px;
}
.step.done:not(:last-child)::after { background: var(--primary-400); }
.step .num {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--ink-200); color: var(--ink-500); transition: all .25s var(--ease);
}
.step .txt { font-size: 13px; color: var(--text-light); white-space: nowrap; }
.step.active .num { background: var(--primary-600); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft); }
.step.active .txt { color: var(--primary-700); font-weight: 600; }
.step.done .num { background: var(--success); color: #fff; }
.step.done .txt { color: var(--ink-600); }

.install-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.install-card-head {
  padding: 17px 24px; border-bottom: 1px solid var(--border); background: var(--ink-50);
}
.install-card-head h3 { font-size: 16px; }
.install-card-head p { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; }
.install-card-body { padding: 24px; }

.env-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.env-table th {
  text-align: left; padding: 9px 13px; background: var(--ink-50);
  font-size: 12.5px; color: var(--ink-600); border-bottom: 1px solid var(--border);
}
.env-table td { padding: 10px 13px; border-bottom: 1px solid var(--ink-100); }
.env-table tr:last-child td { border-bottom: 0; }

.install-actions {
  padding: 17px 24px; border-top: 1px solid var(--border); background: var(--ink-50);
  display: flex; gap: 11px; justify-content: flex-end;
}

@media (max-width: 680px) {
  .steps { flex-direction: column; align-items: flex-start; gap: 11px; }
  .step:not(:last-child)::after { display: none; }
  .install-wrap { padding: 20px 13px 40px; }
  .install-card-body { padding: 17px; }
}