/* ============================================================================
 * apple-ui.css —— iOS / macOS 全套设计 tokens + 通用组件
 *
 * 视觉参考：
 *   - Framework7 iOS theme（https://github.com/framework7io/framework7）
 *   - Konsta UI（Framework7 团队 Tailwind 版）
 *   - Apple HIG iOS 17 + iOS 26 "Liquid Glass"
 *   - Vercel Geist / HeroUI / NextUI
 *
 * 使用方法：任何页面 <link> 引入本文件；后续 CSS 用 var(--ios-*) 拿值。
 * 组件基类（可选）：.ios-nav / .ios-list / .ios-cell / .ios-btn / .ios-switch
 * ============================================================================ */

:root {
  /* ────────── iOS 系统色（Light Mode） ────────── */
  --ios-blue:    #007AFF;
  --ios-blue-hi: #339dff;
  --ios-blue-lo: #005ecc;
  --ios-green:   #34C759;
  --ios-red:     #FF3B30;
  --ios-orange:  #FF9500;
  --ios-yellow:  #FFCC00;
  --ios-purple:  #AF52DE;
  --ios-pink:    #FF2D55;
  --ios-teal:    #5AC8FA;
  --ios-indigo:  #5856D6;
  --ios-mint:    #00C7BE;
  --ios-brown:   #A2845E;
  --ios-gray:    #8E8E93;

  /* ────────── 背景色（Light Mode） ────────── */
  --ios-bg:      #F2F2F7;   /* systemGroupedBackground（页面背景） */
  --ios-bg-elev: #FFFFFF;   /* secondaryGroupedBackground（卡片） */
  --ios-bg-tri:  #FFFFFF;
  --ios-bg-vib:  rgba(255, 255, 255, 0.72);  /* 毛玻璃卡片 */
  --ios-bg-nav:  rgba(249, 249, 249, 0.78);  /* Navigation Bar 玻璃感 */

  /* ────────── 标签色（label 层级） ────────── */
  --ios-label:   #000000;
  --ios-label2:  rgba(60, 60, 67, 0.6);
  --ios-label3:  rgba(60, 60, 67, 0.3);
  --ios-label4:  rgba(60, 60, 67, 0.18);

  /* ────────── 填充色（背景 fills） ────────── */
  --ios-fill1:   rgba(120, 120, 128, 0.2);
  --ios-fill2:   rgba(120, 120, 128, 0.16);
  --ios-fill3:   rgba(118, 118, 128, 0.12);
  --ios-fill4:   rgba(116, 116, 128, 0.08);

  /* ────────── 分隔线 ────────── */
  --ios-sep:      rgba(60, 60, 67, 0.29);   /* 非透 opaque separator */
  --ios-sep-nt:   rgba(60, 60, 67, 0.15);   /* 半透 non-opaque */
  --ios-sep-hair: rgba(60, 60, 67, 0.1);    /* hairline */

  /* ────────── 光泽 / 描边 ────────── */
  --ios-hl-top:    rgba(255, 255, 255, 0.9);
  --ios-hl-border: rgba(255, 255, 255, 0.5);
  --ios-stroke:    rgba(0, 0, 0, 0.06);

  /* ────────── 圆角 ────────── */
  --ios-r-s:  8px;   /* 小按钮 / chip */
  --ios-r-m:  12px;  /* 输入框 / 中按钮 */
  --ios-r-l:  16px;  /* 大按钮 */
  --ios-r-xl: 20px;  /* 卡片 */
  --ios-r-2xl: 22px; /* modal / sheet */
  --ios-r-pill: 999px;

  /* ────────── 阴影 ────────── */
  --ios-shadow-1:
    0 0 0 0.5px var(--ios-stroke),
    0 1px 2px rgba(0, 0, 0, .04);
  --ios-shadow-2:
    0 0 0 0.5px var(--ios-stroke),
    0 1px 3px rgba(0, 0, 0, .06),
    0 4px 12px rgba(0, 0, 0, .04);
  --ios-shadow-3:
    0 0 0 0.5px var(--ios-stroke),
    0 8px 24px -6px rgba(15, 23, 42, .12),
    0 20px 48px -12px rgba(15, 23, 42, .18),
    inset 0 0.5px 0 var(--ios-hl-top);
  --ios-shadow-modal:
    0 32px 64px -12px rgba(0, 0, 0, .32),
    0 12px 24px -6px rgba(0, 0, 0, .16),
    0 0 0 0.5px rgba(0, 0, 0, .18),
    inset 0 0.5px 0 var(--ios-hl-top);

  /* ────────── 缓动曲线 ────────── */
  --ios-ease:      cubic-bezier(0.32, 0.72, 0, 1);        /* 标准 */
  --ios-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);         /* 缓出 */
  --ios-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);     /* 弹性 overshoot */

  /* ────────── 玻璃 blur ────────── */
  --ios-glass: saturate(180%) blur(30px);
  --ios-glass-lite: saturate(160%) blur(12px);
}

