/* ============================================================
   Apple Design System (ap-*) — 独立叠加层
   视觉令牌采用 iOS HIG 语义色；不修改任何现有主题/组件类。
   与 enterprise 规范叠加：信息密度/表格/状态语义沿用企业级。
   接入：在 index.html 引入本文件即可，页面使用 ap-* 类。
   ============================================================ */
:root {
  --ap-accent: #007AFF;
  --ap-green: #34C759;
  --ap-red: #FF3B30;
  --ap-orange: #FF9500;
  --ap-gray: #8E8E93;
  --ap-bg: #F2F2F7;
  --ap-card: #FFFFFF;
  --ap-label: #000000;
  --ap-label2: rgba(60, 60, 67, .6);
  --ap-label3: rgba(60, 60, 67, .3);
  --ap-separator: rgba(60, 60, 67, .12);
  --ap-fill: rgba(120, 120, 128, .12);
  --ap-tint: rgba(0, 122, 255, .10);
  --ap-tint-red: rgba(255, 59, 48, .10);
  --ap-radius: 12px;
  --ap-radius-lg: 16px;
  --ap-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "PingFang SC", "HarmonyOS Sans SC", "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ap-bg: #000000;
    --ap-card: #1C1C1E;
    --ap-label: #FFFFFF;
    --ap-label2: rgba(235, 235, 245, .6);
    --ap-label3: rgba(235, 235, 245, .3);
    --ap-separator: rgba(84, 84, 88, .6);
    --ap-fill: rgba(120, 120, 128, .24);
    --ap-tint: rgba(10, 132, 255, .22);
    --ap-tint-red: rgba(255, 69, 58, .22);
    --ap-accent: #0A84FF;   /* iOS 深色 systemBlue */
  }
}

/* ---- 页面骨架 ---- */
.ap-page {
  font-family: var(--ap-sans);
  color: var(--ap-label);
  background: var(--ap-bg);
  min-height: 100vh;
  padding: 0 16px 48px;
}
.ap-page * { box-sizing: border-box; }
.ap-page .ap-muted { color: var(--ap-label2); }

