:root {
  --primary: #1f4e79;
  --primary-deep: #143a5c;
  --primary-2: #2b6a9c;
  --primary-soft: #eaf1f8;
  --text: #1c2530;
  --text-2: #5b6875;
  --text-3: #8a97a3;
  --line: #e3e8ee;
  --error: #c33f3f;
  --error-bg: #fdf0ef;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--text);
  background: #eef2f7;
}

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------------------------------------------------------- 左侧品牌区 */
.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 44px 52px;
  overflow: hidden;
  color: #eaf1f8;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(78, 148, 210, .45), transparent 62%),
    radial-gradient(760px 460px at 96% 108%, rgba(43, 106, 156, .5), transparent 60%),
    linear-gradient(150deg, var(--primary-deep) 0%, var(--primary) 58%, #26608f 100%);
}

.brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 78%);
  pointer-events: none;
}

.brand-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: .4px;
  color: rgba(234, 241, 248, .92);
}

.mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(2px);
}

.brand-copy {
  position: relative;
  max-width: 520px;
}

.brand-copy h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: 1px;
}

.brand-copy > p {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.85;
  color: rgba(234, 241, 248, .78);
}

.features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  font-size: 13.5px;
  color: rgba(234, 241, 248, .86);
}

.features li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.features .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fc3ea;
  box-shadow: 0 0 0 4px rgba(143, 195, 234, .16);
  flex: 0 0 auto;
}

.brand-foot {
  position: relative;
  font-size: 12px;
  color: rgba(234, 241, 248, .55);
}

/* ---------------------------------------------------------- 右侧表单区 */
.form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background:
    radial-gradient(620px 380px at 100% 0%, rgba(43, 106, 156, .08), transparent 65%),
    #f6f8fb;
}

.login-card {
  width: 100%;
  max-width: 392px;
  padding: 34px 34px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(20, 58, 92, .10), 0 2px 6px rgba(20, 58, 92, .05);
  animation: rise .28s ease-out both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--primary-deep);
}

.card-head p {
  margin: 0 0 26px;
  font-size: 13px;
  color: var(--text-3);
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--text);
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

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

.field input:hover { border-color: #cfdae6; }

.field input:focus {
  background: #fff;
  border-color: var(--primary-2);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.input-wrap { position: relative; }
.input-wrap input { padding-right: 62px; }

.ghost {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 5px 9px;
  font-size: 12px;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.ghost:hover { color: var(--primary-2); background: var(--primary-soft); }

.error {
  margin: 0 0 16px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid #f3d3d0;
  border-radius: 9px;
}

.submit {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}

.submit:hover { filter: brightness(1.06); }
.submit:active { transform: translateY(1px); }
.submit:disabled { filter: grayscale(.25) brightness(.95); cursor: progress; }

.tip {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .brand-panel { display: none; }
  .form-panel { padding: 32px 20px; align-items: flex-start; }
  .login-card { margin-top: 8vh; padding: 28px 24px 24px; }
}

@media (max-width: 420px) {
  .login-card { margin-top: 4vh; }
}

@media (prefers-reduced-motion: reduce) {
  .login-card { animation: none; }
  .submit, .field input { transition: none; }
}