/* ============================================================================
 * 全局基础
 * ============================================================================ */

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.008em;
  color: var(--ios-label);
}

/* ============================================================================
 * iOS Safari / iOS Chrome 全局表单加固
 * ---------------------------------------------------------------------------
 * 目标：让 iPhone 上访问的表单元素外观和行为跟原生 iOS App 一致。
 *
 * 1. font-size >= 16px：iOS Safari 在 <16px 输入框获焦时会自动放大页面，直接
 *    破坏所有 fixed / sticky 布局。全站 input/select/textarea 默认 16px。
 * 2. -webkit-appearance: none：iOS 默认给 button/select 加圆角+渐变的原生样式，
 *    会覆盖我们的 iOS 卡片按钮。全部关掉。checkbox/radio 保留原生。
 * 3. -webkit-tap-highlight-color: transparent：触摸时的灰蓝矩形已在 html 层
 *    禁掉，交互元素这里再兜底一次。
 * 4. border-radius: 0：iOS 会强行给 input/textarea 加圆角，覆盖我们的 0/8/12px
 *    设定。全部归零，让业务 CSS 自己定。
 * 5. min-height / line-height：iOS button 默认高度不足 44pt (iOS HIG 触摸目标最小值)，
 *    这里不强制以免破坏工具栏；由具体控件自行决定。
 * ============================================================================ */
input, textarea, select {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}
button {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /* 禁掉 iOS 双击缩放的 300ms 延迟 */
}
a { -webkit-tap-highlight-color: transparent; }

/* ============================================================================
 * iOS Navigation Bar
 * ============================================================================ */

.ios-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-top: max(10px, env(safe-area-inset-top));
  min-height: 44px;
  background: var(--ios-bg-nav);
  backdrop-filter: var(--ios-glass);
  -webkit-backdrop-filter: var(--ios-glass);
  border-bottom: 0.5px solid var(--ios-sep-nt);
  position: sticky; top: 0; z-index: 40;
}
.ios-nav-title {
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ios-label);
  text-align: center; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ios-nav-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ios-blue);
  font-size: 15px; font-weight: 400;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  border-radius: var(--ios-r-s);
  transition: background .18s var(--ios-ease), transform .12s var(--ios-ease);
}
.ios-nav-btn:hover { background: var(--ios-fill4); }
.ios-nav-btn:active { transform: scale(0.94); background: var(--ios-fill3); }

/* ============================================================================
 * iOS Grouped List / Cell
 * ============================================================================ */