/* 导航栏：返回箭头 + 居中标题 + 尾部操作（毛玻璃） */
.ap-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 0 4px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ap-bg);            /* color-mix 降级兜底 */
  background: color-mix(in srgb, var(--ap-bg) 82%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.ap-nav__back {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ap-fill); color: var(--ap-accent);
  font-size: 20px; line-height: 1; cursor: pointer; border: 0;
  transition: transform 120ms ease;
}
.ap-nav__back:active { transform: scale(.92); }
.ap-nav__title {
  flex: 1; text-align: center;
  font-size: 17px; font-weight: 600; color: var(--ap-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-nav__actions { display: flex; gap: 8px; }

/* 大标题（首页级） */
.ap-large-title { font-size: 32px; line-height: 38px; font-weight: 800; padding: 18px 0 6px; }

/* ---- 卡片与分组 ---- */
.ap-card {
  background: var(--ap-card);
  border-radius: var(--ap-radius);
  padding: 14px;
  margin-top: 12px;
}
.ap-group {
  background: var(--ap-card);
  border-radius: var(--ap-radius);
  margin-top: 12px;
  overflow: hidden;
}
.ap-group + .ap-group { margin-top: 20px; }
.ap-group__header {
  padding: 14px 16px 6px;
  font-size: 13px; font-weight: 600; color: var(--ap-label2);
  display: flex; align-items: center; justify-content: space-between;
}
.ap-group__title { text-transform: uppercase; letter-spacing: .02em; }
.ap-group__count { font-size: 13px; color: var(--ap-accent); }

/* 分组行：icon + 主/副文案 + 尾部 */
.ap-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 16px;
  position: relative;
}
.ap-row + .ap-row::before {
  content: "";
  position: absolute; top: 0; left: 16px; right: 0;
  height: 1px; background: var(--ap-separator);
}
.ap-row__icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--ap-tint); color: var(--ap-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ap-row__icon--red { background: var(--ap-tint-red); color: var(--ap-red); }
.ap-row__icon--green { background: rgba(52,199,89,.12); color: var(--ap-green); }
.ap-row__icon--orange { background: rgba(255,149,0,.14); color: var(--ap-orange); }
.ap-row__main { flex: 1; min-width: 0; }
.ap-row__title {
  font-size: 16px; font-weight: 400; color: var(--ap-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-row__sub {
  font-size: 13px; color: var(--ap-label2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-row__trailing {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; color: var(--ap-label2); flex-shrink: 0;
}
.ap-row__chevron { color: var(--ap-label3); font-size: 15px; }

/* ---- 状态徽章（企业级：文字带动词，颜色不唯一载体） ---- */
.ap-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
}
.ap-badge--green { background: rgba(52,199,89,.14); color: #1E9E4D; }
.ap-badge--orange { background: rgba(255,149,0,.16); color: #C77800; }
.ap-badge--red { background: rgba(255,59,48,.12); color: #D62C23; }
.ap-badge--blue { background: rgba(0,122,255,.12); color: var(--ap-accent); }
.ap-badge--gray { background: var(--ap-fill); color: var(--ap-label2); }
@media (prefers-color-scheme: dark) {
  .ap-badge--green { background: rgba(52,199,89,.22); color: #4CE07D; }
  .ap-badge--orange { background: rgba(255,149,0,.24); color: #FFB340; }
  .ap-badge--red { background: rgba(255,59,48,.2); color: #FF6B61; }
  .ap-badge--blue { background: rgba(10,132,255,.22); color: #6BB5FF; }
  .ap-badge--gray { background: var(--ap-fill); color: var(--ap-label2); }
}

/* ---- 风险分（0-39绿 40-69黄 70-89橙 90+红，与分档一致） ---- */
.ap-score { display: inline-flex; align-items: center; gap: 8px; }
.ap-score__num {
  font-size: 26px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ap-score__num--low { color: var(--ap-green); }
.ap-score__num--medium { color: var(--ap-orange); }
.ap-score__num--high { color: var(--ap-red); }
.ap-score__bar {
  width: 84px; height: 6px; border-radius: 3px;
  background: var(--ap-fill); overflow: hidden;
}
.ap-score__bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #34C759 0%, #FF9500 55%, #FF3B30 100%);
}

/* ---- 分段控件 ---- */
.ap-segmented {
  display: inline-flex; padding: 2px; border-radius: 10px;
  background: var(--ap-fill); gap: 2px;
}
.ap-segmented button {
  border: 0; background: transparent; color: var(--ap-label2);
  font-size: 13px; font-weight: 500; padding: 6px 14px;
  border-radius: 8px; cursor: pointer; font-family: inherit;
  transition: all 150ms ease;
}
.ap-segmented button.ap-segmented__on {
  background: var(--ap-card); color: var(--ap-accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ---- 按钮 ---- */
.ap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 500;
  padding: 10px 18px; border-radius: var(--ap-radius);
  transition: transform 120ms ease, opacity 120ms ease;
}
.ap-btn:active { transform: scale(.97); }
.ap-btn:disabled { opacity: .4; cursor: not-allowed; }
.ap-btn--primary { background: var(--ap-accent); color: #fff; }
.ap-btn--tinted { background: var(--ap-tint); color: var(--ap-accent); }
.ap-btn--danger { background: var(--ap-tint-red); color: var(--ap-red); }
.ap-btn--block { width: 100%; padding: 14px; border-radius: var(--ap-radius-lg); }
.ap-btn--ghost { background: transparent; color: var(--ap-accent); }

/* ---- 搜索框 ---- */
.ap-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--ap-card); border-radius: 12px;
  padding: 10px 14px; margin-top: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ap-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 16px; color: var(--ap-label); font-family: inherit;
}
.ap-search input::placeholder { color: var(--ap-label3); }
.ap-search__icon { color: var(--ap-label3); font-size: 16px; }

/* ---- 时间线 ---- */
.ap-timeline { padding: 6px 0; }
.ap-timeline__item {
  display: flex; gap: 12px; padding: 10px 16px; position: relative;
}
.ap-timeline__item + .ap-timeline__item::before {
  content: ""; position: absolute; top: 0; left: 27px; right: 0;
  height: 1px; background: var(--ap-separator);
}
.ap-timeline__dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ap-tint); color: var(--ap-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0; margin-top: 2px;
}
.ap-timeline__dot--red { background: var(--ap-tint-red); color: var(--ap-red); }
.ap-timeline__dot--green { background: rgba(52,199,89,.14); color: var(--ap-green); }
.ap-timeline__dot--orange { background: rgba(255,149,0,.16); color: var(--ap-orange); }
.ap-timeline__body { flex: 1; min-width: 0; }
.ap-timeline__title { font-size: 15px; color: var(--ap-label); }
.ap-timeline__meta {
  font-size: 12px; color: var(--ap-label3); margin-top: 2px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* ---- 底部面板 sheet ---- */
.ap-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity 240ms ease;
  z-index: 100;
}
.ap-sheet-backdrop.ap-sheet-backdrop--open { opacity: 1; pointer-events: auto; }
.ap-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
  background: var(--ap-card);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 240ms ease;
  max-height: 78vh; overflow-y: auto;
}
.ap-sheet.ap-sheet--open { transform: translateY(0); }
.ap-sheet__grabber {
  width: 36px; height: 5px; border-radius: 3px;
  background: var(--ap-label3); margin: 6px auto 14px;
}
.ap-sheet__title { font-size: 17px; font-weight: 600; text-align: center; padding-bottom: 8px; }
.ap-sheet__desc { font-size: 14px; color: var(--ap-label2); text-align: center; padding-bottom: 16px; }
.ap-sheet__actions { display: flex; flex-direction: column; gap: 10px; }

/* ---- Toast（底部胶囊） ---- */
.ap-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(16px);
  background: var(--ap-card); color: var(--ap-label);
  padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: all 240ms ease;
  z-index: 200; max-width: 90vw; text-align: center;
}
.ap-toast.ap-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ap-toast--danger { color: var(--ap-red); }

/* ---- 空状态 ---- */
.ap-empty {
  padding: 48px 24px; text-align: center; color: var(--ap-label2);
}
.ap-empty__icon { font-size: 44px; margin-bottom: 10px; opacity: .5; }
.ap-empty__title { font-size: 16px; font-weight: 600; color: var(--ap-label); }
.ap-empty__desc { font-size: 13px; margin-top: 4px; }

/* ---- 骨架屏 ---- */
.ap-skeleton {
  background: linear-gradient(90deg, var(--ap-fill) 25%, rgba(120,120,128,.22) 50%, var(--ap-fill) 75%);
  background-size: 200% 100%;
  animation: ap-shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes ap-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- 标签 / 头像 / KV / 开关 / 折叠 / 输入 ---- */
.ap-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: var(--ap-fill); color: var(--ap-label2);
  font-size: 12px; margin: 2px;
}
.ap-tag--accent { background: var(--ap-tint); color: var(--ap-accent); }
.ap-avatar {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ap-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.ap-kv {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 16px; font-size: 14px;
}
.ap-kv dt { color: var(--ap-label2); flex-shrink: 0; }
.ap-kv dd {
  color: var(--ap-label); text-align: right; margin: 0;
  font-variant-numeric: tabular-nums; word-break: break-all;
}
.ap-switch {
  width: 46px; height: 28px; border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(120,120,128,.32); position: relative; transition: background 200ms ease;
  flex-shrink: 0;
}
.ap-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform 200ms ease;
}
.ap-switch.ap-switch--on { background: var(--ap-green); }
.ap-switch.ap-switch--on::after { transform: translateX(18px); }
.ap-row--clickable { cursor: pointer; }
.ap-row--clickable:active { background: var(--ap-fill); }
.ap-collapse { overflow: hidden; }
.ap-collapse__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; cursor: pointer; font-size: 15px; font-weight: 500;
}
.ap-collapse__head:active { background: var(--ap-fill); }
.ap-collapse__head span:last-child { color: var(--ap-label3); transition: transform 200ms ease; }
.ap-collapse--open .ap-collapse__head span:last-child { transform: rotate(90deg); }
.ap-collapse__body { display: none; }
.ap-collapse--open .ap-collapse__body { display: block; }
.ap-input {
  width: 100%; border: 0; background: var(--ap-fill);
  border-radius: 10px; padding: 10px 12px;
  font-size: 15px; color: var(--ap-label); font-family: inherit;
  outline: none;
}
.ap-input:focus { background: var(--ap-card); box-shadow: 0 0 0 2px var(--ap-accent); }
textarea.ap-input { resize: vertical; min-height: 72px; }

/* ---- 桌面适配：内容限宽，分组可双列（ap-nav 全端保留，保证返回/刷新可用） ---- */
@media (min-width: 900px) {
  .ap-page { padding: 0 24px 56px; }
  .ap-large-title, .ap-content { max-width: 1080px; margin-left: auto; margin-right: auto; }
  .ap-nav { max-width: 1080px; margin-left: auto; margin-right: auto; }
  .ap-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
}