/* ==========================================================================
   登录页：登录 / 注册 双模式切换
   --------------------------------------------------------------------------
   为什么用 data-mode 属性切换，而不是把两组字段各包一层 div：
   style.css 里的登录样式大量使用 `.login-card > label`、`.login-card > div`
   这类**直接子元素**选择器。一旦在外面套容器，那些规则会全部失效，
   输入框、间距、图标位置会一起崩。用属性选择器可以让 DOM 结构保持扁平。

   用 display:none 显式隐藏而不是靠 hidden 属性：部分规则会给这些元素设
   display:flex，hidden 会被覆盖掉，字段就会漏出来。
   ========================================================================== */

.login-card[data-mode="login"] [data-mode="register"] { display: none; }
.login-card[data-mode="register"] [data-mode="login"] { display: none; }

/* 登录和注册必须一样大。
   整个圆角大卡片（左插画 + 右表单）的高度是由右栏内容撑开的，注册比登录少一行，
   于是卡片会矮一截、垂直居中的起点跟着上移，点「注册账号」时整块会跳一下。
   做法：给右栏一个固定的最小高度，两种模式都撑到同一个尺寸，内容顶部对齐，
   差出来的空间留在底部。 */
.login-card {
  box-sizing: border-box;
  min-height: 664px;
}

/* 注册字段多，把内部纵向间距收一点（不改卡片自身的内边距，否则标题位置会跑） */
.login-card[data-mode="register"] .login-card-head h2 { margin-bottom: 20px; }
.login-card[data-mode="register"] > label:not(.login-agreement) { margin-top: 11px; }
.login-card[data-mode="register"] .login-error { margin-top: 8px; }
.login-card[data-mode="register"] .login-submit { margin-top: 14px; }

/* 窄屏下 .login-shell 变成上下堆叠（插画在上、卡片在下），卡片是独立一块，
   再锁 640px 只会在底部撑出一片空白。这里放掉高度约束，交给内容自适应。 */
@media (max-width: 900px) {
  .login-card { min-height: 0; }
}

/* 底部「还没有账号？注册」 */
.login-switch {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  font-size: 12px;
  color: #78859a;
}
.login-switch > span { display: flex; align-items: center; gap: 4px; }
.login-switch button {
  padding: 0;
  border: 0;
  background: none;
  color: #397fe9;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.login-switch button:hover { color: #155fcf; text-decoration: underline; }

/* 手机号输入框在 iOS 上默认会给数字加内阴影，顺手抹掉 */
#registerPhone { -webkit-appearance: none; }