/*
 * design/themes/apple-form.css —— Apple 风格表单皮肤
 * inspired by Apple macOS 系统设置 / 分组列表语系，非官方实现；
 * 与 Apple 无关，全部样式为本仓库手写仿制。
 * 关键仿制特征：#f5f5f7 画布、白色圆角分组卡、发丝分隔线、#0071e3 胶囊按钮、
 * 分组行 label:value（kv 的原生形态）、聚焦蓝色光环。
 */
body[data-style="apple"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --border: #e3e3e8;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #a1a1a6;
  --accent: #0071e3;
  --accent-ink: #ffffff;
  --danger: #e30000;
  --danger-ring: rgba(255, 59, 48, .22);
  --ctl-h: 36px;
  --btn-h: 36px;
  --ctl-radius: 6px;
  --panel-radius: 12px;
  --focus-ring: rgba(0, 113, 227, .22);
  --opt-hover: #f5f5f7;
  --filter-row-bg: #fafafc;
  --chip-radius: 980px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, .16);
}

.ui-page-title { font-weight: 700; letter-spacing: .2px; }

/* ---------- 按钮：胶囊 ---------- */
.ui-btn { border-radius: 980px; padding: 0 18px; }
.ui-btn-primary { background: var(--accent); color: var(--accent-ink); }
.ui-btn-primary:hover { background: #0077ed; }
.ui-btn-secondary { background: #e8e8ed; color: var(--ink); border-color: transparent; }
.ui-btn-secondary:hover { background: #dcdce1; }

/* ---------- 控件（macOS 字段 + 聚焦光环） ---------- */
.f-form input:focus, .f-form input:focus-visible, .f-textarea:focus, .tier-row input:focus,
.dd-body:focus-visible, .q-fcell input:focus, .ui-in:focus, .ui-in:focus-visible, .ui-in-num:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 125, 250, .25); /* macOS 光环 */
}
.f-form input, .f-form .dd-body, .tier-row input, .q-fcell input, .ui-in, .ui-in-num { border-color: #d2d2d7; }

/* ---------- 表格（发丝线 + 11px 大写表头；该语言无表头筛选惯例，注解见 docs/apple.md） ---------- */
.q-head-row th { color: var(--ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.q-table th, .q-table td { border-bottom: 1px solid rgba(0, 0, 0, .07); }
.q-table tbody tr:hover td { background: #f5f5f7; }

/* ---------- 徽标：胶囊 tinted 三态 ---------- */
.q-badge.is-draft { background: rgba(120, 120, 128, .12); color: #48484a; }
.q-badge.is-sent { background: #e8f8ee; color: #248a3d; }
.q-badge.is-expired { background: #fff3e0; color: #c93400; }

/* ---------- 卡片与弹窗（sheet 感：大圆角 + 头部居中） ---------- */
.ui-panel { border-color: rgba(0, 0, 0, .05); }
.ui-modal { border-radius: 14px; }
.ui-modal-head { border-bottom-color: rgba(0, 0, 0, .08); }
.ui-modal-foot { border-top-color: rgba(0, 0, 0, .08); background: #fafafc; }
.ui-modal-title { text-align: center; font-size: 15px; font-weight: 600; }
.ui-modal-kicker, .ui-modal-sub { text-align: center; }
.ui-modal-head-main { flex: 1; }

/* ---------- kv：分组行（k 左灰、v 右深）---------- */
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.kv:last-child { border-bottom: none; }
.kv-k { margin-bottom: 0; flex: none; }
.kv-v { text-align: right; }
.kv--wide { flex-direction: column; align-items: stretch; gap: 2px; }
.kv--wide .kv-v { text-align: left; font-weight: 500; }

/* ---------- 下拉 ---------- */
.dd-panel { border-color: rgba(0, 0, 0, .08); }
.dd-opt { border-radius: 8px; }
.dd-opt.is-sel { background: #eaf3ff; }