/* =============================================================
   登录页（Apple 平面版 v4）— 预览：login-apple.html
   -------------------------------------------------------------
   这一版按老板的反馈重做：
     · 红按钮不好看 → 改成 Apple 的**墨黑按钮**（深色主题反过来：白按钮黑字）
     · 排版不合理 → 去掉「浮起来的卡片」，改成**平铺在白底上的一列**，
       字段恢复**标签在上**（Apple ID / Password 就是这么做的），靠字号和留白分区
     · 「苹果不是这样」→ 不再用阴影/边框把内容框起来；1px #d2d2d7 描边 + 纯白填充
     · 「用科技塑造生命之美」字太小 → 桌面 16.5px、字距 .16em、颜色 #6e6e73；
       手机 14.5px
   间距（4 的倍数，手机单独一档）：
     logo 56px → 主张 14px → 表单列 40px
     标签 13px → 输入框 8px；输入框高 50px
     两个字段之间 22px；密码框 → 按钮 30px；按钮高 52px
   加载顺序： app.css → ds-apple.css → 本文件
   ============================================================= */

.login-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  font-family: var(--ap-font);
  color: var(--ap-ink);
  background: var(--ap-canvas);
  -webkit-font-smoothing: antialiased;
}

.login-shell {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* ---------- 品牌区：logo + 企业主张 ---------- */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.brand-logo { display: flex; justify-content: center; }
.brand-logo img { height: 56px; width: auto; display: block; }
.brand-logo .logo-for-dark { display: none; }

/* 主张：桌面端放大到 16.5px（老板：字太小），宽字距 + 中灰，像品牌签名 */
.brand-tagline {
  margin: 0;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--ap-muted);
  text-align: center;
}

/* ---------- 表单列（不再是卡片） ---------- */
.login-card { width: 100%; }
.login-card-inner { padding: 0; background: none; border: 0; box-shadow: none; }

.login-card .ap-field { margin: 0 0 22px; }
.login-card .ap-field:last-of-type { margin-bottom: 30px; }
.login-card .ap-btn--primary { width: 100%; }

.field-pwd { position: relative; }
.field-pwd .ap-input { padding-right: 50px; }
.pwd-toggle {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 38px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ap-placeholder);
  cursor: pointer;
  transition: color .18s ease;
}
.pwd-toggle:hover { color: var(--ap-ink); }
.pwd-toggle:focus-visible { outline: 2px solid var(--ap-focus-ring); outline-offset: -4px; }

/* ---------- 手机 ---------- */
@media (max-width: 900px) {
  /* 手机端：整体居中、略微靠下（上留白 > 下留白，内容中心会落到视口中线偏下） */
  .login-wrap { padding: 96px 20px 32px; align-items: center; }
  .login-shell { max-width: 430px; gap: 34px; }
  .brand-logo img { height: 50px; }
  .brand-tagline { font-size: 14.5px; letter-spacing: .14em; text-indent: .14em; }
  .login-card .ap-input,
  .login-card .ap-btn { height: 52px; min-height: 52px; }
  .pwd-toggle { height: 52px; }
}

@media (max-width: 900px) and (max-height: 700px) {
  .login-wrap { padding: 44px 20px 24px; }
}

/* ---------- 深色 ---------- */
[data-theme="dark"] .brand-logo .logo-for-light { display: none; }
[data-theme="dark"] .brand-logo .logo-for-dark { display: block; }

/* ---------- 仅预览页角标 ---------- */
.preview-chip {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 5;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  background: rgba(29, 29, 31, .55);
}

/* 手机端角标挪到右下（必须写在基础规则之后，否则 top 会把它拉成竖条） */
@media (max-width: 900px) {
  .preview-chip { top: auto; bottom: 14px; right: 14px; }
}