/* 登录入口（全屏）：默认仅居中 Logo，点击后弹出登录浮层 */
.login {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--sp-lg); background: var(--c-bg);
}

/* 背景中央竖轴（2px 渐变红轴）。design 里轴线在品牌处「断开」成上下两段，
   中间留空给 Logo/品牌，两端淡出页面边缘营造无限纵深。*/
.login__axis {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    var(--c-primary-container) 14%,
    var(--c-primary-container) 36%,
    transparent 39%,            /* 上段结束，进入中间留空 */
    transparent 61%,            /* 中间留空结束 */
    var(--c-primary-container) 64%,
    var(--c-primary-container) 86%,
    transparent 100%);
  opacity: .7; pointer-events: none;
}

/* 中央竖轴上的上升火花粒子（design: subtle rising sparks）*/
.login__sparks {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 60px;
  transform: translateX(-50%); overflow: hidden; pointer-events: none;
}
.login__sparks span {
  position: absolute; bottom: -6px; left: 50%;
  width: 3px; height: 3px; border-radius: var(--r-full);
  background: var(--c-primary-container);
  box-shadow: 0 0 6px 1px rgba(183, 1, 0, .55);
  opacity: 0; will-change: transform, opacity;
  animation: spark-rise var(--d, 7s) linear var(--delay, 0s) infinite;
}
@keyframes spark-rise {
  0%   { transform: translate(-50%, 0) scale(1);   opacity: 0; }
  8%   { opacity: .9; }
  85%  { opacity: .5; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -100vh) scale(.3); opacity: 0; }
}
/* 9 颗粒子：错开时长/延迟/横向漂移，避免整齐划一 */
.login__sparks span:nth-child(1) { --d: 6.5s; --delay: 0s;   --dx: -6px; }
.login__sparks span:nth-child(2) { --d: 8s;   --delay: 1.1s; --dx: 7px;  width: 2px; height: 2px; }
.login__sparks span:nth-child(3) { --d: 5.5s; --delay: 2.3s; --dx: -10px; }
.login__sparks span:nth-child(4) { --d: 9s;   --delay: 0.6s; --dx: 11px; width: 4px; height: 4px; }
.login__sparks span:nth-child(5) { --d: 7s;   --delay: 3.2s; --dx: -4px; }
.login__sparks span:nth-child(6) { --d: 6s;   --delay: 4s;   --dx: 5px;  width: 2px; height: 2px; }
.login__sparks span:nth-child(7) { --d: 8.5s; --delay: 1.8s; --dx: -12px; }
.login__sparks span:nth-child(8) { --d: 5s;   --delay: 2.9s; --dx: 9px; }
.login__sparks span:nth-child(9) { --d: 7.8s; --delay: 0.3s; --dx: 3px;  width: 4px; height: 4px; }

@media (prefers-reduced-motion: reduce) {
  .login__sparks { display: none; }
}

/* 居中品牌标识 */
.login__hero {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-md);
  text-align: center;
}
/* Logo 图案：红色平行四边形方块内嵌品牌 logo.svg，hover 微缩放旋转。点击打开登录框 */
.login__mark {
  width: 80px; height: 80px; display: grid; place-items: center; padding: 16px; border: none;
  background: var(--c-primary-container);
  box-shadow: var(--shadow-glow);
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.login__mark:hover { transform: scale(1.05) rotate(2deg); filter: brightness(1.06); }
.login__mark:active { transform: scale(.98); }
.login__mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

.login__brandname { font-size: var(--fs-h1); font-weight: 800; color: var(--c-primary-container); letter-spacing: -.01em; }
.login__tagline {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-secondary); padding-left: .2em;
}
.login__copy {
  position: absolute; bottom: var(--sp-xl); left: 0; right: 0; text-align: center;
  font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-on-surface-var); opacity: .6;
}

/* 登录浮层（点击 Logo 后弹出）*/
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: var(--sp-lg);
}
.modal__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--c-bg) 40%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.login__card {
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  background: var(--c-surface-lowest);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-glow); padding: var(--sp-xl);
}
.login__brand { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.login__logo {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--c-primary-container); color: var(--c-on-primary); font-weight: 800;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}
.login__title { font-size: var(--fs-h2); font-weight: 800; }
.login__sub { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--c-on-surface-var); }
.login__divider { height: 1px; background: var(--c-primary-container); opacity: .35; margin: var(--sp-md) 0 var(--sp-lg); }

.field { margin-bottom: var(--sp-md); }
.field__label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-on-surface-var); margin-bottom: 6px; }
.field__input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--c-outline-var); background: var(--c-surface);
  color: var(--c-on-surface); font-size: var(--fs-body); outline: none;
  transition: border-color .15s var(--ease);
}
.field__input:focus { border-color: var(--c-primary); }