:root {
  color-scheme: light;
  --login-blue: #2174ff;
  --login-primary: rgba(0, 0, 0, 0.9);
  --login-secondary: rgba(0, 0, 0, 0.7);
  --login-placeholder: rgba(0, 0, 0, 0.5);
  --login-divider: rgba(214, 219, 227, 0.9);
  --login-radius-card: 6px;
  --login-radius-icon: 12px;
  --login-radius-button: 3px;
  --login-radius-qr: 12px;
  --login-card-scale: 1;
  --login-card-center-x: clamp(50%, calc(93.125vw - 292px), 77.9166667%);
  --login-card-border-cyan: #65d9f3;
  --login-card-border-blue: #4f86ff;
  --login-card-border-violet: #8f9cff;
  --login-card-border-base: rgba(142, 183, 255, 0.28);
  --login-card-border-orbit-duration: 8s;
  --login-card-halo-duration: 4.8s;
  --login-card-border-arc: conic-gradient(
    from 0deg,
    transparent 0deg 34deg,
    var(--login-card-border-cyan) 56deg,
    var(--login-card-border-blue) 82deg,
    var(--login-card-border-violet) 108deg,
    transparent 134deg 214deg,
    var(--login-card-border-cyan) 236deg,
    var(--login-card-border-blue) 262deg,
    var(--login-card-border-violet) 288deg,
    transparent 314deg 360deg
  );
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

html[data-page="login"] body {
  overflow: hidden;
  background: #fff;
  color: var(--login-primary);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button {
  border: 0;
  font: inherit;
}

.login-shell {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
}

.login-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.login-background {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}

.login-card-anchor {
  position: absolute;
  left: var(--login-card-center-x);
  top: 50%;
  right: auto;
  width: 448px;
  height: 526px;
  overflow: visible;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.login-card-scale {
  position: absolute;
  inset: 0;
  width: 448px;
  height: 526px;
  overflow: visible;
  isolation: isolate;
  transform: scale(var(--login-card-scale));
  transform-origin: center center;
}


.login-card-halo {
  position: absolute;
  z-index: -1;
  inset: -3px;
  padding: 3px;
  border-radius: 10px;
  overflow: hidden;
  filter: blur(8px);
  opacity: 0.14;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: login-card-halo-breathe var(--login-card-halo-duration) ease-in-out infinite;
}

.login-card {
  position: relative;
  width: 448px;
  height: 526px;
  overflow: visible;
  border-radius: var(--login-radius-card);
  background: url("assets/login/login-card.png") center / 100% 100% no-repeat;
  box-shadow: 0 18px 42px rgba(38, 83, 134, 0.04);
}


.login-card-border-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.login-card-border {
  position: absolute;
  display: block;
  overflow: hidden;
  background: var(--login-card-border-base);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.login-card-halo::before,
.login-card-border::before {
  position: absolute;
  inset: -72%;
  content: "";
  background: var(--login-card-border-arc);
  transform-origin: center;
  will-change: transform;
  animation: login-card-border-orbit var(--login-card-border-orbit-duration) linear infinite;
}


.login-card-border--inner {
  inset: 0;
  padding: 1px;
  border-radius: 6px;
}


.login-card-border--outer {
  inset: -2px;
  padding: 2px;
  border-radius: 8px;
  opacity: 0.3;
}

@keyframes login-card-border-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(1turn); }
}

@keyframes login-card-halo-breathe {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.24; }
}


/* V1.1.2.7 | >1920px large-screen fallback scaling
 * Only used when typed CSS division is unavailable.
 * <=1920px behavior remains untouched.
 */
@media (min-width: 1984px) {
  :root { --login-card-scale: 1.033333; }
}

@media (min-width: 2048px) {
  :root { --login-card-scale: 1.066667; }
}

@media (min-width: 2112px) {
  :root { --login-card-scale: 1.100000; }
}

@media (min-width: 2176px) {
  :root { --login-card-scale: 1.133333; }
}

@media (min-width: 2240px) {
  :root { --login-card-scale: 1.166667; }
}

@media (min-width: 2304px) {
  :root { --login-card-scale: 1.200000; }
}

@media (min-width: 2368px) {
  :root { --login-card-scale: 1.233333; }
}

@media (min-width: 2432px) {
  :root { --login-card-scale: 1.266667; }
}

@media (min-width: 2496px) {
  :root { --login-card-scale: 1.300000; }
}

@media (min-width: 2560px) {
  :root { --login-card-scale: 1.333333; }
}

@media (min-width: 2624px) {
  :root { --login-card-scale: 1.366667; }
}

@media (min-width: 2688px) {
  :root { --login-card-scale: 1.400000; }
}

@media (min-width: 2752px) {
  :root { --login-card-scale: 1.433333; }
}

@media (min-width: 2816px) {
  :root { --login-card-scale: 1.466667; }
}

@media (min-width: 2880px) {
  :root { --login-card-scale: 1.500000; }
}

@media (min-width: 2944px) {
  :root { --login-card-scale: 1.533333; }
}

@media (min-width: 3008px) {
  :root { --login-card-scale: 1.566667; }
}

@media (min-width: 3072px) {
  :root { --login-card-scale: 1.600000; }
}

@media (min-width: 3136px) {
  :root { --login-card-scale: 1.633333; }
}

@media (min-width: 3200px) {
  :root { --login-card-scale: 1.666667; }
}

@media (min-width: 3264px) {
  :root { --login-card-scale: 1.700000; }
}

@media (min-width: 3328px) {
  :root { --login-card-scale: 1.733333; }
}

@media (min-width: 3392px) {
  :root { --login-card-scale: 1.766667; }
}

@media (min-width: 3456px) {
  :root { --login-card-scale: 1.800000; }
}

@media (min-width: 3520px) {
  :root { --login-card-scale: 1.833333; }
}

@media (min-width: 3584px) {
  :root { --login-card-scale: 1.866667; }
}

@media (min-width: 3648px) {
  :root { --login-card-scale: 1.900000; }
}

@media (min-width: 3712px) {
  :root { --login-card-scale: 1.933333; }
}

@media (min-width: 3776px) {
  :root { --login-card-scale: 1.966667; }
}

@media (min-width: 3840px) {
  :root { --login-card-scale: 2.000000; }
}

/* V1.1.2.7 | Modern browser continuous large-screen scaling.
 * 1920px is the 1.0 baseline.
 * 3840px and above are capped at 2.0.
 */
@supports (transform: scale(calc(100vw / 1920px))) {
  @media (min-width: 1921px) {
    :root {
      --login-card-scale: clamp(
        1,
        calc(100vw / 1920px),
        2
      );
    }
  }
}

/* 常规桌面 */
@media (max-width: 1760px) {
  :root {
    --login-card-scale: 0.97;
  }
}

@media (max-width: 1600px) {
  :root {
    --login-card-scale: 0.94;
  }
}

@media (max-width: 1440px) {
  :root {
    --login-card-scale: 0.90;
  }
}

@media (max-width: 1280px) {
  :root {
    --login-card-scale: 0.88;
  }
}

.login-title,
.login-subtitle,
.login-tabs,
.login-panel {
  position: absolute;
}

.login-title {
  left: 0;
  top: 49px;
  width: 100%;
  margin: 0;
  white-space: nowrap;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: 0;
  text-align: center;
}

/* R1.2: English needs intentional side breathing room, not merely enough
 * width to avoid clipping. Narrow the title box and step the size down one
 * level while keeping the accepted single-line centered treatment. */
html[data-locale="en-US"] .login-title {
  left: 36px;
  width: calc(100% - 72px);
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  font-size: clamp(27px, 1.82vw, 30px);
  line-height: 1;
}

.login-subtitle {
  left: 0;
  top: 103px;
  width: 100%;
  margin: 0;
  white-space: nowrap;
  color: var(--login-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.login-tabs {
  left: 48px;
  top: 153px;
  width: 352px;
}

.login-tab-list,
.login-tab-track {
  display: flex;
  width: 100%;
}

.login-tab-list {
  height: 24px;
}

.login-tab {
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: var(--login-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  transition: color 180ms ease;
}

.login-tab.is-active {
  color: var(--login-blue);
  font-weight: 500;
}

.login-tab:hover {
  color: var(--login-blue);
}

.login-tab:focus-visible,
.lark-button:focus-visible {
  outline: 2px solid rgba(33, 116, 255, 0.58);
  outline-offset: 3px;
}

.login-tab-track {
  gap: 0;
  height: 2px;
  margin-top: 12px;
}

.login-tab-line {
  flex: 1 1 50%;
  height: 100%;
  background: var(--login-divider);
}

.login-tab-line.is-active {
  background: var(--login-blue);
}

.login-panel {
  inset: 0;
  pointer-events: none;
}

.login-panel[hidden] {
  display: none;
}

.lark-app {
  position: absolute;
  left: 184px;
  top: 252px;
  display: block;
  width: 80px;
  height: 80px;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid rgba(230, 233, 239, 0.85);
  border-radius: var(--login-radius-icon);
  user-select: none;
  -webkit-user-drag: none;
}

.lark-button {
  position: absolute;
  left: 48px;
  top: 393px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 352px;
  height: 40px;
  overflow: visible;
  isolation: isolate;
  border-radius: var(--login-radius-button);
  background: url("assets/login/lark-button.png") center / 100% 100% no-repeat;
  box-shadow: inset 0 7px 31px -17px rgba(255, 255, 255, 0.85), inset 0 0 11px -7px rgba(255, 255, 255, 0.65);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

.lark-projection {
  position: absolute;
  z-index: 0;
  left: 4%;
  top: calc(100% - 3px);
  width: 85%;
  height: 10px;
  border-radius: 999px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #6bdef0 0%, #568dfa 48%, #9472f5 100%);
  opacity: 0;
  filter: blur(7.56px);
  transform: scale(1.04, 1);
  transform-origin: center top;
  transition: opacity 300ms ease-in-out;
}

.lark-button:hover .lark-projection,
.lark-button:focus-visible .lark-projection {
  opacity: 0.46;
}


.lark-button::after {
  position: absolute;
  z-index: 0;
  left: var(--lark-light-x, -1000px);
  top: var(--lark-light-y, -1000px);
  width: 95px;
  height: 95px;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 72%);
  mix-blend-mode: overlay;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.lark-button:hover::after,
.lark-button:focus-visible::after {
  opacity: 0.52;
}

.lark-button-label {
  position: relative;
  z-index: 1;
}

.lark-button:disabled {
  cursor: wait;
  opacity: 0.82;
}

.qr-shell {
  position: absolute;
  left: 118px;
  top: 223px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 212px;
  height: 212px;
  padding: 12px;
  border-radius: var(--login-radius-qr);
  background: #fff;
}

.qr-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.qr-caption {
  position: absolute;
  left: 0;
  top: 451px;
  width: 100%;
  margin: 0;
  color: var(--login-placeholder);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 701px) and (max-height: 600px) {
  #login-view {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .login-shell {
    position: relative;
    inset: auto;
    min-height: 600px;
  }

  .login-stage {
    height: 600px;
    min-height: 600px;
  }

  .login-background {
    position: fixed;
    inset: 0;
  }
}

.login-stage::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: transparent;
}

@media (max-width: 1120px), (max-aspect-ratio: 3 / 2) {
  .login-background {
    object-position: 56% 50%;
  }

  .login-stage::after {
    background: linear-gradient(
      90deg,
      rgba(246, 249, 253, 0.04) 0%,
      rgba(246, 249, 253, 0.12) 46%,
      rgba(246, 249, 253, 0.22) 100%
    );
  }
}

@media (max-width: 700px) {
  html[data-page="login"] body {
    overflow: hidden;
  }

  #login-view {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .login-shell {
    position: relative;
    inset: auto;
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    overflow: visible;
  }

  .login-stage {
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 32px);
    min-height: calc(100svh - 32px);
    overflow: visible;
  }

  .login-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    object-fit: cover;
    object-position: 60% 50%;
  }

  .login-stage::after {
    position: fixed;
    background: rgba(246, 249, 253, 0.22);
  }

  .login-card-anchor {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    width: min(394px, 100%);
    height: clamp(460px, 122vw, 526px);
    margin: auto;
    transform: none;
    z-index: 1;
  }

  .login-card-scale {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .login-card {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-size: 100% 100%;
  }

  .login-title {
    left: 0;
    top: 9.3%;
    width: 100%;
    text-align: center;
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.22;
  }

  html[data-locale="en-US"] .login-title {
    left: 24px;
    width: calc(100% - 48px);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: clamp(22px, 5.8vw, 26px);
    line-height: 1;
  }

  .login-subtitle {
    left: 0;
    top: 19.6%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
  }

  .login-tabs {
    left: 10.714%;
    top: 29.1%;
    width: 78.571%;
  }

  .login-tab {
    font-size: clamp(14px, 4vw, 16px);
  }

  .lark-app {
    left: 50%;
    top: 47.9%;
    width: clamp(64px, 18vw, 80px);
    height: clamp(64px, 18vw, 80px);
    transform: translateX(-50%);
  }

  .lark-button {
    left: 10.714%;
    top: auto;
    bottom: 17.68%;
    width: 78.571%;
    height: 40px;
    font-size: clamp(14px, 4vw, 16px);
  }

  .qr-shell {
    left: 50%;
    top: 42.4%;
    width: clamp(176px, 52vw, 212px);
    height: auto;
    aspect-ratio: 1;
    transform: translateX(-50%);
  }

  .qr-caption {
    left: 0;
    top: auto;
    bottom: 10%;
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card-halo,
  .login-card-halo::before,
  .login-card-border::before {
    animation: none !important;
  }

  .login-tab,
  .lark-projection,
  .lark-button::after {
    transition: none !important;
  }
}


#login-view {
  position: fixed;
  inset: 0;
  z-index: 100;
}

html[data-page="login"] #home-view {
  display: none;
}

html[data-page="home"] #login-view {
  display: none;
}