/* =============================================================
   成象天工 · 登录页基元（Apple 平面版 v4，2026-10-22）
   -------------------------------------------------------------
   老板反馈（v3）：红按钮不好看、排版不合理、「苹果不是这样」。
   所以 v4 按 apple.com / appleid 的**真实做法**重写：
     · 不要「浮起来的卡片」：Apple 的登录/表单是**平铺在白底上的一列**，
       靠字号层级与留白分区，不靠阴影和边框把内容框起来
     · **字段一定有标签**（Apple ID / Password 都在输入框上方，13px 灰字），
       不靠占位符暗示 —— 这是 v3「看着散」的主因
     · 输入框 50px、12px 圆角、1px #d2d2d7 描边、纯白填充
     · 唯一动作色不是彩色而是**墨黑**（apple.com 的 Buy / Sign In 按钮）：
       品牌红只留在 logo 里，避免「红色大按钮」抢戏
     · 深色主题反过来：黑底、白按钮黑字
   前缀 --ap- / .ap-*，不覆盖 app.css。
   ============================================================= */

:root {
  /* 品牌（只用于 logo 相关的强调，不再给按钮上色） */
  --ap-brand: #bf1d2d;

  /* 墨色 */
  --ap-ink: #1d1d1f;
  --ap-ink-2: #424245;
  --ap-muted: #6e6e73;
  --ap-placeholder: #86868b;

  /* 面 */
  --ap-canvas: #ffffff;
  --ap-surface: #ffffff;
  --ap-hairline: #d2d2d7;
  --ap-hairline-soft: #e8e8ed;

  /* 动作（Apple 的黑按钮） */
  --ap-btn-bg: #1d1d1f;
  --ap-btn-bg-hover: #000000;
  --ap-btn-bg-active: #333336;
  --ap-btn-text: #ffffff;

  /* 聚焦（中性，不用彩色环） */
  --ap-focus-border: #1d1d1f;
  --ap-focus-ring: rgba(29, 29, 31, .10);

  /* 形状 */
  --ap-r-field: 12px;
  --ap-r-btn: 12px;

  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
}

[data-theme="dark"] {
  --ap-brand: #e0424f;

  --ap-ink: #f5f5f7;
  --ap-ink-2: #d2d2d7;
  --ap-muted: #a1a1a6;
  --ap-placeholder: #86868b;

  --ap-canvas: #000000;
  --ap-surface: #1d1d1f;
  --ap-hairline: #3a3a3c;
  --ap-hairline-soft: #2a2a2c;

  /* 深色下按钮反过来：白底黑字 */
  --ap-btn-bg: #f5f5f7;
  --ap-btn-bg-hover: #ffffff;
  --ap-btn-bg-active: #d2d2d7;
  --ap-btn-text: #1d1d1f;

  --ap-focus-border: #f5f5f7;
  --ap-focus-ring: rgba(245, 245, 247, .16);
}

/* ---------- 表单 ---------- */
.ap-field { display: flex; flex-direction: column; gap: 8px; }

.ap-label {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ap-muted);
}

input.ap-input,
.ap-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  font: inherit;
  font-size: 17px;
  color: var(--ap-ink);
  background: var(--ap-surface);
  border: 1px solid var(--ap-hairline);
  border-radius: var(--ap-r-field);
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
input.ap-input::placeholder,
.ap-input::placeholder { color: var(--ap-placeholder); }
input.ap-input:hover,
.ap-input:hover { border-color: #b8b8be; }
[data-theme="dark"] input.ap-input:hover,
[data-theme="dark"] .ap-input:hover { border-color: #545458; }
input.ap-input:focus,
input.ap-input:focus-visible,
.ap-input:focus,
.ap-input:focus-visible {
  outline: none;
  border-color: var(--ap-focus-border);
  box-shadow: 0 0 0 4px var(--ap-focus-ring);
}

/* ---------- 按钮：Apple 的黑（深色主题下白） ---------- */
.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--ap-ink);
  background: var(--ap-surface);
  border: 1px solid var(--ap-hairline);
  border-radius: var(--ap-r-btn);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.ap-btn:active { transform: translateY(1px); }
.ap-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ap-focus-ring); }

.ap-btn--primary {
  color: var(--ap-btn-text);
  background: var(--ap-btn-bg);
  border-color: var(--ap-btn-bg);
}
.ap-btn--primary:hover { background: var(--ap-btn-bg-hover); border-color: var(--ap-btn-bg-hover); }
.ap-btn--primary:active { background: var(--ap-btn-bg-active); border-color: var(--ap-btn-bg-active); }
.ap-btn--primary[disabled],
.ap-btn--primary[disabled]:hover {
  color: var(--ap-muted);
  background: var(--ap-hairline-soft);
  border-color: var(--ap-hairline-soft);
  cursor: not-allowed;
  transform: none;
}
.ap-btn--block { width: 100%; }

/* ---------- 只给屏幕阅读器的文字 ---------- */
.ap-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}