/*
 * 幸瑭聚优登录体验 v58 — 多门店实时拓扑控制台
 * 完全隔离历史登录页样式。
 */

.login-screen.login-experience[hidden] { display: none !important; }

.login-experience,
.login-experience *,
.login-experience *::before,
.login-experience *::after { box-sizing: border-box; }

.login-screen.login-experience {
  --login-parallax-x: 0px;
  --login-parallax-y: 0px;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: grid !important;
  grid-template: 82px minmax(0, 1fr) 52px / minmax(0, 1fr) !important;
  width: 100vw !important;
  min-width: 0 !important;
  height: 100svh !important;
  min-height: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  color: #edf5ff !important;
  background:
    radial-gradient(circle at 43% 46%, rgba(31, 86, 151, .2), transparent 26%),
    radial-gradient(circle at 6% 90%, rgba(19, 74, 142, .13), transparent 28%),
    linear-gradient(115deg, #07101e 0%, #050a13 55%, #03060b 100%) !important;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif !important;
}

.login-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 63%, rgba(1, 4, 9, .25) 63%, rgba(1, 4, 9, .72) 100%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 18%, transparent 80%, rgba(0,0,0,.25));
}

.login-experience::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .035;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 4px);
}

.login-network-stage {
  position: absolute !important;
  inset: 0 33% 0 0 !important;
  z-index: -1 !important;
  display: block !important;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
}

.login-network-map {
  position: absolute;
  inset: 3% 0 auto -2%;
  width: 104%;
  height: 94%;
  opacity: .72;
  transform: translate3d(
    calc(var(--login-parallax-x) * -.18),
    calc(var(--login-parallax-y) * -.14),
    0
  );
  filter: drop-shadow(0 0 24px rgba(52, 136, 255, .06));
}

.network-grid path {
  fill: none;
  stroke: #85a9d5;
  stroke-width: .7;
  stroke-opacity: .085;
}

.network-routes path {
  fill: none;
  stroke: url("#networkLine");
  stroke-width: 1.4;
  stroke-dasharray: 4 8;
  stroke-linecap: round;
  animation: route-drift 16s linear infinite;
}

.network-routes path:nth-child(2n) {
  stroke-dasharray: 2 11;
  animation-duration: 21s;
  animation-direction: reverse;
}

.network-pulses circle {
  fill: #8cecff;
  filter: url("#networkGlow");
}

.hub-halo {
  fill: none;
  stroke: #3c91ff;
  stroke-width: 1;
  stroke-opacity: .16;
  animation: hub-breathe 3.6s ease-in-out infinite;
}

.hub-orbit {
  fill: none;
  stroke: #62cfff;
  stroke-width: 1.2;
  stroke-dasharray: 2 8;
  transform-origin: center;
}

.hub-orbit-a { animation: orbit-turn 22s linear infinite; }
.hub-orbit-b {
  stroke: #4988f6;
  stroke-dasharray: 16 5;
  animation: orbit-turn 14s linear infinite reverse;
}

.hub-core { fill: url("#hubCore"); }
.hub-dot { fill: #e8fbff; filter: url("#networkGlow"); }

.network-node text {
  fill: rgba(183, 207, 236, .5);
  font: 600 10px "Segoe UI", sans-serif;
  letter-spacing: .16em;
}

.network-node .node-name {
  fill: rgba(223, 235, 248, .74);
  font-family: "Microsoft YaHei UI", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
}

.node-halo {
  fill: #347cff;
  fill-opacity: .055;
  animation: node-pulse 3.2s ease-in-out infinite;
}

.network-node:nth-of-type(2) .node-halo { animation-delay: -.8s; }
.network-node:nth-of-type(3) .node-halo { animation-delay: -1.6s; }
.network-node:nth-of-type(4) .node-halo { animation-delay: -2.4s; }

.node-ring {
  fill: rgba(7, 24, 46, .86);
  stroke: #65d5ff;
  stroke-width: 1;
  stroke-opacity: .65;
}

.node-core { fill: #b8f4ff; }

.login-network-aura {
  position: absolute;
  left: 49%;
  top: 49%;
  width: 36vw;
  height: 36vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 120, 224, .13), rgba(35, 107, 208, .035) 38%, transparent 68%);
  transform: translate(-50%, -50%);
  animation: aura-breathe 6s ease-in-out infinite;
}

