@media (max-width: 720px) {
  .login-shell.login-shell { display: block; padding: 0; background: #050a2d; }
  .login-shell.login-shell::before {
    background:
      radial-gradient(circle at 84% 11%, rgba(126, 40, 255, .48) 0, rgba(78, 20, 174, .12) 27%, transparent 44%),
      radial-gradient(circle at -4% 24%, rgba(20, 210, 255, .28) 0, rgba(10, 116, 220, .1) 28%, transparent 46%),
      radial-gradient(circle at 50% 102%, rgba(99, 35, 255, .28), transparent 42%),
      linear-gradient(155deg, #03132f 0%, #071b51 34%, #15094d 69%, #330777 100%);
  }
  .login-shell.login-shell::after {
    display: block;
    opacity: .32;
    background:
      linear-gradient(rgba(125, 211, 252, .12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(125, 211, 252, .1) 1px, transparent 1px),
      radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .78) 0 1px, transparent 1.8px),
      radial-gradient(circle at 18% 9%, rgba(255, 255, 255, .48) 0 1px, transparent 1.8px);
    background-size: 38px 38px, 38px 38px, 94px 94px, 126px 126px;
    mask-image: linear-gradient(to bottom, black 0, rgba(0, 0, 0, .72) 45%, transparent 88%);
  }
  .login-frame.login-frame { display: block; width: 100%; min-height: 100dvh; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .brand-panel.brand-panel { display: none; }
  .login-panel.login-panel {
    position: relative;
    z-index: 0;
    min-height: 100dvh;
    justify-content: flex-start;
    overflow: hidden;
    padding: calc(28px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
    background: transparent;
  }
  .login-panel.login-panel::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -106px;
    right: -96px;
    width: 286px;
    height: 286px;
    border: 1px solid rgba(168, 85, 247, .24);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, .2), rgba(96, 40, 190, .05) 52%, transparent 69%);
    box-shadow: 0 0 90px rgba(109, 40, 217, .23);
  }
  .login-panel.login-panel::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: calc(70px + env(safe-area-inset-top));
    right: 34px;
    width: 32px;
    height: 32px;
    pointer-events: none;
    background: linear-gradient(145deg, #ffe16a 4%, #ffbd18 62%, #ff9d00 100%);
    clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
    filter: drop-shadow(0 0 14px rgba(255, 190, 24, .42));
  }
  .mobile-brand.mobile-brand {
    display: flex;
    position: relative;
    z-index: 1;
    width: max-content;
    max-width: calc(100% - 58px);
    align-items: center;
    gap: 11px;
    margin: 0 0 clamp(68px, 13vh, 108px);
    padding: 7px 13px 7px 7px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    background: rgba(5, 14, 55, .28);
    color: white;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 14px 34px rgba(1, 8, 36, .2);
    backdrop-filter: blur(14px);
  }
  .mobile-brand.mobile-brand img {
    content: url('/system/zhizhi-logo-20260901-r2.svg');
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(2, 8, 40, .34);
  }
  .login-heading.login-heading,
  .login-form.login-form,
  .error-slot.error-slot,
  .login-footer.login-footer { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .login-heading.login-heading {
    border: 1px solid rgba(255, 255, 255, .72);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(90deg, #22d3ee, #168dff 46%, #8b3dff 100%) top / 100% 3px no-repeat, rgba(255, 255, 255, .965);
    padding: 32px 28px 0;
    box-shadow: 0 -10px 34px rgba(2, 7, 35, .13);
    backdrop-filter: blur(20px);
  }
  .login-form.login-form { margin-top: 0; border-inline: 1px solid rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .965); padding: 28px 28px 0; backdrop-filter: blur(20px); }
  .error-slot.error-slot { min-height: 62px; border-inline: 1px solid rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .965); padding: 16px 28px 0; backdrop-filter: blur(20px); }
  .login-footer.login-footer { margin-top: 0; border: 1px solid rgba(255, 255, 255, .72); border-top: 0; border-radius: 0 0 26px 26px; background: rgba(255, 255, 255, .965); padding: 20px 28px 26px; box-shadow: 0 24px 60px rgba(1, 7, 37, .32); backdrop-filter: blur(20px); }
  .login-kicker.login-kicker { color: #6d42f5; }
  .login-button.login-button { background: linear-gradient(100deg, #138cff 0%, #6e45f5 56%, #8b35f2 100%); box-shadow: 0 14px 28px rgba(91, 62, 220, .25); }
}

@media (max-width: 370px) {
  .login-panel.login-panel { padding-inline: 14px; }
  .login-heading.login-heading,
  .login-form.login-form,
  .error-slot.error-slot,
  .login-footer.login-footer { padding-inline: 24px; }
}