.ios-list {
  background: var(--ios-bg-elev);
  border-radius: var(--ios-r-xl);
  overflow: hidden;
  box-shadow: var(--ios-shadow-1);
}
.ios-list-title {
  padding: 20px 20px 6px 20px;
  font-size: 13px; font-weight: 400;
  color: var(--ios-label2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ios-cell {
  display: flex; align-items: center;
  padding: 12px 16px; min-height: 44px;
  gap: 12px;
  position: relative;
  color: var(--ios-label);
  font-size: 15px;
  text-decoration: none;
  transition: background .12s var(--ios-ease);
}
.ios-cell + .ios-cell::before {
  content: ""; position: absolute; left: 16px; right: 0; top: 0;
  height: 0.5px; background: var(--ios-sep-nt);
}
.ios-cell:hover:not(:disabled) { background: var(--ios-fill4); }
.ios-cell:active:not(:disabled) { background: var(--ios-fill3); }
.ios-cell-icon {
  width: 30px; height: 30px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
  background: var(--ios-blue);
  flex-shrink: 0;
}
.ios-cell-label { flex: 1; min-width: 0; }
.ios-cell-value { color: var(--ios-label2); font-size: 15px; }
.ios-cell-chev { color: var(--ios-label3); font-size: 13px; margin-left: 4px; }

/* ============================================================================
 * iOS Button（Prominent / Bordered / Plain / Tinted）
 * ============================================================================ */

.ios-btn {
  appearance: none; cursor: pointer; border: 0;
  padding: 10px 20px;
  border-radius: var(--ios-r-m);
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.008em;
  background: var(--ios-fill1);
  color: var(--ios-label);
  transition:
    background .18s var(--ios-ease),
    color .18s var(--ios-ease),
    transform .12s var(--ios-ease),
    box-shadow .18s var(--ios-ease);
}
.ios-btn:hover:not(:disabled) { background: rgba(120,120,128,.24); }
.ios-btn:active:not(:disabled) { transform: scale(0.965); }
.ios-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Prominent */
.ios-btn-prom {
  background: var(--ios-blue); color: #fff; font-weight: 600;
  box-shadow:
    0 2px 6px rgba(0,122,255,.3),
    inset 0 0.5px 0 rgba(255,255,255,.3),
    inset 0 -0.5px 0 rgba(0,0,0,.12);
}
.ios-btn-prom:hover:not(:disabled) { background: var(--ios-blue-hi); }
.ios-btn-prom:active:not(:disabled) { background: var(--ios-blue-lo); }
/* Plain（纯文字蓝按钮） */
.ios-btn-plain {
  background: transparent; color: var(--ios-blue); padding: 10px 16px;
}
.ios-btn-plain:hover:not(:disabled) { background: rgba(0,122,255,.08); }
/* Tinted */
.ios-btn-tint {
  background: rgba(0,122,255,.12); color: var(--ios-blue);
}
.ios-btn-tint:hover:not(:disabled) { background: rgba(0,122,255,.18); }
/* Destructive */
.ios-btn-danger {
  background: var(--ios-red); color: #fff; font-weight: 600;
  box-shadow: 0 2px 6px rgba(255,59,48,.3);
}
.ios-btn-danger:hover:not(:disabled) { background: #ff5147; }

/* ============================================================================
 * iOS Switch
 * ============================================================================ */

.ios-switch {
  position: relative; display: inline-block;
  width: 51px; height: 31px;
  flex-shrink: 0;
}
.ios-switch input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; z-index: 1;
}
.ios-switch-track {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(120, 120, 128, .16);
  border-radius: 999px;
  transition: background .28s var(--ios-ease);
}
.ios-switch-thumb {
  position: absolute; left: 2px; top: 2px;
  width: 27px; height: 27px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, .15),
    0 3px 1px rgba(0, 0, 0, .06),
    0 0 0 0.5px rgba(0, 0, 0, .04);
  transition: transform .28s var(--ios-spring);
}
.ios-switch input:checked + .ios-switch-track { background: var(--ios-green); }
.ios-switch input:checked + .ios-switch-track .ios-switch-thumb { transform: translateX(20px); }
.ios-switch input:disabled + .ios-switch-track { opacity: 0.5; cursor: not-allowed; }

/* ============================================================================
 * iOS Chip / Badge / Segmented Control（跟 modal 一致）
 * ============================================================================ */

.ios-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--ios-r-pill);
  font-size: 12px; font-weight: 500;
  background: var(--ios-fill3); color: var(--ios-label2);
  letter-spacing: -0.005em;
}
.ios-chip-blue   { background: rgba(0,122,255,.12); color: var(--ios-blue); }
.ios-chip-green  { background: rgba(52,199,89,.14); color: #248A3D; }
.ios-chip-red    { background: rgba(255,59,48,.12); color: #C41E15; }
.ios-chip-orange { background: rgba(255,149,0,.14); color: #C77400; }
.ios-chip-purple { background: rgba(175,82,222,.12); color: var(--ios-purple); }
.ios-chip-gray   { background: var(--ios-fill3); color: var(--ios-label2); }
.ios-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.ios-seg {
  display: inline-flex; padding: 2px; gap: 0;
  background: var(--ios-fill2); border-radius: 9px;
}
.ios-seg-item {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--ios-label); background: transparent;
  letter-spacing: -0.005em;
  transition: all .18s var(--ios-ease);
}
.ios-seg-item[data-active="1"] {
  background: #fff; font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0.5px 0.5px rgba(0,0,0,.04);
}

/* ============================================================================
 * iOS Input
 * ============================================================================ */

.ios-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.68);
  border: 0.5px solid var(--ios-sep-nt);
  border-radius: var(--ios-r-m);
  padding: 11px 13px;
  font-size: 15px; font-family: inherit;
  color: var(--ios-label);
  outline: 0;
  letter-spacing: -0.008em;
  transition: border-color .18s var(--ios-ease), box-shadow .18s var(--ios-ease);
}
.ios-input:hover:not(:focus) { border-color: rgba(60,60,67,.3); background: rgba(255,255,255,.82); }
.ios-input:focus {
  background: #fff;
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3.5px rgba(0,122,255,.18);
}