/* 登录 / 注册弹窗 — 对齐 Figma；须 column 避免两卡片参与 flex 时横向排布 */
.auth-modal-shell {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(16px, 0.16rem);
  box-sizing: border-box;
}

.auth-modal-shell.is-open {
  display: flex;
}

.auth-modal-screen {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: #000000;
  cursor: pointer;
  /* 不参与 flex，避免占位 */
  z-index: 0;
}

.auth-modal-card {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(100%, 500px);
  max-width: 500px;
  max-height: min(90vh, calc(100vh - 32px));
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.auth-modal-card--login {
  height: auto;
}

.auth-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 63px;
  padding: 16px 24px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e5e7eb;
  box-sizing: border-box;
}

.auth-modal-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-roboto, "Roboto", sans-serif);
  font-weight: 700;
  font-size: max(17px, 0.20rem);
  line-height: 30px;
  color: #000000;
}

.auth-modal-x {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.auth-modal-x__inner {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
}

.auth-modal-x__inner::before,
.auth-modal-x__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #6b7280;
  transform-origin: center;
}

.auth-modal-x__inner::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.auth-modal-x__inner::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.auth-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  box-sizing: border-box;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-label {
  margin: 0;
  padding: 0;
  font-family: var(--font-roboto, "Roboto", sans-serif);
  font-weight: 500;
  font-size: max(12px, 0.14rem);
  line-height: 21px;
  color: #364153;
}

.auth-label--req::after {
  content: " *";
  color: #fb2c36;
}

.auth-input {
  display: block;
  width: 100%;
  height: 47px;
  padding: 12px 16px;
  border: 1px solid #d1d5dc;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: var(--font-roboto, "Roboto", sans-serif);
  font-size: max(12px, 0.14rem);
  font-weight: 400;
  line-height: 1.35;
  color: #000000;
  background: #ffffff;
}

.auth-input::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

.auth-input:focus {
  outline: none;
  border-color: #364153;
}

.auth-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 0;
  padding: 12px;
  border: none;
  border-radius: 9999px;
  box-sizing: border-box;
  background: #000000;
  color: #ffffff;
  font-family: var(--font-roboto, "Roboto", sans-serif);
  font-weight: 500;
  font-size: max(14px, 0.16rem);
  line-height: 24px;
  cursor: pointer;
}

.auth-btn-primary:hover {
  opacity: 0.92;
}

.auth-btn-primary:active {
  opacity: 0.85;
}

.auth-switch {
  display: block;
  width: 100%;
  padding: 3px 0 0;
  margin: 0;
  border: none;
  background: none;
  text-align: center;
  font-family: var(--font-roboto, "Roboto", sans-serif);
  font-weight: 500;
  font-size: max(12px, 0.14rem);
  line-height: 21px;
  color: #4a5565;
  cursor: pointer;
  text-decoration: none;
}

.auth-switch:hover {
  text-decoration: underline;
}

/* 顶栏全局 button 清零会洗掉样式，此处提高特异度 */
.auth-modal-shell button.auth-btn-primary {
  flex-shrink: 0;
  padding: 12px;
  min-height: 48px;
  background: #000000;
  color: #ffffff;
}

.auth-modal-shell button.auth-switch {
  color: #4a5565;
  background: transparent;
  padding: 3px 0 0;
}

/* 验证码：输入框与图片/按钮始终同一行 */
.auth-captcha-grid {
  width: 100%;
  font-size: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

.auth-captcha-grid .input-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.auth-modal-msg {
  margin: 0;
  font-size: max(11px, 0.13rem);
  line-height: 1.45;
  color: #fb2c36;
}

.auth-modal-msg[hidden] {
  display: none !important;
}

/* 输入框占据剩余宽度，可被压缩以保持同行 */
.auth-captcha-grid .form-control {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 47px;
  min-height: 47px;
  max-height: 47px;
  padding: 12px 16px;
  border: 1px solid #d1d5dc;
  border-radius: 10px;
  font-family: var(--font-roboto, "Roboto", sans-serif);
  font-size: max(12px, 0.14rem);
  box-sizing: border-box;
  margin-right: 20px;
}

.auth-captcha-grid .input-group-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.auth-captcha-grid .input-group-btn img {
  display: block;
  width: auto;
  height: 32px;
  max-height: 32px;
}

.auth-captcha-grid .btn,
.auth-captcha-grid .btn-primary,
.auth-captcha-grid .btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  max-height: 47px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: var(--font-roboto, "Roboto", sans-serif);
  font-size: max(11px, 0.13rem);
  white-space: nowrap;
  background: #111827;
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}

.auth-captcha-grid img[src*="captcha"] {
  border-radius: 8px;
  vertical-align: middle;
}