.login-experience-header {
  position: relative !important;
  z-index: 12 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 clamp(28px, 4.5vw, 72px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(143, 177, 217, .12) !important;
  background: rgba(3, 8, 15, .18) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

.login-experience-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.login-experience-brand .brand-mark {
  position: relative;
  display: grid !important;
  place-items: center;
  width: 43px !important;
  height: 43px !important;
  min-width: 43px;
  color: #fff !important;
  border: 1px solid rgba(126, 198, 255, .42) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #327ee8, #173b79) !important;
  box-shadow: 0 0 30px rgba(35, 109, 217, .23), inset 0 1px rgba(255,255,255,.28) !important;
  font: 700 16px/1 "Segoe UI", sans-serif !important;
}

.login-experience-brand .brand-mark::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #82edff;
  box-shadow: 0 0 12px rgba(130, 237, 255, .9);
}

.login-experience-brand strong,
.login-experience-brand small { display: block; }

.login-experience-brand strong {
  color: #f6f9ff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: .06em !important;
}

.login-experience-brand small {
  margin-top: 5px;
  color: rgba(179, 202, 228, .46) !important;
  font: 600 8px/1 "Segoe UI", sans-serif !important;
  letter-spacing: .24em !important;
}

.login-experience-meta {
  display: flex;
  align-items: center;
  gap: 26px;
  color: rgba(193, 210, 230, .48);
  font-size: 11px;
  letter-spacing: .05em;
}

.login-live-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(218, 232, 246, .7);
}

.login-live-state i,
.login-access-index em i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64dfb4;
  box-shadow: 0 0 12px rgba(100, 223, 180, .7);
  animation: state-pulse 2.5s ease-in-out infinite;
}

.login-experience-main {
  position: relative !important;
  z-index: 10 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 37%) !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.login-experience-story {
  position: relative;
  z-index: 4;
  align-self: end !important;
  width: min(620px, calc(100% - 80px)) !important;
  max-width: 620px !important;
  margin: 0 0 clamp(48px, 7vh, 88px) clamp(32px, 6vw, 96px) !important;
  padding: 0 !important;
  filter: none !important;
}

.login-experience-story::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -72px -80px -54px -50px;
  pointer-events: none;
  background: radial-gradient(ellipse at 38% 52%, rgba(4, 12, 23, .92) 0%, rgba(4, 12, 23, .7) 44%, transparent 76%);
  filter: blur(4px);
}

.login-experience-kicker {
  display: inline-block;
  min-height: 0;
  padding: 0 0 11px;
  color: rgba(137, 196, 244, .7);
  border-bottom: 1px solid rgba(81, 162, 232, .4);
  font: 600 9px/1 "Segoe UI", sans-serif;
  letter-spacing: .22em;
}

.login-experience-story h2 {
  max-width: 620px;
  margin: 20px 0 15px !important;
  color: #eff6ff !important;
  font-size: clamp(42px, 4vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.052em !important;
}

.login-experience-story h2 em {
  color: #8dbdff !important;
  font-style: normal !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.login-experience-story > p {
  max-width: 570px;
  margin: 0 !important;
  color: rgba(197, 216, 236, .62) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  letter-spacing: .02em;
}

.login-flow-line {
  display: flex;
  align-items: center;
  gap: 26px;
  width: auto;
  margin-top: 23px;
  color: rgba(214, 228, 243, .58);
  font-size: 11px;
  letter-spacing: .07em;
}

.login-flow-line span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.login-flow-line span i {
  flex: none;
  width: 5px;
  height: 5px;
  margin: 0;
  border-radius: 50%;
  background: #58c8ff;
  box-shadow: 0 0 9px rgba(88, 200, 255, .7);
}

.login-experience .login-panel.login-access-panel {
  position: relative !important;
  z-index: 15 !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  gap: 18px !important;
  width: calc(100% - 2px) !important;
  max-width: none !important;
  min-width: 390px !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(42px, 6.2vh, 70px) clamp(38px, 4.2vw, 68px) !important;
  overflow: hidden !important;
  color: #f2f7fd !important;
  border: 0 !important;
  border-left: 1px solid rgba(130, 171, 218, .15) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(145deg, rgba(18, 35, 57, .38), rgba(4, 9, 17, .78)),
    rgba(5, 11, 20, .66) !important;
  box-shadow: -30px 0 80px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(22px) saturate(115%) !important;
  filter: none !important;
}

.login-experience .login-panel.login-access-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  width: 1px !important;
  height: 100% !important;
  opacity: 1 !important;
  background: linear-gradient(180deg, transparent, rgba(72, 171, 255, .72) 48%, transparent) !important;
  box-shadow: 0 0 24px rgba(50, 136, 225, .28) !important;
}

.login-experience .login-panel.login-access-panel::after {
  content: "" !important;
  position: absolute !important;
  right: -170px !important;
  bottom: -220px !important;
  display: block !important;
  width: 420px !important;
  height: 420px !important;
  border: 1px solid rgba(74, 146, 226, .08) !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(37, 104, 190, .08), transparent 65%) !important;
  box-shadow: 0 0 0 46px rgba(68, 128, 204, .025), 0 0 0 92px rgba(68, 128, 204, .016) !important;
  pointer-events: none;
}

