/* ==========================================================================
 * 登录 / 注册页 —— 照四方平台的 /login 与 /register 复刻
 *
 * 类名、尺寸、颜色、间距、圆角、渐变、响应式断点都按四方页面的计算样式对齐：
 *   .login-page > .login-shell > aside.brand-panel + div.form-panel
 *   输入框 52px 高 / 圆角 13px / 左内边距 49px（给图标留位）
 *   主按钮 52px / 渐变 105deg #39a7ff → #6d5dfc / 字重 800 / 字距 2px
 *   外壳 min(920px) / 两栏 minmax(300px,.92fr) minmax(380px,1.08fr) / 圆角 28px
 *   820px 以下隐藏品牌栏、显示 mobile-brand；480px 以下进一步压缩
 *
 * 与四方的唯一差异：图标用我们自己的 SVG（四方用的 font-awesome），
 * 以及图标位是 <i data-icon> 而不是 class="fa fa-xxx"。
 * ========================================================================== */

:root {
  --login-bg: #071120;
  --login-panel: rgba(10, 25, 47, .92);
  --login-panel-soft: rgba(16, 35, 62, .72);
  --login-border: rgba(148, 180, 224, .17);
  --login-text: #eef6ff;
  --login-muted: #91a6c2;
  --login-primary: #39a7ff;
  --login-primary-2: #6d5dfc;
  --login-success: #47dfb1;
  --login-danger: #ff6b81;
}

/* 四方把这套背景放在 body.login-layout 上，我们照做 */
body.login-layout {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--login-text);
  font-family: "Microsoft JhengHei", "Microsoft YaHei", "PingFang SC", -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 18%, rgba(57, 167, 255, .21), transparent 30%),
    radial-gradient(circle at 88% 78%, rgba(109, 93, 252, .18), transparent 32%),
    linear-gradient(145deg, #06101e 0%, #0a172a 48%, #07111f 100%) !important;
  overflow-x: hidden;
}

body.login-layout::before,
body.login-layout::after {
  position: fixed;
  z-index: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(10px);
}
body.login-layout::before {
  top: -190px; right: -120px;
  border: 1px solid rgba(57, 167, 255, .13);
  box-shadow: 0 0 0 46px rgba(57, 167, 255, .025), 0 0 0 96px rgba(57, 167, 255, .018);
}
body.login-layout::after {
  bottom: -220px; left: -100px;
  border: 1px solid rgba(109, 93, 252, .12);
  box-shadow: 0 0 0 55px rgba(109, 93, 252, .022), 0 0 0 116px rgba(109, 93, 252, .014);
}

/* ---------- 外壳 ---------- */

.login-page {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 42px 24px;
}

.login-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .92fr) minmax(380px, 1.08fr);
  width: min(920px, 100%);
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--login-border);
  border-radius: 28px;
  background: var(--login-panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .025) inset;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* ---------- 左侧品牌栏 ---------- */

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 50px 46px 42px;
  overflow: hidden;
  border-right: 1px solid rgba(148, 180, 224, .12);
  background: linear-gradient(155deg, rgba(57, 167, 255, .13), rgba(109, 93, 252, .07)),
              rgba(8, 21, 39, .76);
}
.brand-panel::before {
  position: absolute; top: -92px; right: -98px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 167, 255, .22), transparent 66%);
  content: "";
}
.brand-panel::after {
  position: absolute; right: -110px; bottom: -130px;
  width: 300px; height: 300px; border: 1px solid rgba(109, 93, 252, .15); border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(109, 93, 252, .025);
  content: "";
}

.brand-main,
.brand-points,
.brand-footnote { position: relative; z-index: 1; }

.brand-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 70px; }

.brand-mark {
  position: relative;
  display: grid;
  flex: 0 0 48px;
  width: 48px; height: 48px;
  overflow: hidden;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 15px;
  background: linear-gradient(145deg, var(--login-primary), var(--login-primary-2));
  box-shadow: 0 12px 26px rgba(57, 167, 255, .28);
  place-items: center;
}
.brand-mark::after {
  position: absolute; top: -50%; left: -70%;
  width: 70%; height: 200%;
  background: rgba(255, 255, 255, .24);
  content: "";
  transform: rotate(28deg);
}

.brand-name { min-width: 0; }
.brand-name strong {
  display: block; overflow: hidden;
  color: #fff; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: .5px;
  text-overflow: ellipsis; white-space: nowrap;
}
.brand-name span {
  display: block; margin-top: 4px;
  color: var(--login-muted); font-size: 12px; letter-spacing: 1.7px; text-transform: uppercase;
}

