:root {
  --bg: #eef1f8;
  --ink: #1a1a1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --erp: #0071e3;
  --mes: #0d9488;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --panel-w: 420px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(380px, var(--panel-w));
}

/* ===== Hero poster ===== */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 72px);
  background:
    radial-gradient(ellipse 85% 70% at 8% 12%, rgba(120, 175, 255, 0.62), transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 78%, rgba(200, 155, 255, 0.48), transparent 58%),
    radial-gradient(ellipse 55% 48% at 78% 8%, rgba(120, 235, 215, 0.42), transparent 56%),
    radial-gradient(ellipse 48% 40% at 30% 92%, rgba(255, 175, 200, 0.38), transparent 54%),
    radial-gradient(ellipse 40% 35% at 52% 48%, rgba(255, 215, 150, 0.28), transparent 58%),
    linear-gradient(145deg, #e8eefc 0%, #f3f0fa 45%, #eaf7f4 100%);
}

.hero__glow {
  position: absolute;
  width: min(72vw, 760px);
  height: min(72vw, 760px);
  right: -20%;
  top: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.75), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}

.hero__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: -1cm;
}

.hero__logo {
  height: clamp(52px, 5.2vw, 78px);
  width: auto;
  max-width: min(480px, 78%);
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(40, 70, 140, 0.12));
}

.hero__corp {
  font-family: inherit;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 400;
  color: #5c6578;
  letter-spacing: 0.02em;
  line-height: 1.7;
  margin-top: 2px;
}

.hero__washes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.78;
}
.wash--blue {
  width: min(50vw, 540px); height: min(50vw, 540px);
  left: 2%; top: 26%;
  background: rgba(100, 165, 255, 0.68);
}
.wash--lilac {
  width: min(44vw, 460px); height: min(44vw, 460px);
  right: 0%; top: 14%;
  background: rgba(185, 145, 255, 0.62);
}
.wash--mint {
  width: min(46vw, 480px); height: min(46vw, 480px);
  left: 22%; bottom: 2%;
  background: rgba(100, 225, 200, 0.55);
}
.wash--peach {
  width: min(36vw, 380px); height: min(36vw, 380px);
  right: 16%; bottom: 16%;
  background: rgba(255, 168, 140, 0.52);
}
.wash--sky {
  width: min(32vw, 340px); height: min(32vw, 340px);
  left: 46%; top: 6%;
  background: rgba(130, 205, 255, 0.5);
}
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.14),
    inset 0 0 48px rgba(180, 160, 255, 0.14);
  opacity: 0.75;
}
.ring--a {
  width: min(40vw, 440px); height: min(40vw, 440px);
  right: 6%; top: 28%;
}
.ring--b {
  width: min(28vw, 300px); height: min(28vw, 300px);
  left: 16%; bottom: 14%;
  border-color: rgba(160, 230, 210, 0.5);
}

.hero__center {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 860px;
  padding: 24px 0;
}

.hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: #5a6480;
  margin-top: 1.5cm;
  margin-bottom: 16px;
}

.hero__slogan {
  font-size: clamp(26px, 3.1vw, 44px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.32;
  color: var(--ink);
  text-shadow: 0 10px 40px rgba(60, 90, 160, 0.08);
}

.hero__line { display: block; white-space: nowrap; }

.hero__slogan em {
  font-style: normal;
  background: linear-gradient(90deg, #0071e3, #5e5ce6 55%, #bf5af2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  margin-top: calc(28px + 3cm);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  max-width: 100%;
}

.hero__sub-mark {
  height: 1em;
  width: auto;
  flex-shrink: 0;
  font-size: clamp(28px, 2.8vw, 42px);
  filter: drop-shadow(0 4px 10px rgba(13, 148, 136, 0.18));
}

.hero__sub-text {
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  background: linear-gradient(90deg, #1d1d1f 0%, #3a5ccc 38%, #6b4de6 62%, #1d1d1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.hero__meta {
  margin-top: 16px;
  display: block;
  max-width: 36em;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: #5c6578;
}

.hero__foot {
  position: relative;
  z-index: 1;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #7a8296;
}

/* ===== Panel ===== */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,249,252,0.96)),
    linear-gradient(160deg, #ffffff, #f4f7fb);
  border-left: 1px solid rgba(90, 110, 160, 0.1);
  box-shadow: -18px 0 48px rgba(40, 70, 140, 0.06);
  min-height: 100vh;
  min-height: 100dvh;
}

.panel[data-system="mes"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,252,250,0.96)),
    linear-gradient(160deg, #ffffff, #f2faf8);
}

