/* ============================================================
   登录 / 注册 · 海克斯召唤师之门
   ============================================================ */
.auth-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: #040D14;
  animation: fadeIn .35s var(--ease);
}

/* ---------- 左侧原画 ---------- */
.auth-hero {
  position: relative; overflow: hidden;
  color: #fff; padding: 64px;
  display: flex; flex-direction: column;
  background:
    linear-gradient(90deg, rgba(3, 10, 16, .82) 0%, rgba(5, 18, 27, .45) 48%, rgba(5, 18, 27, .08) 100%),
    linear-gradient(0deg, rgba(3, 10, 16, .92) 0%, transparent 42%),
    url("../img/auth-rift.jpg") center 30% / cover no-repeat,
    #040D14;
}
/* 顶部金光 & 底部符文雾 */
.auth-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 300px at 12% -8%, rgba(200, 155, 60, .18), transparent 70%),
    radial-gradient(760px 380px at 88% 112%, rgba(10, 150, 170, .2), transparent 72%);
}
/* 细金线边框（内侧） */
.auth-hero::after {
  content: ""; position: absolute; inset: 18px; pointer-events: none;
  border: 1px solid rgba(200, 155, 60, .22);
  border-right: 0; border-bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
}
.auth-hero .brand { padding: 0; position: relative; z-index: 1; }
.auth-hero .brand .brand-mark { width: 44px; height: 44px; }
.auth-hero .brand-name { color: #F0E6D2; font-size: 19px; }
.auth-hero .brand-sub { color: #0AC8B9; }

.auth-hero-main { position: relative; z-index: 1; margin: auto 0; }
.auth-hero .ah-kicker {
  font-size: 11px; letter-spacing: .5em; color: #0AC8B9;
  text-transform: uppercase; margin-bottom: 14px;
  text-shadow: 0 0 14px rgba(10, 200, 185, .6);
}
.auth-hero h2 {
  color: #F0E6D2; font-size: 38px; line-height: 1.45; font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .85), 0 0 36px rgba(200, 155, 60, .25);
}
.auth-hero h2 em {
  font-style: normal; color: #E3C47E;
  background: linear-gradient(180deg, #F6E7C2, #C89B3C);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-hero p { color: rgba(240, 230, 210, .68); font-size: 14px; margin-top: 18px; line-height: 1.95; letter-spacing: .05em; }
.auth-points { display: flex; gap: 26px; margin-top: 42px; position: relative; z-index: 1; }
.auth-point { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: rgba(240, 230, 210, .82); letter-spacing: .05em; }
.auth-point .ap-ic {
  width: 36px; height: 36px;
  background: linear-gradient(160deg, rgba(200, 155, 60, .14), rgba(10, 50, 60, .3)) padding-box,
              linear-gradient(180deg, rgba(240, 230, 210, .5), rgba(120, 90, 40, .6)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  display: grid; place-items: center; color: #E3C47E;
}
.auth-hero-foot { position: relative; z-index: 1; font-size: 11px; color: rgba(240, 230, 210, .34); letter-spacing: .08em; }

/* ---------- 右侧表单 ---------- */
.auth-panel {
  display: grid; place-items: center; padding: 40px; overflow-y: auto;
  background:
    radial-gradient(720px 420px at 50% -10%, rgba(10, 150, 170, .12), transparent 65%),
    linear-gradient(180deg, #06141D, #040D14);
}
.auth-card { width: 380px; max-width: 100%; }
.auth-card .ac-logo { display: none; }
.auth-tabs {
  display: flex; gap: 28px; margin-bottom: 30px;
  border-bottom: 1px solid rgba(200, 155, 60, .22);
}
.auth-tab {
  height: 46px; font-size: 18px; font-weight: 600; color: var(--faint);
  position: relative; font-family: var(--font-display); letter-spacing: .16em;
}
.auth-tab.active { color: var(--gold-bright); text-shadow: 0 0 16px rgba(200, 155, 60, .4); }
.auth-tab.active::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2.5px;
  background: var(--gx-gold); box-shadow: 0 0 10px rgba(200, 155, 60, .8);
}
.auth-form .field { margin-bottom: 18px; }
.auth-form .input { height: 48px; }
.auth-code-row { display: flex; gap: 10px; }
.auth-code-row .input { flex: 1; }
.auth-code-row .btn { flex: none; height: 48px; min-width: 124px; }
.auth-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--muted); margin: 4px 0 18px; cursor: pointer; }
.auth-agree input { margin-top: 2px; accent-color: var(--gold); }
.auth-agree a { color: var(--gold); }
.auth-submit {
  height: 50px; width: 100%; font-size: 16px; font-weight: 700;
  letter-spacing: .3em; text-indent: .3em;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.auth-tip { text-align: center; font-size: 11.5px; color: var(--faint); margin-top: 18px; line-height: 1.8; }
.auth-tip a { color: var(--gold); cursor: pointer; }

.sms-demo {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 10px; padding: 10px 12px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-size: 12px; line-height: 1.6;
  background: rgba(47, 185, 206, .1) padding-box,
              linear-gradient(180deg, rgba(47,185,206,.5), rgba(10,90,130,.4)) border-box;
  border: 1px solid transparent;
  color: #8FDDE7;
}
.sms-demo .sms-code { font-weight: 700; font-size: 15px; letter-spacing: 2px; font-variant-numeric: tabular-nums; color: #CDFAFA; }

/* 注册流程弹窗内步骤 */
.reg-steps-mini { display: flex; gap: 0; margin-bottom: 18px; }
.reg-steps-mini .rsm { flex: 1; text-align: center; font-size: 11.5px; color: var(--faint); position: relative; }
.reg-steps-mini .rsm::before { content: ""; display: block; width: 22px; height: 22px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: var(--surface-3); border: 2px solid var(--border-strong); margin: 0 auto 6px; font-size: 11px; line-height: 18px; color: var(--faint); font-weight: 700; }
.reg-steps-mini .rsm:nth-child(1)::before { content: "1"; display:grid; place-items:center; }
.reg-steps-mini .rsm:nth-child(2)::before { content: "2"; display:grid; place-items:center; }
.reg-steps-mini .rsm:nth-child(3)::before { content: "3"; display:grid; place-items:center; }
.reg-steps-mini .rsm.done::before { background: var(--success); border-color: var(--success); color: #04100A; }
.reg-steps-mini .rsm.cur { color: var(--gold-bright); font-weight: 600; }
.reg-steps-mini .rsm.cur::before { background: var(--gx-gold); border-color: transparent; color: #0A1218; box-shadow: 0 0 12px rgba(200, 155, 60, .6); }
.reg-steps-mini .rsm::after { content: ""; position: absolute; top: 10px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: var(--border); }
.reg-steps-mini .rsm:last-child::after { display: none; }

.reg-contact-banner {
  display: flex; gap: 12px; align-items: center;
  background: rgba(200, 155, 60, .09) padding-box,
              linear-gradient(180deg, rgba(240,230,210,.4), rgba(120,90,40,.5)) border-box;
  border: 1px solid transparent;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  padding: 13px 14px; margin-bottom: 16px;
}
.reg-contact-banner .rcb-ic {
  width: 38px; height: 38px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  background: rgba(200, 155, 60, .16); color: var(--gold);
  display: grid; place-items: center; flex: none;
}
.reg-contact-banner .rcb-t { font-size: 12.5px; color: var(--gold-bright); font-weight: 600; }
.reg-contact-banner .rcb-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.6; }
.reg-contact-banner .btn { flex: none; }

@media (max-width: 900px) {
  .auth-gate { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-card .ac-logo { display: flex; justify-content: center; margin-bottom: 22px; }
  .auth-card .ac-logo .brand-mark { width: 48px; height: 48px; }
}