.brand-copy h1 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.5px;
}
.brand-copy h1 span {
  display: block;
  margin-top: 6px;
  color: transparent;
  background: linear-gradient(90deg, #6bc8ff, #8a7cff);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-copy p {
  max-width: 310px;
  margin: 0;
  color: var(--login-muted);
  font-size: 15px;
  line-height: 1.8;
}

.brand-points { display: grid; gap: 12px; margin: 38px 0 0; padding: 0; list-style: none; }
.brand-points li { display: flex; align-items: center; gap: 11px; color: #bed0e6; font-size: 14px; }
.brand-points i,
.brand-points svg {
  display: grid;
  flex: 0 0 27px;
  width: 27px; height: 27px;
  padding: 6px;
  color: var(--login-success);
  border: 1px solid rgba(71, 223, 177, .2);
  border-radius: 9px;
  background: rgba(71, 223, 177, .08);
  place-items: center;
  box-sizing: border-box;
}

.brand-footnote { margin-top: 34px; color: #627791; font-size: 12px; }

/* ---------- 右侧表单栏 ---------- */

.form-panel {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 50px 58px;
  background: rgba(10, 24, 44, .72);
}

.login-form-wrap { width: 100%; max-width: 410px; margin: 0 auto; }

.form-heading { margin-bottom: 30px; }
.form-kicker {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  color: #6bc8ff; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
}
.form-kicker::before {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--login-success);
  box-shadow: 0 0 0 5px rgba(71, 223, 177, .09);
  content: "";
}
.form-heading h2 { margin: 0 0 9px; color: #fff; font-size: 30px; font-weight: 800; line-height: 1.25; }
.form-heading p { margin: 0; color: var(--login-muted); font-size: 14px; line-height: 1.65; }

.field-group { margin-bottom: 18px; }
.field-label { display: block; margin-bottom: 8px; color: #b8cae0; font-size: 13px; font-weight: 700; }

.modern-input { position: relative; display: block; }
.modern-input > i,
.modern-input > svg {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 17px;
  width: 18px; height: 18px;
  color: #6f86a3;
  text-align: center;
  pointer-events: none;
  transform: translateY(-50%);
  transition: color .2s ease;
}
.modern-input .form-control {
  width: 100%;
  height: 52px;
  padding: 0 17px 0 49px;
  color: #eef6ff;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid rgba(148, 180, 224, .19);
  border-radius: 13px !important;
  outline: none;
  background: rgba(5, 17, 33, .66);
  box-shadow: none !important;
  box-sizing: border-box;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.modern-input .form-control::placeholder { color: #61758e; opacity: 1; }
.modern-input .form-control:hover { border-color: rgba(107, 200, 255, .34); background: rgba(7, 21, 40, .78); }
.modern-input .form-control:focus {
  border-color: rgba(57, 167, 255, .75);
  background: rgba(7, 21, 40, .94);
  box-shadow: 0 0 0 4px rgba(57, 167, 255, .1) !important;
}
.modern-input:focus-within > i,
.modern-input:focus-within > svg { color: var(--login-primary); }

.form-options {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 4px 0 23px;
}
.remember-check {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  color: #a9bdd4; font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
}
.remember-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check-ui {
  position: relative; display: inline-block; flex: 0 0 19px;
  width: 19px; height: 19px;
  border: 1px solid rgba(148, 180, 224, .34);
  border-radius: 6px;
  background: rgba(5, 17, 33, .65);
  transition: all .2s ease;
}
.remember-check input:checked + .check-ui {
  border-color: transparent;
  background: linear-gradient(145deg, var(--login-primary), var(--login-primary-2));
  box-shadow: 0 5px 14px rgba(57, 167, 255, .18);
}
.remember-check input:checked + .check-ui::after {
  position: absolute; top: 3px; left: 6px;
  width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}
.remember-check input:focus-visible + .check-ui { box-shadow: 0 0 0 4px rgba(57, 167, 255, .12); }

.text-link { color: #75c8ff; font-size: 13px; text-decoration: none; transition: color .2s ease; }
.text-link:hover, .text-link:focus { color: #a7dcff; text-decoration: none; }

.login-submit,
.login-submit.btn,
.login-submit.btn-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 22px;
  overflow: hidden;
  color: #fff !important;
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: 2px;
  border: 0 !important;
  border-radius: 13px !important;
  outline: none;
  background: linear-gradient(105deg, var(--login-primary), var(--login-primary-2)) !important;
  box-shadow: 0 14px 30px rgba(57, 167, 255, .24) !important;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.login-submit::before {
  position: absolute; top: -70%; left: -34%;
  width: 24%; height: 240%;
  background: rgba(255, 255, 255, .16);
  content: "";
  transform: rotate(24deg);
  transition: left .45s ease;
}
.login-submit:hover,
.login-submit:focus {
  color: #fff !important;
  background: linear-gradient(105deg, #50b2ff, #7a6aff) !important;
  box-shadow: 0 17px 36px rgba(57, 167, 255, .3) !important;
  transform: translateY(-1px);
}
.login-submit:hover::before { left: 118%; }
.login-submit:active { transform: translateY(0); }

/* 注册页的两个按钮并排（四方：重置 / 注册帐号） */
.auth-actions { display: flex; gap: 12px; margin-top: 4px; }
.auth-actions .login-submit { flex: 1 1 auto; }
.login-reset {
  flex: 0 0 116px;
  height: 52px;
  color: #b8cae0;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 1px;
  border: 1px solid rgba(148, 180, 224, .22);
  border-radius: 13px;
  background: rgba(5, 17, 33, .5);
  cursor: pointer;
  transition: all .2s ease;
}
.login-reset:hover { color: #fff; border-color: rgba(148, 180, 224, .4); background: rgba(16, 35, 62, .8); }

.form-divider {
  display: flex; align-items: center; gap: 13px;
  margin: 26px 0 19px;
  color: #60758e; font-size: 12px; white-space: nowrap;
}
.form-divider::before,
.form-divider::after { width: 100%; height: 1px; background: rgba(148, 180, 224, .13); content: ""; }

.register-line { margin: 0; color: #8298b3; font-size: 13px; text-align: center; }
.register-line .text-link { margin-left: 5px; font-weight: 700; }
.register-line .text-link svg { vertical-align: -2px; margin-left: 3px; }

.mobile-brand { display: none; }

/* 帐号类别单选（注册页，四方是「用户帐号 / 卡商帐号」两个卡片） */
.type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.type-picker label {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px;
  color: #a9bdd4;
  font-size: 14px; font-weight: 600;
  border: 1px solid rgba(148, 180, 224, .19);
  border-radius: 13px;
  background: rgba(5, 17, 33, .5);
  cursor: pointer;
  transition: all .2s ease;
}
.type-picker label:hover { border-color: rgba(107, 200, 255, .34); }
.type-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.type-picker input:checked + span { color: #fff; }
.type-picker label:has(input:checked) {
  border-color: rgba(57, 167, 255, .6);
  background: rgba(57, 167, 255, .1);
  box-shadow: 0 0 0 3px rgba(57, 167, 255, .08);
}

/* 错误/成功提示条（四方用 layer 弹层，我们放在表单顶部，位置更稳） */
.auth-alert {
  display: none;
  margin-bottom: 18px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid rgba(255, 107, 129, .3);
  border-radius: 11px;
  color: #ffc2cc;
  background: rgba(255, 107, 129, .1);
}
.auth-alert.on { display: block; }
.auth-alert.ok {
  color: #a9f3dc;
  border-color: rgba(71, 223, 177, .3);
  background: rgba(71, 223, 177, .1);
}

/* ---------- 响应式（照四方的断点） ---------- */

@media (max-width: 820px) {
  .login-page { padding: 28px 18px; }
  .login-shell { display: block; width: min(500px, 100%); min-height: 0; border-radius: 23px; }
  .brand-panel { display: none; }
  .form-panel { padding: 38px 34px 36px; }
  .mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
  .mobile-brand .brand-mark { flex-basis: 43px; width: 43px; height: 43px; font-size: 19px; border-radius: 13px; }
  .mobile-brand .brand-name strong { font-size: 18px; }
}

@media (max-width: 480px) {
  .login-page { align-items: flex-start; padding: 14px 10px; }
  .login-shell { border-radius: 19px; }
  .form-panel { padding: 29px 22px 27px; }
  .mobile-brand { margin-bottom: 29px; }
  .form-heading { margin-bottom: 25px; }
  .form-heading h2 { font-size: 26px; }
  .modern-input .form-control, .login-submit, .login-reset { height: 50px; }
  .auth-actions { flex-direction: column-reverse; }
  .login-reset { flex: 0 0 auto; width: 100%; }
  .type-picker { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .login-submit::before { display: none; }
  .login-submit:hover { transform: none; }
}