/* ============================================================================
 * Petphrase 宠话 · app.css —— iOS 设计系统层（唯一负责"看起来像 iPhone 原生 App"的文件）
 *
 * 设计原则：结构和控件全部照 iOS 系统规范做，只有 tint（强调色）用品牌砖橘
 * #C0663F。这样既有 iPhone 的观感，又不丢品牌。
 *
 * 这个文件做三件事：
 *   1. 定义 --ios-* 设计令牌（亮/暗两套）—— 暗色只覆盖令牌，不另写选择器；
 *   2. 重写"外壳"：顶栏（毛玻璃 + 发丝线）、屏容器、翻页动画、底部操作区；
 *   3. 覆盖各模块（styles/profile/archive/reveal/record.css）里还在用暖棕渐变、
 *      粗边框、方框卡片的地方，把它们改写成 iOS 分组列表观感。
 *
 * ⚠ 加载顺序的现实：index.html 里本文件排在 styles/reveal/record/archive/camera/
 *   profile.css **之前**（不是我原来以为的最后）。所以本文件里凡是要压过那些文件
 *   的规则，都刻意用了比它们更高的选择器权重（多带一层 html / body / .screen-inner），
 *   不靠 !important；将来即使把本文件挪到最后，规则也照样成立，不会翻车。
 *
 * ⚠ 绝对不许动的结构（别的模块依赖）：
 *   · .screen / .screens / .screen.is-active / .screen-inner / .screen-actions 的显隐语义
 *   · .anim-in-right / .anim-in-left 的 keyframes 与 animation-fill-mode: none
 *   · .petphrase-wave 高度 64px（record.js 读它算 canvas 像素）
 *   · --petphrase-icon-size: 24px（record.js 落地图标尺寸）
 *   · .pp-camera 的 aspect-ratio / pointer-events（在 camera.css，本文件不碰）
 *   · .is-hidden / .hidden 的 display:none !important（本文件只保证一同性，不削弱）
 *   · #navBack / #navDots 的 hidden 属性语义（screens.js 靠它）
 * ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────────
 * 一、设计令牌
 * 用 html:root，而不是 :root —— styles.css / profile.css / record.css 都往 :root
 * 里写了同一批变量名（--grad-start / --brand / --ink / --chip…），权重必须压过它们。
 * 注意：这里没有定义 :root{} 之外的任何暗色选择器，暗色全靠第二段令牌覆盖。
 * ──────────────────────────────────────────────────────────────────────────── */

html:root {
  /* —— 系统字体栈：一处定，全站继承（替代"简单网页"的 PingFang/微软雅黑混搭） —— */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;

  /* —— 品牌 tint：取自 logo 的砖橘爪印 —— */
  --ios-tint: #C0663F;

  /* —— 结构性颜色（亮色） —— */
  --ios-bg: #F2F2F7;
  --ios-card: #FFFFFF;
  --ios-fill: rgba(120, 120, 128, .12);
  --ios-sep: rgba(60, 60, 67, .29);
  --ios-label: #000000;
  --ios-label2: rgba(60, 60, 67, .6);
  --ios-label3: rgba(60, 60, 67, .3);
  --ios-red: #FF3B30;
  --ios-green: #34C759;
  --ios-orange: #FF9500;

  /* —— 导航栏毛玻璃底色 / iOS 分段控件滑块 —— */
  --ios-nav: rgba(249, 249, 249, .94);
  --ios-seg: #FFFFFF;

  /* —— 轮廓类装饰（替代原来的粗边框） —— */
  --ios-hair: .5px;
  --ios-card-shadow: 0 1px 2px rgba(0, 0, 0, .04);

  /* —— 文字/强调色的别名额 —— */
  --ios-accent-text: var(--ios-tint);
  --ios-accent-soft: rgba(192, 102, 63, .12);
  --ios-red-soft: rgba(255, 59, 48, .12);
  --ios-green-soft: rgba(52, 199, 89, .14);
  --ios-orange-soft: rgba(255, 149, 0, .14);
  --ios-orange-line: rgba(255, 149, 0, .32);

  /* ══════════════════════════════════════════════════════════════════════════
   * 把 legacy 变量名指回 iOS 令牌。
   * styles.css / profile.css / archive.css / reveal.css / record.css 全都靠这些
   * 名字取色；改这一处，全站立刻统一成 iOS 观感，且不会出现"第二套色值"。
   * ══════════════════════════════════════════════════════════════════════════ */

  /* styles.css 的原始变量 */
  --cream: var(--ios-bg);
  --ink: var(--ios-label);
  --warm-brown: var(--ios-accent-text);
  --warm-gray: var(--ios-label2);
  --line: var(--ios-sep);
  --bad: var(--ios-red);
  --good: var(--ios-green);
  --surface: var(--ios-card);
  --fg: var(--ios-label);
  --muted: var(--ios-label2);
  --chip: var(--ios-fill);

  /* 关键：原来的 --grad-start/--grad-end 是"暖棕渐变"的源头。两个都指到 tint 之后，
     styles.css / reveal.css / record.css 里所有 linear-gradient(...) 自动塌缩成纯色，
     就像"结构用系统规范、tint 用品牌色"的 iOS 做法。 */
  --grad-start: var(--ios-tint);
  --grad-end: var(--ios-tint);
  --brand: var(--ios-tint);
  --brand-deep: var(--ios-tint);

  /* archive.css 自己的一套（原本写死在 .pa-* 上） */
  --pa-ink: var(--ios-label);
  --pa-muted: var(--ios-label2);
  --pa-line: var(--ios-sep);
  --pa-bg: var(--ios-bg);
  --pa-chip: var(--ios-fill);
  --pa-brand: var(--ios-tint);
  --pa-brand-soft: var(--ios-accent-soft);
  --pa-danger: var(--ios-red);

  /* record.css 的录音强调色/落地底色 */
  --petphrase-recording: var(--ios-tint);
  --petphrase-recording-soft: var(--ios-accent-soft);
  /* --petphrase-icon-size 保持 24px 不动：record.js 的落地尺寸跟它绑定 */
}