.login-screen.login-live .login-panel.login-access-panel {
  animation: console-arrive .72s .08s cubic-bezier(.2, .78, .2, 1) both !important;
}

.login-access-index {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 25px;
  padding-bottom: 14px;
  color: rgba(191, 211, 233, .53);
  border-bottom: 1px solid rgba(151, 183, 220, .13);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}

.login-access-index em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(148, 223, 199, .72);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.login-access-heading { margin: 7px 0 5px; }

.login-experience .login-panel h1 {
  margin: 0 0 8px !important;
  color: #f4f8fd !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.035em !important;
}

.login-experience .login-subtitle {
  margin: 0 !important;
  color: rgba(187, 207, 229, .48) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  letter-spacing: .02em !important;
}

.login-experience .login-panel label {
  position: relative;
  z-index: 2;
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  color: rgba(207, 222, 238, .67) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.login-experience .login-panel input {
  width: 100% !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  color: #edf6ff !important;
  border: 1px solid rgba(145, 180, 220, .2) !important;
  border-radius: 8px !important;
  outline: none !important;
  background: rgba(14, 29, 48, .58) !important;
  box-shadow: inset 0 1px 9px rgba(0, 0, 0, .18) !important;
  font-size: 14px !important;
  caret-color: #69d8ff;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

.login-experience .login-panel input::placeholder {
  color: rgba(171, 193, 218, .32) !important;
}

.login-experience .login-panel input:hover {
  border-color: rgba(147, 195, 239, .36) !important;
  background: rgba(17, 36, 59, .7) !important;
}

.login-experience .login-panel input:focus {
  border-color: rgba(80, 178, 244, .78) !important;
  background: rgba(13, 30, 51, .9) !important;
  box-shadow: 0 0 0 3px rgba(57, 151, 230, .12), inset 0 1px 9px rgba(0,0,0,.2) !important;
}

.login-experience .login-panel input:-webkit-autofill,
.login-experience .login-panel input:-webkit-autofill:hover,
.login-experience .login-panel input:-webkit-autofill:focus {
  -webkit-text-fill-color: #edf6ff !important;
  caret-color: #69d8ff !important;
  border-color: rgba(145, 180, 220, .28) !important;
  box-shadow:
    0 0 0 1000px #0d2035 inset,
    inset 0 1px 9px rgba(0, 0, 0, .18) !important;
  transition: background-color 99999s ease-out 0s !important;
}

.login-experience .login-panel .primary-button {
  position: relative;
  z-index: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 6px 0 0 !important;
  padding: 0 12px 0 18px !important;
  color: #fff !important;
  border: 1px solid rgba(121, 200, 255, .45) !important;
  border-radius: 8px !important;
  background: linear-gradient(100deg, #1767bd, #2486df) !important;
  box-shadow: 0 16px 34px rgba(4, 50, 105, .3), inset 0 1px rgba(255,255,255,.2) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

.login-experience .login-panel .primary-button b {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 6px;
  background: rgba(255,255,255,.13);
  font-size: 17px;
  font-weight: 400;
  transition: transform .2s ease;
}

.login-experience .login-panel .primary-button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08);
  box-shadow: 0 20px 40px rgba(4, 50, 105, .4), inset 0 1px rgba(255,255,255,.24) !important;
}

.login-experience .login-panel .primary-button:hover b { transform: translateX(2px); }
.login-experience .login-panel .primary-button:active { transform: translateY(0) !important; }

.login-experience .login-error {
  position: relative;
  z-index: 2;
  margin: -3px 0 0 !important;
  padding: 9px 11px !important;
  color: #ffcfc7 !important;
  border: 1px solid rgba(221, 89, 71, .27) !important;
  border-radius: 7px !important;
  background: rgba(119, 30, 22, .22) !important;
  font-size: 12px !important;
}

.login-experience .login-hint {
  position: relative;
  z-index: 2;
  margin: -3px 0 0 !important;
  color: rgba(181, 201, 222, .36) !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

.login-experience-footer {
  position: relative;
  z-index: 12;
  grid-column: 1 !important;
  grid-row: 3 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 0;
  padding: 0 clamp(28px, 4.5vw, 72px);
  color: rgba(173, 195, 219, .32);
  border-top: 1px solid rgba(143, 177, 217, .09);
  font-size: 9px;
  letter-spacing: .1em;
}

@keyframes route-drift { to { stroke-dashoffset: -120; } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes hub-breathe {
  0%, 100% { r: 88; stroke-opacity: .1; }
  50% { r: 105; stroke-opacity: .28; }
}
@keyframes node-pulse {
  0%, 100% { r: 19; fill-opacity: .035; }
  50% { r: 27; fill-opacity: .11; }
}
@keyframes aura-breathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes state-pulse {
  0%, 100% { opacity: .5; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes console-arrive {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 980px) {
  .login-screen.login-experience {
    grid-template-rows: 76px minmax(0, 1fr) 46px !important;
  }

  .login-network-stage {
    inset: 0 !important;
    opacity: .42;
    -webkit-mask-image: linear-gradient(180deg, #000 0 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 68%, transparent 100%);
  }

  .login-network-map {
    inset: -6% auto auto -38%;
    width: 150%;
    height: 82%;
  }

  .login-experience::before {
    background: linear-gradient(180deg, rgba(3,8,15,.08), rgba(3,8,15,.38) 34%, rgba(3,8,15,.92) 78%, #03070d);
  }

  .login-experience-header { padding: 0 22px !important; }
  .login-experience-meta > span:first-child { display: none; }

  .login-experience-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 18px !important;
  }

  .login-experience-story { display: none !important; }

  .login-experience .login-panel.login-access-panel {
    flex: 0 1 440px !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 440px !important;
    height: auto !important;
    padding: 32px 30px 29px !important;
    border: 1px solid rgba(130, 171, 218, .18) !important;
    border-radius: 16px !important;
    background: rgba(5, 13, 24, .86) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.45) !important;
  }

  .login-experience .login-panel.login-access-panel::before {
    inset: 0 22px auto !important;
    width: auto !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(72,171,255,.75), transparent) !important;
  }

  .login-experience-footer {
    justify-content: center;
    padding: 0 20px;
    text-align: center;
  }

  .login-experience-footer span:last-child { display: none; }
}

@media (max-width: 430px) {
  .login-screen.login-experience {
    grid-template-rows: 70px minmax(0, 1fr) 42px !important;
    min-height: 580px !important;
  }

  .login-experience-header { padding: 0 15px !important; }
  .login-experience-brand { gap: 10px; }

  .login-experience-brand .brand-mark {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  .login-experience-brand strong { font-size: 18px !important; }
  .login-experience-brand small { font-size: 7px !important; letter-spacing: .18em !important; }
  .login-live-state { font-size: 0; gap: 0; }
  .login-experience-main { padding: 16px 13px !important; }

  .login-experience .login-panel.login-access-panel {
    gap: 15px !important;
    padding: 27px 22px 24px !important;
    border-radius: 14px !important;
  }

  .login-experience .login-panel h1 { font-size: 27px !important; }
  .login-experience .login-panel input { height: 48px !important; }
  .login-experience-footer { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .network-routes path,
  .hub-orbit,
  .hub-halo,
  .node-halo,
  .login-network-aura,
  .login-live-state i,
  .login-access-index em i,
  .login-screen.login-live .login-panel.login-access-panel {
    animation: none !important;
  }

  .network-pulses { display: none; }
  .login-network-map { transform: none !important; }
}