:root {
  --login-navy: #0f2740;
  --login-bronze: #b45309;
}

html,
body {
  min-height: 100%;
}

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

body.login-page {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

.login-brand-panel {
  background:
    radial-gradient(700px 420px at 20% 10%, rgba(180, 83, 9, 0.14), transparent 65%),
    radial-gradient(620px 380px at 100% 100%, rgba(15, 118, 110, 0.1), transparent 60%),
    linear-gradient(145deg, #071522, #0f2740 58%, #102c45);
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(160deg, #000 20%, transparent 85%);
}

/* Tailwind preflight is disabled in this project; reset the browser's native
   button look without outranking the utility classes used on the page. */
:where(.login-page) :where(button) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

:where(.login-page) :where(input) {
  font: inherit;
}

.login-page input::placeholder {
  color: #94a3b8;
}

.login-page input:disabled,
.login-page button:disabled {
  cursor: not-allowed;
}

@media (max-width: 1023px) {
  .login-brand-panel {
    display: none;
  }
}