/* ── 暗色：只覆盖令牌，一个选择器都不另写（漏一处就花脸，这条是纪律） ── */
@media (prefers-color-scheme: dark) {
  html:root {
    --ios-bg: #000000;
    --ios-card: #1C1C1E;
    --ios-fill: rgba(120, 120, 128, .24);
    --ios-sep: rgba(84, 84, 88, .65);
    --ios-label: #FFFFFF;
    --ios-label2: rgba(235, 235, 245, .6);
    --ios-label3: rgba(235, 235, 245, .3);
    --ios-nav: rgba(28, 28, 30, .94);
    --ios-seg: #48484A;
    --ios-card-shadow: 0 1px 2px rgba(0, 0, 0, .3);

    --ios-accent-text: #D98A63;
    --ios-accent-soft: rgba(217, 138, 99, .22);
    --ios-red-soft: rgba(255, 69, 58, .22);
    --ios-green-soft: rgba(48, 209, 88, .2);
    --ios-orange-soft: rgba(255, 159, 10, .2);
    --ios-orange-line: rgba(255, 159, 10, .38);
  }
}

/* 页面底色 / 文字也跟着令牌走；用 html body 压过 styles.css 的 html, body */
html body {
  background: var(--ios-bg);
  color: var(--ios-label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 二、整屏骨架：一屏一个步骤，只有当前屏滚动（结构与显隐语义保持原样）
 * ──────────────────────────────────────────────────────────────────────────── */

.app-shell {
  /* 100vh 兜底；dvh 跟着手机地址栏收起/展开实时变 */
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ios-bg);
  color: var(--ios-label);
}

/* 桌面端把外壳收成居中的"手机"：不要粗边框和投影，只留一点中性灰背景区分 */
@media (min-width: 600px) {
  html body {
    background: color-mix(in srgb, var(--ios-bg) 88%, var(--ios-label));
  }
  /* 万一浏览器不认 color-mix，用下面这条兜底（顺序在后会覆盖，不认时自动忽略） */
  @supports not (background: color-mix(in srgb, red, blue)) {
    html body { background: var(--ios-bg); }
  }
  .app-shell {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-left: var(--ios-hair) solid var(--ios-sep);
    border-right: var(--ios-hair) solid var(--ios-sep);
  }
}

/* ── 顶栏：44px + 安全区，毛玻璃，底部一条发丝线，标题居中 17/600 ── */
.appbar {
  flex: none;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  margin: 0;
  padding: env(safe-area-inset-top, 0px) max(env(safe-area-inset-right, 0px), 8px) 0
    max(env(safe-area-inset-left, 0px), 8px);
  background: var(--ios-nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--ios-label);
  box-shadow: none;
  border: 0;
}
/* 1 物理像素级发丝线：.5px 边框在 2x/3x 屏上不糊，比 1px 实线精致得多 */
.appbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-top: var(--ios-hair) solid var(--ios-sep);
  pointer-events: none;
}