.panel__shell {
  width: 100%;
  max-width: 340px;
  margin: auto 0;
  padding: 8px 0 12px;
}

.brand { text-align: center; margin-bottom: 28px; }
.brand__mark {
  height: 52px;
  width: auto;
  margin: 0 auto 16px;
  object-fit: contain;
}
.brand__title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand__sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

.mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 3px;
  margin-bottom: 26px;
  border-radius: 980px;
  background: #e8e8ed;
}
.mode__btn {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 980px;
  height: 36px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: 0.18s ease;
}
.mode__btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.mode__btn[data-mode="erp"].is-active { color: var(--erp); }
.mode__btn[data-mode="mes"].is-active { color: var(--mes); }

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}

.input input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.input input::placeholder { color: #a1a1a6; }
.input input:focus {
  border-color: var(--erp);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18);
}
.panel[data-system="mes"] .input input:focus {
  border-color: var(--mes);
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.18);
}
.input input.is-error {
  border-color: #ff3b30;
  box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.12);
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 20px;
  font-size: 13px;
}
.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.remember input {
  width: 15px; height: 15px;
  accent-color: var(--erp);
}
.panel[data-system="mes"] .remember input { accent-color: var(--mes); }
.link {
  color: var(--erp);
  text-decoration: none;
  font-weight: 400;
}
.panel[data-system="mes"] .link { color: var(--mes); }
.link:hover { text-decoration: underline; }

.btn-login {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 980px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;
  background: var(--erp);
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.22);
  transition: filter 0.15s, transform 0.1s;
}
.panel[data-system="mes"] .btn-login {
  background: var(--mes);
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.22);
}
.btn-login:hover { filter: brightness(1.05); }
.btn-login:active { transform: scale(0.985); }

.panel__legal {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: #86868b;
}
.panel__legal span { color: var(--muted); }

.panel__copyright {
  width: 100%;
  max-width: 340px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: #8b919c;
}

.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  padding: 12px 18px;
  border-radius: 980px;
  background: rgba(29, 29, 31, 0.92);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
  z-index: 50;
  max-width: calc(100vw - 32px);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1100px) {
  .hero__slogan { font-size: clamp(22px, 2.8vw, 34px); }
  .hero__sub-text, .hero__sub-mark { font-size: clamp(22px, 2.4vw, 32px); }
}

@media (max-width: 1280px) and (min-width: 901px) {
  .hero__slogan { font-size: clamp(24px, 2.7vw, 36px); }
}

@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* 手机 / PDA：只保留一条品牌小条，隐藏高装饰区，登录框直接可见、不被键盘挡 */
  .hero {
    min-height: auto;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg, #e8eefc 0%, #f3f0fa 50%, #eaf7f4 100%);
  }
  .hero__glow,
  .hero__washes,
  .hero__center,
  .hero__foot { display: none; }
  .hero__top {
    margin-top: 0;              /* 关键：去掉 -1cm 负边距，否则 LOGO 被 overflow:hidden 裁掉 */
    align-items: center;
    gap: 4px;
  }
  .hero__logo { height: 40px; max-width: 82%; }
  .hero__corp { font-size: 12px; text-align: center; line-height: 1.5; }
  .hero__line, .hero__sub-text { white-space: normal; }

  .panel {
    min-height: auto;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.06);
    align-items: stretch;
    padding: 18px 18px 22px;
    box-shadow: none;
  }
  .panel__shell { margin: 0 auto; padding: 4px 0 8px; }
  .brand { margin-bottom: 18px; }
  .brand__mark { height: 40px; margin-bottom: 10px; }
  .brand__title { font-size: 21px; }
  .mode { margin-bottom: 18px; }
  .form-row { margin: 4px 0 14px; }
  .panel__legal { margin-top: 16px; }
  .panel__copyright { margin: 18px auto 0; }
}

@media (max-width: 480px) {
  .hero { padding: 12px 14px 10px; }
  .hero__logo { height: 34px; }
  .panel { padding: 14px 14px 18px; }
  .brand__mark { height: 34px; }
  .brand__title { font-size: 19px; }
  .input input { height: 46px; }
  .btn-login { height: 46px; }
}

@media (min-width: 1600px) {
  .page { grid-template-columns: minmax(0, 1.5fr) 460px; }
  .hero__slogan { font-size: 46px; }
  .panel__shell, .panel__copyright { max-width: 360px; }
}