.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr minmax(420px, 520px); }

/* 左侧：一堆链接收进一个 */
.auth-side { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 36px 48px 48px; overflow: hidden; }
.side-stack { position: relative; height: 360px; max-width: 520px; }
.pill {
  position: absolute; padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 17px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  animation: gather 1.2s cubic-bezier(.3,1.2,.4,1) both;
}
.p1 { left: 4%;  top: 6%;  transform: rotate(-8deg); animation-delay: .1s; }
.p2 { left: 48%; top: 0;   transform: rotate(6deg);  animation-delay: .18s; background: var(--primary-soft); color: var(--primary-press); border-color: transparent; }
.p3 { left: 60%; top: 34%; transform: rotate(-4deg); animation-delay: .26s; }
.p4 { left: 0;   top: 42%; transform: rotate(5deg);  animation-delay: .34s; background: var(--mint-soft); color: #00805f; border-color: transparent; }
.p5 { left: 30%; top: 24%; transform: rotate(-2deg); animation-delay: .42s; background: var(--grape-soft); color: var(--grape); border-color: transparent; }
.p-one {
  left: 14%; top: 68%; padding: 20px 28px; font: 500 20px/1 var(--display); letter-spacing: -.02em;
  background: var(--primary); color: var(--on-primary); border: 0; box-shadow: 0 30px 60px -20px rgb(var(--glow-rgb) / .6);
  animation: one-in .8s 1s cubic-bezier(.2,1.5,.4,1) both;
}
.p-one b { font-weight: 700; }
@keyframes gather { from { opacity: 0; translate: 0 40px; } }
@keyframes one-in { from { opacity: 0; scale: .6; } }
.side-text { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.25; font-weight: 900; letter-spacing: -.02em; }

/* 右侧表单 */
.auth-main { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 32px; background: var(--glass); border-left: 1px solid var(--line); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
.auth-main .beian { justify-content: center; }
.logo-mobile { display: none; }
.card { width: 100%; max-width: 400px; margin: 0 auto; }
.form { display: grid; gap: 18px; }
.form h1 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.25; }
.lead { margin: -10px 0 6px; color: var(--muted); font-size: 15px; }

.code-row { display: flex; gap: 10px; }
.code-row .input { flex: 1; min-width: 0; letter-spacing: .25em; font-family: var(--display); }
.code-row .input::placeholder { letter-spacing: 0; font-family: var(--sans); }
.send-code { height: 50px; border-radius: 14px; min-width: 116px; font-size: 14px; }

.prefix-input { display: flex; align-items: center; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); transition: border-color .2s, box-shadow .2s; }
.prefix-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgb(var(--glow-rgb) / .14); }
.prefix { padding-left: 16px; font: 500 13px/1 var(--display); color: var(--muted); white-space: nowrap; }
.prefix-input .input { border: 0; background: none; box-shadow: none; padding-left: 2px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--accent); }

.pw-row { position: relative; }
.pw-row .input { padding-right: 52px; }
.pw-eye { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye[aria-pressed="true"] { color: var(--accent); }

.form-error { margin: -4px 0; min-height: 1.4em; font-size: 14px; color: var(--danger); font-weight: 650; }
.btn-block { width: 100%; height: 54px; font-size: 16px; }
.switch { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.switch a { color: var(--accent); font-weight: 700; text-decoration: none; }
.switch a:hover { text-decoration: underline; text-underline-offset: 3px; }
.switch .sep { display: inline-block; width: 1px; height: 12px; margin: 0 14px; background: var(--line-strong); vertical-align: middle; }
.dev-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13px; background: var(--grape-soft); color: var(--grape); border: 1px dashed rgb(var(--grape-rgb) / .4); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-main { border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; justify-content: flex-start; padding: 24px 20px 32px; }
  .logo-mobile { display: inline-flex; margin-bottom: 20px; }
}