/* 标题块：绝对居中（不受左右按钮显隐影响），过长自己省略 */
.appbar .appbar-text {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  min-width: 0;
  max-width: calc(100% - 152px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  text-align: center;
}
.appbar .appbar-title {
  max-width: 100%;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ios-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 副标题降级成 13px 次要文字，原来 11px 太小、也不像 iOS */
.appbar .appbar-sub {
  max-width: 100%;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ios-label2);
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 返回键：chevron（CSS 边框画，不用 emoji/字体图标）+ "返回"，tint 色，点按区 44px */
.appbar .appbar-back {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  min-width: 44px;
  margin: 0 6px 0 0;
  padding: 0 6px 0 2px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--ios-accent-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  opacity: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.appbar-back::before {
  content: "";
  width: 9px;
  height: 9px;
  margin: 0 1px 0 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}
.appbar-back:active {
  background: var(--ios-fill);
  opacity: 1;
}
.appbar-back:focus-visible {
  outline: 2px solid var(--ios-tint);
  outline-offset: 1px;
}

/* 右侧"档案"：不再是白描边胶囊，改成 iOS 导航栏右侧的 tint 色文字按钮 */
.appbar .appbar-action {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  margin: 0 0 0 auto;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--ios-accent-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.appbar-action:active {
  opacity: .55;
  background: transparent;
}
.appbar-action:focus-visible {
  outline: 2px solid var(--ios-tint);
  outline-offset: 1px;
}

/* 步骤圆点：纯进度指示，不抢点按 */
.appbar .appbar-dots {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  pointer-events: none;
}
.appbar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ios-label3);
  flex: none;
}
.appbar-dot.on {
  width: 7px;
  border-radius: 50%;
  background: var(--ios-accent-text);
}

/* 顶栏 logo（index.html 里会加 .appbar-logo，方形圆角小标） */
.appbar .appbar-logo {
  position: relative;
  z-index: 1;
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  border-radius: 7px;
  object-fit: cover;
}

/* ── 屏容器 ── */
.screens {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ios-bg);
}

.screen {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--ios-bg);
}
.screen.is-active {
  display: flex;
}

