/* 登录页样式（独立作用域，lg- 前缀，避免与站点通用类名冲突） */

.lg-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 12% -10%, #fff0f3 0%, rgba(255, 240, 243, 0) 60%),
    radial-gradient(1000px 520px at 110% 120%, #f3f5ff 0%, rgba(243, 245, 255, 0) 55%),
    #fafafa;
}

/* 顶部细条 */
.lg-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
}
.lg-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 700; color: var(--ink-900); text-decoration: none;
}
.lg-logo img { width: 30px; height: 30px; }
.lg-logo small { font-size: 11px; font-weight: 500; color: var(--ink-400); letter-spacing: .08em; margin-left: 2px; }
.lg-back { font-size: 13.5px; color: var(--ink-500); text-decoration: none; }
.lg-back:hover { color: var(--signal); }

/* 主区域 */
.lg-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px 20px 48px;
}
.lg-card {
  width: min(940px, 100%);
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 40px 90px -50px rgba(11, 13, 18, .45);
  overflow: hidden;
}

/* 左侧品牌面板 */
.lg-aside {
  position: relative; padding: 40px 38px;
  color: #fff;
  background: linear-gradient(150deg, #1b1c24 0%, #2a1322 55%, #c9161d 140%);
  display: flex; flex-direction: column; gap: 22px;
}
.lg-brand { display: flex; align-items: center; gap: 12px; }
.lg-brand img { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); padding: 4px; }
.lg-brand h2 { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.25; }
.lg-brand p { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.lg-aside-tip { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.lg-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lg-subs li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: rgba(255, 255, 255, .86);
  padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px; background: rgba(255, 255, 255, .04);
}
.lg-subs .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-lt); flex: none; }
.lg-aside-foot { margin-top: auto; font-size: 11.5px; color: rgba(255, 255, 255, .66); }

/* 右侧表单 */
.lg-main { padding: 40px 40px 36px; display: flex; flex-direction: column; }
.lg-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.lg-tabs .tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 12px 4px; margin-right: 18px; font-size: 15px; font-weight: 500; color: var(--ink-400);
  position: relative; transition: color .2s linear;
}
.lg-tabs .tab.is-on { color: var(--ink-900); }
.lg-tabs .tab.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--signal);
}

.lg-pane { display: none; flex-direction: column; gap: 16px; }
.lg-pane.is-on { display: flex; }

.lg-field { display: flex; flex-direction: column; gap: 7px; }
.lg-label { font-size: 13px; font-weight: 500; color: var(--ink-700); }
.lg-field input {
  height: 46px; padding: 0 14px; font-size: 14.5px; color: var(--ink-900);
  border: 1px solid var(--line-strong); border-radius: 10px; background: #fff;
  transition: border-color .2s linear, box-shadow .2s linear;
}
.lg-field input::placeholder { color: var(--ink-400); }
.lg-field input:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
.lg-err {
  margin: 0; font-size: 13px; color: var(--signal-deep);
  background: var(--signal-soft); border: 1px solid var(--signal-line);
  padding: 9px 12px; border-radius: 9px;
}
.lg-submit {
  height: 48px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--signal); color: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: .12em;
  transition: background .2s linear, transform .26s var(--ease), box-shadow .2s linear;
}
.lg-submit:hover { background: var(--signal-deep); box-shadow: 0 14px 28px -14px rgba(201, 22, 29, .55); transform: translateY(-1px); }
.lg-submit:active { transform: translateY(1px); }
.lg-hint { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-400); text-align: center; }

/* 微信扫码 */
.lg-qr {
  position: relative; width: 220px; height: 220px; margin: 6px auto 2px;
  border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff;
}
.lg-qr canvas { display: block; width: 100%; height: 100%; }
.lg-qr-mask {
  position: absolute; inset: 0; border-radius: 14px;
  background: rgba(15, 16, 21, .82); color: #fff; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.lg-qr-tip { text-align: center; font-size: 14px; color: var(--ink-700); margin: 6px 0 0; }
.lg-qr-tip b { color: var(--signal-deep); }
.lg-sim {
  height: 42px; border: 1px solid var(--signal); background: #fff; color: var(--signal);
  border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500;
  transition: background .2s linear;
}
.lg-sim:hover { background: var(--signal-soft); }
.lg-sim:disabled { opacity: .6; cursor: default; }

/* 响应式：窄屏单栏 */
@media (max-width: 760px) {
  .lg-card { grid-template-columns: 1fr; }
  .lg-aside { display: none; }
  .lg-main { padding: 30px 24px 28px; }
  .lg-topbar { padding: 16px 20px; }
}