/* ══════════════════════════════════════════════════════════════
   登录页 —— 非对称两栏：品牌场 58% / 登录面板 42%
   构成意图：左侧把"驾驶舱"的空间感铺满，右侧收成一块玻璃面板，
   靠一条发丝分割线切开，而不是左右各放一张居中卡片。
   ══════════════════════════════════════════════════════════════ */

.login {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 58fr 42fr;
  height: 100vh;
  height: 100dvh;
}

/* ── 左：品牌场 ── */
.brandfield {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(32px, 6vw, 96px);
  border-right: 1px solid var(--c-line);
}

/* 网格地平线：极低对比的几何图案，给空间纵深 */
.brandfield__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(122, 168, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122, 168, 255, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 18% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 18% 40%, #000 20%, transparent 78%);
}

/* 雷达：同心圈 + 十字线 + 旋转扫描扇，读起来是仪表而不是污渍。
   刻意压在右侧并溢出画布 —— 既避免与左侧文字抢对比度，也是这一屏的"破格"元素。 */
.brandfield__sweep {
  position: absolute;
  top: 50%;
  right: -16%;
  width: min(72%, 700px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(122, 168, 255, 0.13);
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.9;
  /* 十字准线用两层渐变画，省一层 DOM */
  background-image:
    linear-gradient(to right, rgba(122, 168, 255, 0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122, 168, 255, 0.11) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
}
/* 内圈：用径向渐变叠出疏密不同的同心圆 */
.brandfield__sweep::before {
  content: '';
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(122, 168, 255, 0.10);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(122, 168, 255, 0.06),
    inset 0 0 60px rgba(46, 123, 255, 0.10);
}
/* 扫描扇：绕圆心匀速旋转，首尾有明确边界，不会糊成一片 */
.brandfield__sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(46, 123, 255, 0.30) 0deg,
    rgba(46, 123, 255, 0.10) 16deg,
    rgba(46, 123, 255, 0.02) 40deg,
    transparent 56deg,
    transparent 360deg);
  animation: sweep-rotate 7s linear infinite;
}
@keyframes sweep-rotate { to { transform: rotate(360deg); } }

.brandfield__inner {
  position: relative;
  max-width: 620px;
}

/* 展示字：中文用思源黑体栈，字重拉满。
   两行刻意做出字号层级（62 → 38），而不是等大双行 ——
   中文字面几乎填满字身框，等大双行在紧行距下会糊成一片 */
.brandfield__title {
  margin-top: var(--sp-5);
  font-family: var(--font-cn);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.brandfield__title-cn {
  display: block;
  font-size: clamp(34px, 4.2vw, 62px);
  color: var(--c-text);
}
/* 第二行描边 + 拉宽字距，作为"智能驾驶舱"的标识性处理，也是全页唯一的破格笔触 */
.brandfield__title-line {
  display: block;
  margin-top: 0.16em;
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--c-brand-2);
  letter-spacing: 0.18em;
}

.brandfield__desc {
  margin-top: var(--sp-5);
  /* 26em ≈ 390px，刚好让首行「服务商生态 · 分佣结算 · 区域分布，一屏总览。」整行放下，
     否则末尾会甩出一个「览。」孤字 —— 中文排版里这是硬伤 */
  max-width: 26em;
  color: var(--c-muted);
  font-size: var(--fs-md);
  line-height: 1.8;
  text-wrap: pretty;
}

.brandfield__stats {
  display: flex;
  gap: var(--sp-7);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.stat dt {
  font-size: var(--fs-2xs);
  letter-spacing: 0.2em;
  color: var(--c-dim);
  text-transform: uppercase;
}
.stat dd {
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--c-brand-2);
  line-height: 1.1;
}
.stat dd em {
  margin-left: 4px;
  font-family: var(--font-cn);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 400;
  color: var(--c-muted);
}

.brandfield__foot {
  margin-top: var(--sp-7);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  color: var(--c-dim);
}

/* ── 右：登录面板 ── */
.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 64px);
  background:
    linear-gradient(180deg, rgba(11, 26, 51, 0.55), rgba(6, 13, 28, 0.85));
  backdrop-filter: blur(12px);
}

.loginform {
  width: 100%;
  max-width: 396px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  animation: reveal-in var(--dur-slow) var(--ease-out) 120ms both;
}