/* 屏内滚动容器：左右统一 16px，顶部 12px（iOS 分组列表的节奏） */
.screen .screen-inner {
  flex: 1 0 auto;
  min-width: 0;
  padding: 12px max(env(safe-area-inset-right, 0px), 16px) 4px
    max(env(safe-area-inset-left, 0px), 16px);
}
.screen-inner > *:last-child {
  margin-bottom: 8px;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 三、底部操作区：不再用暖色渐隐，改成"底色 + 上方一条发丝线"
 * ──────────────────────────────────────────────────────────────────────────── */

.screen .screen-actions {
  flex: none;
  position: relative;
  z-index: 3;
  padding: 12px max(env(safe-area-inset-right, 0px), 16px)
    calc(12px + env(safe-area-inset-bottom, 0px)) max(env(safe-area-inset-left, 0px), 16px);
  background: var(--ios-bg);
}
.screen-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-top: var(--ios-hair) solid var(--ios-sep);
  pointer-events: none;
}
.screen-actions > button {
  min-height: 50px;
  font-size: 17px;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 四、翻页动画
 * 只动 animation，不动 transition：screens.js 会反复加/去同一个 class。
 * animation-fill-mode 必须是 none —— 播完不留 transform，切回来不会偏。
 * 这两组 keyframes 与 fill 模式是被别的模块依赖的，语义一个字都没改。
 * ──────────────────────────────────────────────────────────────────────────── */

@keyframes pp-screen-in-right {
  from {
    transform: translateX(28%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes pp-screen-in-left {
  from {
    transform: translateX(-28%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes pp-screen-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.screen.anim-in-right {
  animation: pp-screen-in-right 240ms cubic-bezier(.22, .9, .28, 1) 0s 1 normal none;
}
.screen.anim-in-left {
  animation: pp-screen-in-left 240ms cubic-bezier(.22, .9, .28, 1) 0s 1 normal none;
}

@media (prefers-reduced-motion: reduce) {
  .screen.anim-in-right,
  .screen.anim-in-left {
    animation: pp-screen-fade 120ms linear 0s 1 normal none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * 五、文字层级（覆盖 styles.css 的暖灰系）
 * ──────────────────────────────────────────────────────────────────────────── */

html body h1 { font-size: 22px; }
html body h2 {
  display: block;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-label);
}
.screen-inner h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-label);
}
html body .muted {
  color: var(--ios-label2);
  font-size: 15px;
  margin: 6px 0;
}
html body .tiny {
  color: var(--ios-label2);
  font-size: 13px;
}
html body .msg {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--ios-label);
}
.msg.bad { color: var(--ios-red); }
.msg.good { color: var(--ios-green); }

/* 区块标题：iOS 分组列表上的小标题（13px、次要色） */
html body .field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ios-label2);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 六、卡片：白底、12px 圆角、无边框、几乎无阴影；相邻卡片不叠双倍间距
 * ──────────────────────────────────────────────────────────────────────────── */

html body .card {
  background: var(--ios-card);
  border: 0;
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 16px;
  box-shadow: var(--ios-card-shadow);
}
/* 顶部第一张卡片不再往上顶出 16px 空白 */
.screen-inner > .card:first-child {
  margin-top: 0;
}
.screen-inner > .card + .card {
  margin-top: -8px;
}
html body .card > h2:first-child,
html body .card > h1:first-child {
  margin-top: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 七、chip：iOS pill 筛选器（单选/多选同一套；没有任何渐变）
 * ──────────────────────────────────────────────────────────────────────────── */

html body .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body .chip {
  background: var(--ios-fill);
  color: var(--ios-label);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .chip.on {
  background: var(--ios-tint);
  color: #FFFFFF;
  font-weight: 600;
}
/* 程序自动认出来的项：虚线描边（保留"这是程序猜的"这层语义，只换成 tint） */
html body .chip.auto {
  border: 1px dashed var(--ios-tint);
}
html body .chip.auto.on {
  border-color: transparent;
}
html body .chip:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 八、按钮：填色主按钮 / 填充灰次要按钮 / 危险按钮
 * ──────────────────────────────────────────────────────────────────────────── */

html body button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
html body .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;            /* 只在需要时才对得上 .screen-actions 的 min-height */
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--ios-tint);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}
html body .primary:active {
  background: color-mix(in srgb, var(--ios-tint) 84%, #000);
  opacity: .92;
}
html body .secondary {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ios-fill);
  color: var(--ios-accent-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
html body .secondary:active {
  opacity: .7;
}
html body .danger {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ios-fill);
  color: var(--ios-red);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
html body .danger:active {
  opacity: .7;
}
html body .wide {
  width: 100%;
}
html body button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
/* 文字链接按钮：iOS 里就是一行 tint 色文字，不加下划线 */
html body .linklike {
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--ios-accent-text);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
html body .linklike:active {
  opacity: .5;
}

/* 文件选择按钮：做成 .secondary 同款，里面藏原生 input；右侧一个小 chevron 示意"会弹出选择" */
html body .filebtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--ios-fill);
  color: var(--ios-accent-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .filebtn input {
  display: none;
}
html body .filebtn::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
  flex: none;
}

/* 行容器 */
html body .row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}

/* 计时 / 提示文字 */
html body .timer {
  color: var(--ios-label2);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 九、输入框与下拉
 * 字号必须是 17px（>16px）：小于 16px 时 iOS Safari 会在聚焦时自动放大整页。
 * 边框用发丝线，聚焦只做 tint 色内描边，不出现浏览器默认怪异描边。
 * ──────────────────────────────────────────────────────────────────────────── */

html body input[type="password"],
html body input[type="text"],
html body input[type="number"],
html body input[type="search"],
html body input[type="email"],
html body input[type="url"],
html body input[type="tel"],
html body input:not([type]),
html body textarea {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  border: var(--ios-hair) solid var(--ios-sep);
  border-radius: 10px;
  background: var(--ios-card);
  color: var(--ios-label);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
}
html body textarea {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
}
html body input[type="password"]:focus,
html body input[type="text"]:focus,
html body input[type="number"]:focus,
html body input[type="search"]:focus,
html body input:not([type]):focus,
html body textarea:focus {
  outline: none;
  border-color: var(--ios-tint);
  box-shadow: inset 0 0 0 1px var(--ios-tint);
}
html body input::placeholder,
html body textarea::placeholder {
  color: var(--ios-label3);
}
/* 行内的输入框自己吃掉剩余宽度（原来只在 .row 里生效，这里放宽到全页） */
html body .row input[type="text"],
html body .row input:not([type]),
html body .row input[type="search"] {
  flex: 1 1 140px;
}

/* select：去掉原生外观，自己画一个 tint/次要色 chevron */
html body select {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 34px 0 12px;
  border: var(--ios-hair) solid var(--ios-sep);
  border-radius: 10px;
  background-color: var(--ios-card);
  color: var(--ios-label);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ios-label2) 50%),
    linear-gradient(135deg, var(--ios-label2) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html body select:focus {
  outline: none;
  border-color: var(--ios-tint);
  box-shadow: inset 0 0 0 1px var(--ios-tint);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 十、iOS 开关（.checkline 里的 checkbox）与整行可点
 * ──────────────────────────────────────────────────────────────────────────── */

/* 整行：字号 15、次要色文字、上下留白撑到 44px 触控高度 */
html body .checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;            /* 别让通用的 input 高度规则把这一行压到 44px 裁掉开关 */
  min-height: 44px;
  margin: 0;
  font-size: 15px;
  color: var(--ios-label2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .checkline input {
  flex: none;
}
/* 轨道 51×31 */
html body .checkline > input[type="checkbox"] {
  position: relative;
  width: 51px;
  height: 31px;
  min-height: 0;
  flex: none;
  margin: 0 0 0 auto;      /* 开关排到行尾，和 iOS 设置页一致 */
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ios-fill);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}
/* 白色圆钮 27px */
html body .checkline > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform 200ms ease;
}
html body .checkline > input[type="checkbox"]:checked {
  background: var(--ios-tint);
}
html body .checkline > input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}
html body .checkline > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ios-tint);
  outline-offset: 2px;
}

/* 建档表单里的混血开关（.pf-toggle）用同一套开关外观 */
html body .pf-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
html body input[type="checkbox"].pf-toggle {
  position: relative;
  width: 51px;
  height: 31px;
  flex: none;
  margin: 0 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--ios-fill);
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--ios-tint);
  cursor: pointer;
  transition: background-color 200ms ease;
}
html body input[type="checkbox"].pf-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: transform 200ms ease;
}
html body input[type="checkbox"].pf-toggle:checked {
  background: var(--ios-tint);
}
html body input[type="checkbox"].pf-toggle:checked::after {
  transform: translateX(20px);
}
html body .pf-toggle-label {
  font-size: 15px;
  color: var(--ios-label);
}

