:root {
  --green: #07c160;
  --green-dark: #049f51;
  --ink: #1f2937;
  --muted: #a5adb8;
  --line: #dde2e7;
  --surface: #ffffff;
  --scale: min(1, calc(100vw / 390));
  --shell-width: min(100vw, 480px);
  --panel-pad-left: clamp(13.7px, 4.267vw, 20.5px);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: #f6f8fb;
  font-family: PingFangSC-Regular, "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

button,
input {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  background: transparent;
}

button {
  cursor: pointer;
}

.mobile-shell {
  width: var(--shell-width);
  min-height: 100dvh;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

.login-page {
  min-height: 100dvh;
  background: #fff;
}

.hero {
  height: clamp(153.6px, 48vw, 230.4px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("hombg.e410269d.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.login-logo {
  position: relative;
  z-index: 1;
  width: clamp(72.5px, 22.667vw, 108.8px);
  height: clamp(72.5px, 22.667vw, 108.8px);
  display: block;
  object-fit: contain;
}

.login-panel {
  min-height: calc(100dvh - clamp(153.6px, 48vw, 230.4px) + clamp(17.1px, 5.333vw, 25.6px));
  margin-top: calc(clamp(17.1px, 5.333vw, 25.6px) * -1);
  padding: clamp(20.5px, 6.4vw, 30.7px) clamp(27.3px, 8.533vw, 41px) clamp(41px, 12.8vw, 61.4px) var(--panel-pad-left);
  border-radius: clamp(34.1px, 10.667vw, 51.2px) clamp(34.1px, 10.667vw, 51.2px) 0 0;
  background: var(--surface);
  position: relative;
  z-index: 2;
}

.panel-head {
  height: 44px;
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: clamp(42px, 13vw, 64px);
}

.tab {
  min-width: 116px;
  height: 44px;
  color: var(--green);
  font-size: clamp(21px, 5.9vw, 23px);
  font-weight: 700;
  line-height: 44px;
  text-align: center;
  white-space: nowrap;
  position: relative;
}

.tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 4px;
  border-radius: 4px;
  background: var(--green);
  transform: translateX(-50%);
}

.close-btn {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.login-form {
  display: grid;
  gap: 0;
}

.form-row {
  display: flex;
  min-height: clamp(88px, 22.4vw, 108px);
  padding: clamp(10px, 2.66vw, 13px);
}

.icon-box {
  flex: 0 0 clamp(66px, 17.1vw, 82px);
  width: clamp(66px, 17.1vw, 82px);
  height: clamp(66px, 17.1vw, 82px);
  border-radius: 4px;
  background: #f5f5f5;
  display: grid;
  place-items: center;
}

.icon-box svg {
  width: 40px;
  height: 40px;
}

.field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: clamp(10px, 2.66vw, 13px);
}

.field span {
  height: 24px;
  padding: 0 clamp(10px, 2.66vw, 13px);
  color: #1f2933;
  font-size: clamp(16px, 4.3vw, 18px);
  font-weight: 700;
  line-height: 24px;
}

.field input {
  width: 100%;
  height: 45px;
  padding: 10px 0;
  color: #202732;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 24px;
}

.field input::placeholder {
  color: #c8cdd4;
}

.login-btn {
  width: calc(var(--shell-width) * .9);
  height: clamp(46px, 11.7vw, 56px);
  margin: clamp(40px, 10.5vw, 62px) 0 0 calc((var(--shell-width) * .05) - var(--panel-pad-left));
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: var(--green);
  font-size: clamp(20px, 5.3vw, 23px);
  font-weight: 500;
  box-shadow: 0 12px 26px rgba(7, 193, 96, .24);
}

.login-btn.loading {
  pointer-events: none;
}

.spinner {
  display: none;
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, .38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.quick-links {
  width: calc(var(--shell-width) * .9);
  margin: clamp(24px, 6.1vw, 28px) 0 0 calc((var(--shell-width) * .05) - var(--panel-pad-left));
  display: flex;
  justify-content: space-around;
}

.quick-links a {
  color: var(--green);
  font-size: clamp(16px, 4.3vw, 18px);
  line-height: 24px;
  text-decoration: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(48px, env(safe-area-inset-bottom));
  z-index: 50;
  max-width: min(360px, calc(100vw - 48px));
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(36, 40, 48, .92);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .2s, transform .2s;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.page-loading {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
}

.page-loading.show {
  opacity: 1;
  visibility: visible;
}

.premium-loader {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    conic-gradient(from 0deg, rgba(7, 193, 96, 0) 0 34%, rgba(7, 193, 96, .28) 56%, #07c160 78%, #10f08a 100%);
  box-shadow: 0 14px 34px rgba(7, 193, 96, .22), inset 0 0 0 1px rgba(7, 193, 96, .08);
  position: relative;
  animation: premium-spin .75s linear infinite;
}

.premium-loader::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(7, 193, 96, .08);
}

.premium-loader::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #07c160;
  box-shadow: 0 0 18px rgba(7, 193, 96, .68);
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}