.loginform__head { margin-bottom: var(--sp-2); }
.loginform__title {
  margin-top: var(--sp-3);
  font-family: var(--font-cn);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.loginform__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* 密码框：显隐按钮吸附在右侧内边缘 */
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 52px; }
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--c-muted);
  border-radius: var(--r-2);
  transition: color var(--dur-fast) ease-out, background var(--dur-fast) ease-out;
}
.password-toggle:hover { color: var(--c-brand-2); background: rgba(46, 123, 255, 0.10); }
.password-toggle[aria-pressed='true'] { color: var(--c-brand-2); }

/* 表单级告警 */
.loginform__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255, 95, 95, 0.45);
  border-left-width: 3px;
  border-radius: var(--r-2);
  background: rgba(255, 95, 95, 0.09);
  color: #FFC4C4;
  font-size: var(--fs-sm);
  animation: alert-in var(--dur-base) var(--ease-out);
}
.loginform__alert svg { flex: none; margin-top: 3px; }
@keyframes alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.loginform__submit { width: 100%; margin-top: var(--sp-2); }
/* 悬停时箭头推进，给一点"要出发了"的暗示 */
.loginform__arrow { transition: transform var(--dur-base) var(--ease-out); }
.loginform__submit:hover .loginform__arrow { transform: translateX(4px); }
.loginform__submit[data-loading='true'] { pointer-events: none; opacity: 0.75; }

.loginform__legal {
  font-size: var(--fs-2xs);
  line-height: 1.7;
  color: var(--c-dim);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   启动加载层
   ══════════════════════════════════════════════════════════════ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background:
    radial-gradient(50rem 34rem at 50% 42%, rgba(46, 123, 255, 0.16), transparent 62%),
    rgba(4, 8, 15, 0.96);
  backdrop-filter: blur(6px);
  animation: boot-in 380ms var(--ease-out);
}
.boot[hidden] { display: none; }
@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }

.boot__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: min(90vw, 460px);
  text-align: center;
}

/* 同心环雷达：三层错峰扩散，制造"正在扫描"的呼吸感 */
.boot__radar {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}
.boot__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-brand-2);
  border-radius: 50%;
  opacity: 0;
  animation: ring-pulse 2.4s var(--ease-out) infinite;
}
.boot__ring:nth-child(2) { animation-delay: 0.8s; }
.boot__ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring-pulse {
  0%   { transform: scale(0.32); opacity: 0.9; }
  100% { transform: scale(1);    opacity: 0; }
}
.boot__core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-brand);
  box-shadow: 0 0 22px rgba(46, 123, 255, 0.85);
  animation: core-breathe 1.6s ease-in-out infinite;
}
@keyframes core-breathe {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.65; }
}

.boot__title {
  font-family: var(--font-cn);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.boot__brand {
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  color: var(--c-muted);
  text-transform: uppercase;
}

.boot__bar {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: var(--sp-2);
  border-radius: var(--r-full);
  background: rgba(122, 168, 255, 0.14);
  overflow: hidden;
}
.boot__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-brand-deep), var(--c-brand), var(--c-brand-3));
  box-shadow: 0 0 12px rgba(46, 123, 255, 0.7);
  transition: width 120ms linear;
}

.boot__status {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: 0.1em;
  min-height: 1.6em;
}
.boot__percent {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--c-brand-2);
  letter-spacing: 0.1em;
}

/* ══════════════════════════════════════════════════════════════
   响应式
   768px 以下：单栏，品牌场收成一条页眉，把空间让给表单。
   375px：只留品牌名与表单，统计条与雷达扫描一并收起。
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .brandfield {
    padding: var(--sp-6) var(--sp-5);
    border-right: none;
    border-bottom: 1px solid var(--c-line);
  }
  .brandfield__sweep { display: none; }
  .brandfield__title-cn,
  .brandfield__title-line { font-size: clamp(28px, 7vw, 40px); }
  .brandfield__desc { margin-top: var(--sp-4); font-size: var(--fs-sm); }
  .brandfield__stats { display: none; }
  .brandfield__foot { display: none; }
  .panel { padding: var(--sp-6) var(--sp-5); align-items: flex-start; }
}

@media (max-width: 420px) {
  .brandfield__desc { display: none; }
  .brandfield__title { margin-top: var(--sp-3); }
}