/* 减弱动态效果：开关不做过渡（状态依然即时切换） */
@media (prefers-reduced-motion: reduce) {
  html body .checkline > input[type="checkbox"],
  html body .checkline > input[type="checkbox"]::after,
  html body input[type="checkbox"].pf-toggle,
  html body input[type="checkbox"].pf-toggle::after {
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
 * 十一、三张说法卡片（.option）与翻牌卡（.rv-*）
 * ──────────────────────────────────────────────────────────────────────────── */

html body .options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
html body .option {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--ios-card);
  box-shadow: var(--ios-card-shadow);
  text-align: left;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
html body .option:active {
  background: var(--ios-fill);
}
html body .option-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-label);
}
html body .option-source {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ios-label2);
}
html body .option-conf {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ios-label3);
}

/* 翻牌卡：正面用系统卡片，背面用平铺 tint（原先是暖棕渐变） */
html body .rv-waiting {
  min-height: 148px;
}
html body .rv-hint {
  color: var(--ios-label2);
  font-size: 15px;
}
html body .rv-face {
  border-radius: 12px;
  padding: 16px;
  min-height: 96px;
}
html body .rv-back {
  background: var(--ios-tint);
  color: #FFFFFF;
}
html body .rv-back-dots {
  color: rgba(255, 255, 255, .8);
}
html body .rv-front {
  background: var(--ios-card);
  border: var(--ios-hair) solid var(--ios-sep);
  gap: 8px;
}
html body .rv-card.picked .rv-front {
  border-color: var(--ios-tint);
  box-shadow: 0 0 0 1.5px var(--ios-tint);
}
html body .rv-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ios-label);
}
html body .rv-src,
html body .rv-conf {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ios-fill);
  color: var(--ios-label2);
  font-size: 12px;
}
html body .rv-edit {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ios-accent-text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
html body .rv-editor input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: var(--ios-hair) solid var(--ios-sep);
  border-radius: 10px;
  background: var(--ios-card);
  color: var(--ios-label);
  font-size: 17px;
}
html body .rv-use,
html body .rv-cancel {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
html body .rv-use {
  background: var(--ios-tint);
  color: #FFFFFF;
}
html body .rv-cancel {
  background: var(--ios-fill);
  color: var(--ios-label);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 十二、建档表单（.pf-*）：只换观感，尺寸/定位/显隐语义全部保留
 * ──────────────────────────────────────────────────────────────────────────── */

html body .pf-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ios-label2);
}
html body .pf-hint,
html body .pf-message,
html body .pf-primary,
html body .pf-suggest-title {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ios-label2);
}
html body .pf-message.is-good { color: var(--ios-green); }
html body .pf-message.is-bad  { color: var(--ios-red); }

