/* =========================================================
   登录页样式 · Apple 风格（纯白背景 / 全胶囊 / iOS 触控手感）
   ========================================================= */

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

html{-webkit-text-size-adjust:100%;}

body{
  background:#ffffff; /* 背景全白 */
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','PingFang SC','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  line-height:1.5;
  color:#1c1c1e;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; /* 去掉 iOS 点击灰闪 */
  user-select:none;
}

/* iOS 弹性缓动（苹果手感核心） */
:root{
  --apple-blue:#007AFF;
  --apple-blue-press:#0062CC;
  --apple-gray:#f2f2f7;
  --apple-text:#1c1c1e;
  --apple-text3:#8e8e93;
  --apple-border:#e5e5ea;
  --ease-spring:cubic-bezier(.22,1,.36,1);      /* 回弹式 */
  --ease-press:cubic-bezier(.34,1.56,.64,1);    /* 按压回弹 */
}

input,button{
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; /* 消除移动端点击延迟 */
}

/* ========== 顶部 Toast（胶囊） ========== */
.toast{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%) translateY(-10px);
  background:#1c1c1e;
  color:#fff;
  padding:10px 20px;
  border-radius:999px; /* 胶囊 */
  font-size:.9rem;
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease-spring), transform .25s var(--ease-spring);
  z-index:9999;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.35);
  white-space:nowrap;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ========== 卡片容器 ========== */
.card-stack{
  position:relative;
  width:100%;
  max-width:400px;
}

.card{
  background:#fff;
  width:100%;
  border-radius:32px; /* 大圆角卡片 */
  border:1px solid var(--apple-border);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.12);
  transition:box-shadow .35s var(--ease-spring), transform .35s var(--ease-spring);
}

#loginCard{padding:2rem 1.9rem 1.9rem;}

/* ========== 顶部头像（圆形 + 苹果式柔影） ========== */
.login-avatar{
  width:84px;
  height:84px;
  margin:0 auto 1.1rem;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.18),0 0 0 1px var(--apple-border);
  transition:transform .25s var(--ease-spring);
}
.login-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.login-avatar:active{transform:scale(.94);} /* 轻按回弹 */

h2{
  text-align:center;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--apple-text);
}
#loginCard h2{font-size:1.9rem;margin-bottom:1.4rem;}

/* ========== 失效提示（胶囊） ========== */
.alert-info{
  background:var(--apple-gray);
  color:var(--apple-text3);
  border-radius:999px; /* 胶囊 */
  padding:.6rem 1.1rem;
  font-size:.85rem;
  font-weight:500;
  text-align:center;
  margin-bottom:1.2rem;
}

/* ========== 输入框（胶囊 + iOS 灰底 + 聚焦光环） ========== */
.input-group{position:relative;margin-bottom:1rem;}

.input-group i{
  position:absolute;
  left:1.35rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.05rem;
  color:var(--apple-text3);
  transition:color .2s var(--ease-spring);
  pointer-events:none;
}

.input-group input{
  width:100%;
  background:var(--apple-gray);
  border:1.5px solid transparent;
  outline:none;
  caret-color:var(--apple-blue);
  color:var(--apple-text);
  font-weight:500;
  padding:.95rem 1.2rem .95rem 3.1rem;
  font-size:1rem;
  border-radius:999px; /* 胶囊 */
  transition:border-color .25s var(--ease-spring),
             box-shadow .25s var(--ease-spring),
             background .25s var(--ease-spring),
             transform .15s var(--ease-press);
}
.input-group input::placeholder{color:#aeaeb2;font-weight:400;}

.input-group:focus-within i{color:var(--apple-blue);}
.input-group input:focus{
  background:#fff;
  border-color:var(--apple-blue);
  box-shadow:0 0 0 4px rgba(0,122,255,.12); /* iOS 聚焦光环 */
}

/* 点按输入框时的轻微回弹（苹果手感） */
.input-group input:active{transform:scale(.99);}

/* ========== 登录按钮（胶囊 + 苹果按压手感） ========== */
.login-btn{
  width:100%;
  border:none;
  border-radius:999px; /* 胶囊 */
  cursor:pointer;
  background:var(--apple-blue);
  color:#fff;
  font-weight:600;
  padding:.95rem;
  font-size:1.05rem;
  letter-spacing:.3px;
  margin-top:.4rem;
  box-shadow:0 10px 24px -10px rgba(0,122,255,.55);
  transition:background .2s var(--ease-spring),
             box-shadow .25s var(--ease-spring),
             transform .18s var(--ease-press);
  user-select:none;
}
.login-btn:hover{
  background:#0b84ff;
  box-shadow:0 14px 30px -12px rgba(0,122,255,.6);
}
/* iOS 按压：缩小 + 变深 + 阴影收敛 */
.login-btn:active{
  background:var(--apple-blue-press);
  transform:scale(.96);
  box-shadow:0 4px 12px -6px rgba(0,122,255,.5);
}

/* ========== 版权信息 ========== */
.copyright{
  text-align:center;
  font-size:.8rem;
  color:#c7c7cc;
  margin-top:2rem;
  padding-top:1.2rem;
  border-top:1px solid #f2f2f7;
  letter-spacing:.2px;
}

/* ========== 移动端适配 ========== */
@media (max-width:480px){
  body{padding:.9rem;}
  #loginCard{padding:1.8rem 1.5rem 1.6rem;}
  .login-avatar{width:72px;height:72px;margin-bottom:.9rem;}
  #loginCard h2{font-size:1.7rem;margin-bottom:1.2rem;}
  .input-group{margin-bottom:.9rem;}
  .input-group input{padding:.85rem 1.1rem .85rem 2.9rem;font-size:.95rem;}
  .input-group i{left:1.25rem;font-size:1rem;}
  .login-btn{padding:.88rem;font-size:1rem;}
}