/* 常驻提示：从"米色描边方块"改成 iOS 浅灰填充块 */
html body .pf-notice {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--ios-fill);
  color: var(--ios-label2);
}
html body .pf-notice.is-good {
  background: var(--ios-green-soft);
  border: 0;
  color: var(--ios-green);
}
html body .pf-notice.is-warn {
  background: var(--ios-orange-soft);
  border: 0;
  color: var(--ios-orange);
}

/* chip：与 .chip 完全同一套 pill 外观 */
html body .pf-chip {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ios-fill);
  color: var(--ios-label);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .pf-chip.is-on {
  border: 0;
  background: var(--ios-tint);
  color: #FFFFFF;
  font-weight: 600;
}
html body .pf-chip:disabled {
  opacity: .4;
}
html body .pf-chip:focus-visible,
html body .pf-btn:focus-visible,
html body .pf-link:focus-visible,
html body .pf-input:focus-visible,
html body .pf-select:focus-visible {
  outline: 2px solid var(--ios-tint);
  outline-offset: 2px;
}

/* 下拉与输入框：字号提到 17px（>16px 才不会触发 iOS 聚焦放大） */
html body .pf-select,
html body .pf-input {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  border: var(--ios-hair) solid var(--ios-sep);
  border-radius: 10px;
  background: var(--ios-card);
  color: var(--ios-label);
  font-family: inherit;
  font-size: 17px;
  -webkit-appearance: none;
  appearance: none;
}
html body .pf-select {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ios-label2) 50%),
    linear-gradient(135deg, var(--ios-label2) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* 混血区 / 自定义品种区：去掉米色底 + 虚线框，改成浅灰填充块 */
html body .pf-mix,
html body .pf-custom {
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--ios-fill);
}
html body .pf-primary.is-open {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--ios-accent-soft);
  color: var(--ios-label);
}

/* 次要链接：tint 色文字，去掉下划线 */
html body .pf-link {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ios-accent-text);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
html body .pf-suggest {
  background: transparent;
  border: 1px dashed var(--ios-tint);
  color: var(--ios-accent-text);
}
html body .pf-btn {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--ios-tint);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .pf-btn:disabled {
  opacity: .4;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 十三、档案与详情（.pa-* / .record）：iOS 分组列表
 * 白底卡片、行高 ≥48px、内缩 16px 的分隔线、右侧 chevron、左侧 40px 圆角头像块
 * ──────────────────────────────────────────────────────────────────────────── */

/* 列表外框：所有行拼成一张圆角卡片 */
html body .archive {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 12px 0 16px;
  padding: 0;
  border-radius: 12px;
  background: var(--ios-card);
  box-shadow: var(--ios-card-shadow);
  overflow: hidden;
}
html body .pa-archive {
  color: var(--ios-label);
  font-family: inherit;
}

/* 列表行 */
html body .pa-row {
  position: relative;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: var(--ios-card);
  -webkit-tap-highlight-color: transparent;
}
/* 内缩 16px、1 物理像素级的分隔线（最后一行不画） */
html body .pa-row + .pa-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0;
  border-top: var(--ios-hair) solid var(--ios-sep);
  pointer-events: none;
}
html body .pa-row:active {
  background: var(--ios-fill);
}
html body .pa-row-sample {
  border-style: solid;
  background: var(--ios-card);
}
html body .pa-scene {
  margin: 0 0 16px;
}
html body .pa-scene-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
}
html body .pa-scene-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--ios-label2);
}
html body .pa-scene-count {
  font-size: 13px;
  color: var(--ios-label3);
}
/* 场景分组里的行不再是"一层套一层"，去掉内层圆角，靠分隔线分节 */
html body .pa-scene .pa-row {
  margin: 0;
  padding: 10px 4px;
}
html body .pa-scene .pa-row:last-child {
  padding-bottom: 4px;
}

/* 头像块 40px，圆角 10px（原来 36px 圆形） */
html body .pa-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ios-fill);
  font-size: 22px;
  line-height: 40px;
  text-align: center;
}
html body .pa-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 26px;
  line-height: 48px;
}

/* 行主体 + 右侧 chevron（伪元素画，不用字体图标） */
html body .pa-row-main {
  position: relative;
  min-height: 44px;
  padding: 2px 16px 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body .pa-row-main::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 2px solid var(--ios-label3);
  border-right: 2px solid var(--ios-label3);
  transform: rotate(45deg);
  pointer-events: none;
}
html body .pa-row-text {
  font-size: 17px;
  line-height: 1.35;
  color: var(--ios-label);
}
html body .pa-row-meta {
  font-size: 13px;
  color: var(--ios-label2);
}
html body .pa-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ios-fill);
  color: var(--ios-label2);
  font-size: 12px;
  text-align: center;
}

/* 行内小按钮：去掉描边，改成 tint / 危险色文字 */
html body .pa-btn {
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ios-fill);
  color: var(--ios-accent-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .pa-btn-primary {
  border: 0;
  background: var(--ios-tint);
  color: #FFFFFF;
  font-weight: 600;
}
html body .pa-btn-danger {
  border: 0;
  background: var(--ios-red-soft);
  color: var(--ios-red);
}
html body .pa-btn-ghost {
  background: transparent;
  color: var(--ios-label2);
}

/* 顶部说明：从"虚线米色块"改成一行 13px 次要文字（像 iOS 的 footer 说明） */
html body .pa-note {
  margin: 0 0 12px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ios-label2);
  font-size: 13px;
  line-height: 1.45;
}
html body .pa-empty {
  margin: 0;
  padding: 28px 12px;
  color: var(--ios-label2);
  font-size: 15px;
  text-align: center;
}

/* 详情：整块白卡片 */
html body .pa-detail {
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--ios-card);
  box-shadow: var(--ios-card-shadow);
  color: var(--ios-label);
}
html body .pa-detail-readonly {
  border-style: solid;
  background: var(--ios-card);
}
html body .pa-detail-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-label);
}
html body .pa-detail-sub {
  margin-top: 2px;
  color: var(--ios-label2);
  font-size: 13px;
}
html body .pa-detail-text {
  margin: 8px 0 12px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ios-label);
}
html body .pa-sample-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ios-orange-soft);
  color: var(--ios-orange);
  font-size: 13px;
}
html body .pa-photo {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 12px;
}
html body .pa-wave-wrap {
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 10px;
  background: var(--ios-fill);
}
html body .pa-hint {
  margin: 6px 0 0;
  color: var(--ios-label2);
  font-size: 13px;
}
html body .pa-text-input {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  border: var(--ios-hair) solid var(--ios-sep);
  border-radius: 10px;
  background: var(--ios-card);
  color: var(--ios-label);
  font-family: inherit;
  font-size: 17px;
  -webkit-appearance: none;
  appearance: none;
}
html body .pa-tags-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ios-label2);
  font-size: 13px;
}
html body .pa-chip {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ios-fill);
  color: var(--ios-label);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html body .pa-chip.on {
  border: 0;
  background: var(--ios-tint);
  color: #FFFFFF;
  font-weight: 600;
}
html body .pa-detail-readonly .pa-chip {
  cursor: default;
}
html body .pa-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
html body .pa-saved {
  margin: 0 0 12px;
  color: var(--ios-green);
  font-size: 13px;
}
html body .pa-fields {
  border-top: var(--ios-hair) solid var(--ios-sep);
  font-size: 13px;
}
html body .pa-field-label {
  color: var(--ios-label2);
}
html body .pa-field-value {
  color: var(--ios-label);
}

/* 旧版通用列表行（styles.css 的 .record）同样处理 */
html body .record {
  position: relative;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: var(--ios-card);
  -webkit-tap-highlight-color: transparent;
}
html body .record + .record::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0;
  border-top: var(--ios-hair) solid var(--ios-sep);
  pointer-events: none;
}
html body .record:active {
  background: var(--ios-fill);
}
html body .record-text {
  font-size: 17px;
  font-weight: 500;
  color: var(--ios-label);
}
html body .record-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ios-label2);
}
html body .record-del {
  background: var(--ios-red-soft);
  color: var(--ios-red);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}
html body .detail-host {
  margin: 12px 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: visible;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 十四、分享卡片预览 / 拖放区 / 警告条 / 额度说明 / 录像取景框
 * ──────────────────────────────────────────────────────────────────────────── */

html body .preview {
  margin: 10px 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ios-card);
}
html body .preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* 拖放区：iOS 风的浅色虚线占位块 */
html body .drop-zone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  margin: 12px 0 0;
  padding: 12px;
  border: 1.5px dashed var(--ios-label3);
  border-radius: 12px;
  background: var(--ios-fill);
}
html body .drop-empty {
  font-size: 13px;
  color: var(--ios-label2);
}

/* 非 HTTPS 提示：orange 系浅底警告卡 */
html body .banner {
  margin: 10px 16px 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--ios-orange-soft);
  color: var(--ios-orange);
  font-size: 13px;
  line-height: 1.5;
}
html body .banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
/* 离线补提交提示卡：同样走 orange 而不是砖橘描边 */
html body .banner-card {
  border: 0;
  background: var(--ios-orange-soft);
  color: var(--ios-orange);
}
html body .banner-card p {
  margin-top: 0;
  color: var(--ios-orange);
}

/* 额度条：不再是方框卡片，只留一行 13px 次要说明（iOS footer） */
html body .quotabar {
  display: block;
  margin: 4px 4px 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html body .quotabar .tiny {
  color: var(--ios-label2);
  font-size: 13px;
}

/* 录像取景框与波形：只改观感，尺寸/定位全不动
   （.camera-frame 里的 .petphrase-wave height:56px 是 styles.css 的既有定位值，
     与 record.css 里"读 64px 定 canvas 像素"互不冲突） */
html body .camera-frame {
  border: 0;
  border-radius: 12px;
  background: #1C1C1E;
  overflow: hidden;
  box-shadow: var(--ios-card-shadow);
}
html body .camera-noise {
  border-radius: 8px;
  background: rgba(28, 28, 30, .78);
  color: #FFFFFF;
  font-size: 13px;
}
html body .clip-preview {
  border: 0;
  border-radius: 12px;
}
html body .record-stage .petphrase-rec-btn {
  width: 100%;
}
/* 录音态：外圈光晕保留（record.css 的语义），颜色换成正红调 */
html body .petphrase-rec-btn.recording {
  background: var(--ios-red);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--ios-red-soft);
}

/* ────────────────────────────────────────────────────────────────────────────
 * 十五、口令页（#gate）与顶栏 logo
 * #gate 用的是 .card，这里补上"整页居中"的观感，不改结构
 * ──────────────────────────────────────────────────────────────────────────── */

html body #gate {
  margin: 0 auto;
  max-width: 440px;
  padding: 20px;
  border-radius: 16px;
}
html body #gate.card {
  margin: 16px auto;
}
html body #gate h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.2px;
}
html body #gate .primary {
  margin-top: 12px;
}
html body #gate input {
  margin-bottom: 4px;
}
.gate-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 14px;
  object-fit: cover;
}

/* ────────────────────────────────────────────────────────────────────────────
 * 十六、收尾细节
 * ──────────────────────────────────────────────────────────────────────────── */

/* 聚焦可见性统一用 tint 色，不要浏览器默认的蓝框 */
html body :focus-visible {
  outline-color: var(--ios-tint);
}

/* 减弱动态效果：开关的过渡在「十、」里已单独关掉（那里不写 !important，
   也不碰 reveal.css / record.css 自己的过渡规则——那些是别的模块的语义）。 */

/* 挡住下拉整页橡皮筋 */
@media (max-width: 599px) {
  html body {
    overscroll-behavior-y: none;
  }
}