/* 健康科普内容供应链 SaaS · iOS 风格设计系统 */

:root {
  /* iOS 色彩系统 */
  --color-primary-50: #E5F2FF;
  --color-primary-100: #C3DEFF;
  --color-primary-500: #007AFF;
  --color-primary-600: #0051D5;
  --color-primary-700: #003FCC;
  --color-secondary-500: #30B0C7;
  --color-success-500: #34C759;
  --color-warning-500: #FF9500;
  --color-error-500: #FF3B30;
  --color-neutral-50: #F2F2F7;
  --color-neutral-100: #E5E5EA;
  --color-neutral-300: #C6C6C8;
  --color-neutral-500: #8E8E93;
  --color-neutral-700: #1C1C1E;

  /* 语义层 — 对比度经校验，正文级文本均满足 WCAG AA */
  --color-brand: var(--color-primary-500);
  --color-brand-hover: var(--color-primary-600);
  --color-brand-subtle: var(--color-primary-50);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: #5C5C61;
  --color-text-tertiary: #78787D;
  --color-text-inverse: #FFFFFF;
  --color-bg-page: var(--color-neutral-50);
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F2F2F7;
  --color-border-light: #F2F2F7;
  --color-border-subtle: #EAEAEF;
  --color-border-default: #E5E5EA;
  --color-border-strong: #D1D1D6;
  --color-border-focus: var(--color-primary-500);
  --color-feedback-success: var(--color-success-500);
  --color-feedback-warning: var(--color-warning-500);
  --color-feedback-error: var(--color-error-500);

  /* 主色阶 — 用于填充、描边与浅色底 */
  --color-primary-50: #F0F7FF;
  --color-primary-100: #DCEBFF;
  --color-primary-200: #C3DEFF;
  --color-primary-300: #A5D0FF;
  --color-primary-400: #6FB5FF;
  --color-primary-500: #007AFF;
  --color-primary-600: #0051D5;
  --color-primary-700: #003FCC;
  --color-secondary-50: #E9F6F9;
  --color-secondary-500: #30B0C7;

  /* 功能色阶 */
  --color-success-50: #EDF9F0;
  --color-success-200: #B8F0C8;
  --color-success-300: #8CE8AC;
  --color-success-400: #5FD97F;
  --color-success-500: #34C759;
  --color-success-600: #2BAE4A;
  --color-success-700: #248A3D;
  --color-success-800: #1B7A33;
  --color-warning-50: #FFF8EC;
  --color-warning-100: #FFEFD6;
  --color-warning-200: #FFE0AD;
  --color-warning-300: #FFD08A;
  --color-warning-500: #FF9500;
  --color-warning-600: #E08500;
  --color-warning-700: #A86400;
  --color-danger: #FF3B30;
  --color-danger-50: #FEF1F0;
  --color-danger-200: #FFC4BE;
  --color-danger-500: #FF3B30;
  --color-danger-600: #E32F24;
  --color-danger-700: #C4271D;
  --color-amber-200: #FFE0AD;
  --color-amber-500: #FF9500;
  --color-purple-500: #AF52DE;
  --color-pink-500: #FF2D55;

  /* 中性色阶 */
  --color-neutral-50: #F2F2F7;
  --color-neutral-100: #E5E5EA;
  --color-neutral-200: #E5E5EA;
  --color-neutral-300: #D1D1D6;
  --color-neutral-400: #AEAEB2;
  --color-neutral-500: #8E8E93;
  --color-neutral-700: #3A3A3C;
  --color-neutral-900: #1C1C1E;

  /* 字体 */
  --font-family-base: -apple-system, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* 字号层级 — 与行高成对使用，避免临时取值 */
  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --line-height-tight: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* 间距 — 8pt 栅格 */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 圆角 — iOS 更大圆角 */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px;

  /* 阴影 — iOS 柔和分层阴影 */
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.04), 0 1px 2px 0 rgba(0,0,0,.02);
  --shadow-md: 0 4px 16px -2px rgba(0,0,0,.06), 0 2px 6px -1px rgba(0,0,0,.03);
  --shadow-lg: 0 12px 32px -8px rgba(0,0,0,.10), 0 4px 12px -2px rgba(0,0,0,.04);

  --sidebar-w: 260px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg-page); color: var(--color-text-primary);
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size-sm); line-height: 1.6; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
a { color: var(--color-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Skip Link ===== */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-brand); color: #fff; padding: var(--spacing-sm) var(--spacing-md); border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ===== App Shell ===== */
.app { display: flex; min-height: 100vh; }

/* ===== iOS-style Sidebar ===== */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: rgba(249, 249, 251, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.sidebar .brand {
  padding: 20px 20px 16px; border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 12px;
}
.sidebar .brand .logo {
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(135deg, #007AFF, #30B0C7);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px;
  box-shadow: 0 2px 8px rgba(0,122,255,.25);
}
.sidebar .brand .name { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.sidebar .brand .name small { display: block; font-weight: 500; font-size: 11px; color: var(--color-text-secondary); }
.sidebar nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.sidebar nav .group {
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
  text-transform: none; letter-spacing: .02em; margin: 20px 12px 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--color-text-primary); cursor: pointer; font-size: 14px;
  transition: background .15s, color .15s;
  margin-bottom: 2px;
}
.nav-item:hover { background: rgba(0,122,255,.06); }
.nav-item.active {
  background: var(--color-brand); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,122,255,.2);
}
.nav-item.active .dot { opacity: 1; }
.nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; }
.nav-item .badge {
  margin-left: auto; background: #FF3B30; color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: var(--radius-full); min-width: 18px; text-align: center;
}

/* ===== Main Area ===== */
.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

/* iOS-style Top Bar with blur */
.topbar {
  height: 56px;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
.topbar .title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.topbar .spacer { flex: 1; }
.topbar .search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(118,118,128,.12); border-radius: 10px; padding: 7px 12px; width: 240px;
  color: var(--color-text-secondary);
}
.topbar .search input { border: none; background: transparent; outline: none; font-size: 14px; width: 100%; color: var(--color-text-primary); }

/* iOS-style Icon Button */
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; border: none;
  background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; color: var(--color-text-secondary);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(118,118,128,.12); color: var(--color-text-primary); }
.icon-btn .dot-badge { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #FF3B30; border-radius: 50%; border: 2px solid #fff; }

/* iOS-style Avatar */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #007AFF, #30B0C7);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.hamburger { display: none; }

/* ===== Content Area ===== */
.content { padding: 24px; flex: 1; }
.panel { display: none; }
.panel.active { display: block; }

/* iOS-style Page Header */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-head h1 { font-size: 28px; margin: 0; font-weight: 800; letter-spacing: -.03em; color: var(--color-text-primary); }
.page-head .sub { color: var(--color-text-secondary); font-size: 14px; margin-top: 4px; }

/* ===== iOS-style KPI Cards ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi {
  background: var(--color-bg-surface);
  border: none; border-radius: var(--radius-md); padding: 20px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-brand); border-radius: 4px 0 0 4px; }
.kpi .label { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; }
.kpi .value { font-size: 32px; font-weight: 800; line-height: 1.15; margin-top: 4px; letter-spacing: -.03em; }
.kpi .value small { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); }
.kpi .delta { font-size: 12px; margin-top: 6px; font-weight: 500; }
.kpi .delta.up { color: var(--color-feedback-success); }
.kpi .delta.down { color: var(--color-feedback-error); }

/* ===== iOS-style Cards ===== */
.card {
  background: var(--color-bg-surface); border: none; border-radius: var(--radius-md);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.card h2 { font-size: 17px; margin: 0 0 16px; font-weight: 700; letter-spacing: -.02em; }
.card .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card .card-head h2 { margin: 0; }

/* ===== Charts ===== */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-box {
  background: var(--color-bg-surface); border: none; border-radius: var(--radius-md);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.chart-box h2 { font-size: 17px; margin: 0 0 8px; font-weight: 700; letter-spacing: -.02em; }
.chart { width: 100%; height: 260px; }

/* ===== iOS-style Tables (Settings List Style) ===== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
thead th {
  text-align: left; font-weight: 600; color: var(--color-text-secondary);
  padding: 10px 14px; border-bottom: 1px solid var(--color-border-default);
  white-space: nowrap; background: transparent; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
}
tbody td { padding: 14px; border-bottom: 1px solid #F2F2F7; vertical-align: middle; }
tbody tr:hover { background: #F8F8F8; }
tbody tr:last-child td { border-bottom: none; }
.cell-title { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--color-text-secondary); }

/* ===== iOS-style Tags ===== */
.tag {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.tag.teal { color: #007AFF; background: #E5F2FF; }
.tag.green { color: #34C759; background: #E8F9ED; }
.tag.amber { color: #FF9500; background: #FFF5E6; }
.tag.red { color: #FF3B30; background: #FFEBE8; }
.tag.gray { color: var(--color-text-secondary); background: #F2F2F7; }

/* ===== iOS-style Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
  border: none; cursor: pointer;
  transition: opacity .15s, transform .1s;
  letter-spacing: -.01em;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--color-brand); color: #fff; box-shadow: 0 2px 8px rgba(0,122,255,.2); }
.btn.primary:hover { opacity: .85; }
.btn.ghost { background: rgba(0,122,255,.08); color: var(--color-brand); }
.btn.ghost:hover { background: rgba(0,122,255,.12); }
.btn.danger { background: #FF3B30; color: #fff; }
.btn.danger:hover { opacity: .85; }
.btn.sm { padding: 5px 14px; font-size: 12px; border-radius: 8px; }

/* ===== iOS-style Form Fields ===== */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--color-border-default); border-radius: 10px;
  font-size: 14px; font-family: inherit; background: var(--color-bg-surface); color: var(--color-text-primary);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(0,122,255,.12);
  outline: none;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ===== Review Timeline ===== */
.review-timeline { list-style: none; margin: 0; padding: 0; }
.review-timeline li { display: flex; gap: 10px; padding: 10px 0; font-size: 14px; }
.review-timeline li + li { border-top: 1px solid #F2F2F7; }
.review-timeline .lv { flex: 0 0 auto; }

/* ===== Editor ===== */
.editor-toolbar {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px;
  border: 1px solid var(--color-border-default); border-radius: 10px 10px 0 0;
  background: #F9F9FB;
}
.editor-body {
  border: 1px solid var(--color-border-default); border-top: none; border-radius: 0 0 10px 10px;
  padding: 14px; min-height: 140px; font-size: 14px; line-height: 1.8;
}
.media-ph { height: 56px; border-radius: 8px; margin: 8px 0; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* ===== 富文本创作编辑器 / 正文预览（创作者创作页 / 稿件查看） ===== */
.editor-toolbar button {
  padding: 4px 8px; border: none; background: transparent; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: #475569; line-height: 1.4;
}
.editor-toolbar button:hover { background: #E7EAF0; color: #0F172A; }
.editor-divider { width: 1px; height: 16px; background: #E2E8F0; margin: 0 4px; }
.cr-editor {
  border: 1px solid var(--color-border-default); border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 16px; min-height: 300px; font-size: 14px; line-height: 1.8; color: #0F172A; outline: none;
}
.cr-editor:empty:before { content: attr(data-ph); color: #94A3B8; }
.cr-editor img, .cr-rich img { max-width: 100%; border-radius: 10px; margin: 10px 0; display: block; }
.cr-editor video, .cr-rich video { width: 100%; border-radius: 10px; display: block; }
.cr-editor h1, .cr-editor h2, .cr-editor h3, .cr-rich h1, .cr-rich h2, .cr-rich h3 {
  margin: 16px 0 8px; line-height: 1.5; color: #0F172A; font-weight: 700;
}
.cr-editor h1, .cr-rich h1 { font-size: 20px; }
.cr-editor h2, .cr-rich h2 { font-size: 17px; }
.cr-editor h3, .cr-rich h3 { font-size: 15px; }
.cr-editor p, .cr-rich p { margin: 0 0 10px; }
.cr-editor ul, .cr-editor ol, .cr-rich ul, .cr-rich ol { margin: 0 0 12px; padding-left: 24px; }
.cr-editor li, .cr-rich li { margin: 4px 0; }
.cr-editor blockquote, .cr-rich blockquote {
  margin: 12px 0; padding: 10px 14px; border-left: 3px solid #0D9488;
  background: #F0FDFA; border-radius: 0 8px 8px 0; color: #134E4A;
}
.cr-editor .tipbox, .cr-rich .tipbox {
  margin: 12px 0; padding: 12px 14px; background: #FFF7ED; border: 1px solid #FED7AA;
  border-radius: 10px; color: #9A3412; font-size: 13px;
}
.cr-editor figure, .cr-rich figure { margin: 12px 0; }
.cr-toolchip { text-decoration: underline; cursor: pointer; }

/* ===== Overlay & Toast ===== */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 25; display: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.overlay.show { display: block; }

.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 16px);
  background: rgba(0,0,0,.85); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-md); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .3s, transform .3s;
  z-index: 9999; pointer-events: none; max-width: 80vw;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-error { background: rgba(255,59,48,.9); }
.disclaimer { background: #FFF8E7; border: 1px solid #FFE4B5; color: #8A6D1A; border-radius: var(--radius-md); padding: 14px 16px; font-size: 13px; }

/* ===== Chat ===== */
.chat-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  cursor: pointer; border-bottom: 1px solid #F2F2F7;
}
.chat-item:last-child { border-bottom: none; }
.chat-item:hover { background: #F8F8F8; }
.chat-item .avatar { flex: 0 0 auto; width: 36px; height: 36px; }
.chat-bubbles { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 180px; }
.bubble { max-width: 75%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.6; }
.bubble.other { align-self: flex-start; background: #E9E9EB; color: #000; border: none; }
.bubble.self { align-self: flex-end; background: var(--color-brand); color: #fff; border: none; }

/* ===== System Switch ===== */
.system-switch { position: relative; }
.system-switch .system-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px 0; display: none; z-index: 50;
}
.system-switch.open .system-menu { display: block; }
.system-switch .system-menu a {
  display: block; padding: 9px 16px; font-size: 14px; color: var(--color-text-primary); text-decoration: none;
}
.system-switch .system-menu a:hover { background: rgba(0,122,255,.06); color: var(--color-brand); text-decoration: none; }
.system-switch .system-menu .divider { height: 1px; background: rgba(0,0,0,.06); margin: 6px 0; }
.system-switch .system-menu .group-title { font-size: 12px; color: var(--color-text-secondary); padding: 8px 16px 4px; font-weight: 600; }

/* ===== Footer ===== */
.sys-footer { border-top: 1px solid rgba(0,0,0,.06); background: rgba(255,255,255,.72); padding: 16px 24px; font-size: 12px; color: var(--color-text-secondary); }
.sys-footer a { color: var(--color-text-secondary); margin: 0 8px; }
.sys-footer a:hover { color: var(--color-brand); }

/* ===== Flow Cards ===== */
.flow-card {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border: none; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm);
}
.flow-card .flow-dot { width: 10px; height: 10px; border-radius: 50%; background: #D1D1D6; }
.flow-card.done .flow-dot { background: var(--color-feedback-success); }
.flow-card.active .flow-dot { background: var(--color-brand); box-shadow: 0 0 0 4px rgba(0,122,255,.15); }
.flow-card .flow-title { font-weight: 600; font-size: 14px; }
.flow-card .flow-meta { font-size: 12px; color: var(--color-text-secondary); }
.flow-arrow { color: #D1D1D6; font-size: 18px; }

/* ===== Chat Input & Bubble ===== */
.bubble .t { display: block; font-size: 10px; opacity: .5; margin-top: 4px; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(0,0,0,.06); }
.chat-input input { flex: 1; padding: 9px 12px; border: 1px solid var(--color-border-default); border-radius: 10px; font-size: 14px; font-family: inherit; }

/* ===== iOS Toggle Switch ===== */
.switch { position: relative; display: inline-block; width: 51px; height: 31px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #E9E9EB; border-radius: 31px; transition: .3s; }
.switch .slider:before { content: ""; position: absolute; height: 27px; width: 27px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.switch input:checked + .slider { background: #34C759; }
.switch input:checked + .slider:before { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: .45; cursor: not-allowed; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; }
  .hamburger { display: inline-flex; }
  .topbar .search { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .page-head h1 { font-size: 24px; }
}

/* ===== Focus & Accessibility ===== */
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Help Icon Tooltip ===== */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #E5E5EA; color: var(--color-text-secondary);
  font-size: 12px; font-weight: 600; font-style: normal;
  cursor: help; vertical-align: middle; margin-left: 6px;
  transition: background .2s, color .2s; position: relative; user-select: none; flex-shrink: 0;
}
.help-icon:hover { background: var(--color-brand); color: #fff; }
.help-icon::before { content: '?'; line-height: 1; }

.help-icon .tip-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px; max-width: 320px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
  padding: 12px 14px; font-size: 13px; line-height: 1.6;
  color: var(--color-text-primary); font-weight: 400; font-style: normal; text-align: left;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 1000; pointer-events: none;
}
.help-icon .tip-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(255,255,255,.95);
}
.help-icon .tip-bubble::before {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: rgba(0,0,0,.08); margin-top: -1px;
}
.help-icon:hover .tip-bubble, .help-icon.active .tip-bubble {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.help-icon .tip-title { font-weight: 700; font-size: 14px; color: var(--color-text-primary); margin-bottom: 4px; }
.help-icon .tip-text { color: var(--color-text-secondary); font-size: 13px; line-height: 1.6; }
.help-icon .tip-list { margin: 6px 0 0; padding-left: 16px; color: var(--color-text-secondary); }
.help-icon .tip-list li { margin-bottom: 2px; }
.help-icon .tip-link { display: inline-block; margin-top: 6px; color: var(--color-brand); text-decoration: none; font-size: 13px; pointer-events: auto; }
.help-icon .tip-link:hover { text-decoration: underline; }

.help-icon.tip-bottom .tip-bubble { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
.help-icon.tip-bottom .tip-bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(255,255,255,.95); }
.help-icon.tip-bottom .tip-bubble::before { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(0,0,0,.08); margin-top: 0; margin-bottom: -1px; }
.help-icon.tip-bottom:hover .tip-bubble, .help-icon.tip-bottom.active .tip-bubble { transform: translateX(-50%) translateY(0); }

.card-head h2 .help-icon, h2 .help-icon, h3 .help-icon { width: 18px; height: 18px; font-size: 12px; }

/* ===== Scrollbar — iOS style ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* ===== Selection ===== */
::selection { background: rgba(0,122,255,.15); }

/* ===================================================================
   iOS 交互效果系统
   =================================================================== */

/* ===== 1. 按钮按压效果 (Button Press Feedback) ===== */
.btn {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.btn:active {
  transform: scale(.95);
  transition: transform .08s;
}
.btn:active::after { opacity: 1; }
.btn.primary:active { opacity: .75; box-shadow: 0 1px 4px rgba(0,122,255,.15); }
.btn.ghost:active { background: rgba(0,122,255,.14); }
.btn.danger:active { opacity: .75; }
.btn.sm:active { transform: scale(.92); }

/* ===== 2. 导航项 iOS 交互 ===== */
.nav-item {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: background .15s, color .15s, transform .1s;
}
.nav-item:active {
  transform: scale(.97);
  background: rgba(0,122,255,.08);
}
.nav-item.active {
  animation: nav-active-pulse .35s ease;
}
@keyframes nav-active-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 2px 12px rgba(0,122,255,.25); }
  100% { transform: scale(1); }
}

/* ===== 3. 面板切换动画 (Panel Transition) ===== */
.panel.active {
  animation: panel-fade-in .35s cubic-bezier(.32,.72,0,1);
}
@keyframes panel-fade-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===== 4. 卡片点击效果 (Card Tap) ===== */
.card, .kpi, .chart-box, .flow-card {
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s;
}
.card:active, .kpi:active, .flow-card:active {
  transform: scale(.99);
  box-shadow: var(--shadow-sm);
}

/* ===== 5. 表格行交互 (Table Row Tap) ===== */
tbody tr {
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
tbody tr:active {
  background: rgba(0,122,255,.04) !important;
}

/* ===== 6. Toast 弹入动画 ===== */
.toast.show {
  animation: toast-bounce-in .4s cubic-bezier(.32,1.5,.72,1);
}
@keyframes toast-bounce-in {
  0% { opacity: 0; transform: translate(-50%, 30px) scale(.9); }
  50% { opacity: 1; transform: translate(-50%, -8px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ===== 7. Overlay 渐入 (Overlay Fade) ===== */
.overlay.show {
  animation: overlay-fade-in .25s ease;
}
@keyframes overlay-fade-in {
  0% { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  100% { opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}

/* ===== 8. 输入框聚焦效果 (Input Focus Ring) ===== */
.field input, .field select, .field textarea {
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,122,255,.12), 0 1px 2px rgba(0,0,0,.02);
}
.field input:active, .field select:active {
  border-color: rgba(0,122,255,.3);
}

/* ===== 9. 侧边栏滑动 (Sidebar Slide) ===== */
.sidebar {
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.sidebar .brand {
  transition: padding .2s;
}
.sidebar nav {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ===== 10. 头像/图标按钮交互 ===== */
.icon-btn:active {
  transform: scale(.88);
  background: rgba(118,118,128,.18);
  transition: transform .08s, background .08s;
}
.avatar {
  transition: transform .15s;
}
.avatar:active { transform: scale(.92); }

/* ===== 11. iOS Toggle Switch 动画 ===== */
.switch .slider { transition: background .3s; }
.switch .slider:before {
  transition: transform .3s cubic-bezier(.32,1.5,.72,1);
}
.switch:active .slider:before {
  transform: scale(1.1);
}

/* ===== 12. Tag/Badge 微交互 ===== */
.tag { transition: transform .12s; }
.tag:active { transform: scale(.92); }
.nav-item .badge { transition: transform .2s; }
.nav-item:active .badge { transform: scale(1.15); }

/* ===== 13. 滚动回弹效果 (Scroll Bounce) ===== */
/* ⚠️ 这里不能用 overscroll-behavior: contain，必须用 auto。
   原因：CSS 溢出规范规定——当一轴的 overflow 为非 visible 时，另一轴的 visible 会「计算为 auto」。
   因此 .table-wrap{overflow-x:auto} 实际上是「两轴」滚动容器。
   叠加 contain 后：鼠标悬停在表格上时，垂直滚轮被 .table-wrap 吃掉，
   而 contain 会禁止滚动链回父级/页面 → 表现为「鼠标停在这类区域上下滚动，页面纹丝不动」。
   改为 auto 后，垂直滚动正常链回页面；表格自身的横向滚动不受影响。 */
.sidebar nav, .content, .table-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
}

/* ===== 13b. 横向滚动容器防护（举一反三，全项目通用） ===== */
/* 复用上面的教训，对本意「只做横向滚动」的容器显式按轴声明，防止复发：
   - 这些元素因 overflow-x:auto 而同时成为纵向滚动容器（一轴非 visible → 另一轴计算为 auto）；
   - overscroll-behavior-x: contain → 横向滚动留在容器内，不干扰页面；
   - overscroll-behavior-y: auto   → 纵向滚动必须能链回页面。
   即使将来有人误加 overscroll-behavior: contain，纵向也不会被截断。
   覆盖：.table-wrap(各后台表格)、.sub-tabs(创作者小程序横向选项卡条)、
        .formula-card(平台后台公式卡)、.flow-container(基准文档流程图)、
        .sidebar nav(侧边栏导航)。 */
.table-wrap,
.sub-tabs,
.formula-card,
.flow-container,
.sidebar nav {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* ===== 14. 链接交互 ===== */
a {
  -webkit-tap-highlight-color: transparent;
  transition: opacity .12s;
}
a:active { opacity: .55; }

/* ===== 15. 分段控制 (Segmented Control) — 前端模拟 ===== */
.segmented {
  display: inline-flex;
  background: rgba(118,118,128,.12);
  border-radius: 9px;
  padding: 2px;
  gap: 0;
  position: relative;
}
.segmented .seg-item {
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  border-radius: 7px;
  cursor: pointer;
  transition: color .2s;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.segmented .seg-item.active { color: var(--color-brand); }
.segmented .seg-indicator {
  position: absolute;
  top: 2px; bottom: 2px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  transition: transform .3s cubic-bezier(.32,.72,0,1), width .3s cubic-bezier(.32,.72,0,1);
  z-index: 0;
}

/* ===== 16. iOS Sheet/Modal 动画 ===== */
.ios-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.15);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,0,1);
  z-index: 100;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ios-sheet.show { transform: translateY(0); }
.ios-sheet::before {
  content: '';
  display: block;
  width: 36px; height: 5px;
  background: #E5E5EA;
  border-radius: 3px;
  margin: 6px auto 0;
}

/* ===== 17. iOS 下拉刷新指示器 ===== */
.pull-refresh {
  position: relative;
  min-height: 40px;
  text-align: center;
}
.pull-refresh .pr-icon {
  display: inline-block;
  width: 24px; height: 24px;
  border: 2px solid #E5E5EA;
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 8px 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 18. 骨架屏 (Skeleton Loading) ===== */
.skeleton {
  background: linear-gradient(90deg, #F2F2F7 25%, #E5E5EA 50%, #F2F2F7 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== 19. 弹性回弹 (Elastic Bounce) ===== */
.ios-bounce {
  animation: ios-bounce .5s cubic-bezier(.32,1.8,.72,1);
}
@keyframes ios-bounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== 20. 滑动渐入 (Slide Fade In) ===== */
.ios-slide-in {
  animation: ios-slide-in .4s cubic-bezier(.32,.72,0,1);
}
@keyframes ios-slide-in {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ===== 21. Top Bar 滚动模糊增强 ===== */
.topbar {
  transition: box-shadow .3s, background .3s;
}
.topbar.scrolled {
  box-shadow: 0 0.5px 0 rgba(0,0,0,.08);
  background: rgba(249,249,251,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* 滚动性能优化：滚动期间临时关闭顶栏毛玻璃。
   sticky 顶栏的 backdrop-filter 会在内容滚过时逐帧重算模糊，是滚动卡顿的主因；
   滚动停止后恢复。用不透明底色兜底，避免视觉跳变。 */
html.is-scrolling .topbar,
html.is-scrolling .topbar.scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-scrolling .topbar { background: rgba(255,255,255,.96); }
html.is-scrolling .topbar.scrolled { background: rgba(249,249,251,.96); }

/* ===== 22. 涟漪效果 (Ripple) ===== */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: ripple-expand .5s ease-out;
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ===== 23. Chip 选择交互 ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: #F2F2F7;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(.94); }
.chip input:checked ~ .chip-label,
.chip:has(input:checked) {
  background: rgba(0,122,255,.12);
  color: var(--color-brand);
}

/* ===== 24. 大标题滚动隐藏 (Large Title Collapse) ===== */
.page-head h1 {
  transition: font-size .3s cubic-bezier(.32,.72,0,1), opacity .2s;
}
.page-head.collapsed h1 { font-size: 17px; opacity: .9; }
.page-head.collapsed .sub { display: none; }

/* ===== 25. 禁用态 ===== */
.btn:disabled, .nav-item.disabled {
  opacity: .35;
  pointer-events: none;
}

/* ===== 26. 减少动画偏好 ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===================================================================
   iOS 弹窗系统 (Alert / Confirm / Prompt / ActionSheet)
   遵循 UIAlertController 规范
   =================================================================== */

/* ---- 遮罩层 ---- */
.ios-dialog-overlay {
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: ios-overlay-in .22s ease;
}
.ios-dialog-overlay.sheet { align-items: flex-end; padding: 10px; }
@keyframes ios-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.ios-dialog-overlay.out { animation: ios-overlay-out .2s ease forwards; }
@keyframes ios-overlay-out { to { opacity: 0; } }

/* ---- 居中弹窗 (Alert / Confirm / Prompt) ---- */
.ios-alert {
  width: 270px; max-width: 90vw;
  background: rgba(252,252,253,.96);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  animation: ios-alert-in .28s cubic-bezier(.32,1.35,.64,1);
}
@keyframes ios-alert-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.ios-alert.out { animation: ios-alert-out .16s ease forwards; }
@keyframes ios-alert-out { to { opacity: 0; transform: scale(.96); } }

.ios-alert-title {
  font-size: 17px; font-weight: 600; color: #000;
  padding: 19px 16px 0; letter-spacing: -.02em; line-height: 1.35;
}
.ios-alert-msg {
  font-size: 13px; line-height: 1.45; color: rgba(0,0,0,.88);
  padding: 4px 16px 15px; white-space: pre-line;
  max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.ios-alert-msg:first-child { padding-top: 19px; }
.ios-alert-title + .ios-alert-msg { padding-top: 3px; }

.ios-alert-input {
  display: block; margin: 2px 16px 15px; width: calc(100% - 32px);
  padding: 8px 10px; font-size: 14px; text-align: left;
  border: none; border-radius: 8px; background: rgba(118,118,128,.12);
  font-family: inherit; outline: none; color: #000;
  transition: box-shadow .2s;
}
.ios-alert-input:focus { box-shadow: 0 0 0 2px rgba(0,122,255,.3); }

.ios-alert-actions { display: flex; border-top: .5px solid rgba(60,60,67,.29); }
.ios-alert-btn {
  flex: 1; min-height: 44px; padding: 10px 8px;
  background: transparent; border: none; cursor: pointer;
  font-size: 17px; font-family: inherit; color: #007AFF;
  letter-spacing: -.02em; line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.ios-alert-btn + .ios-alert-btn { border-left: .5px solid rgba(60,60,67,.29); }
.ios-alert-btn:active { background: rgba(0,0,0,.06); }
.ios-alert-btn.primary { font-weight: 600; }
.ios-alert-btn.destructive { color: #FF3B30; }

/* ---- 底部动作面板 (Action Sheet) ---- */
.ios-sheet-group {
  width: 100%; max-width: 420px; margin: 0 auto 8px;
  background: rgba(250,250,252,.94);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 14px; overflow: hidden;
  animation: ios-sheet-in .32s cubic-bezier(.32,.72,0,1);
}
.ios-dialog-overlay.out .ios-sheet-group { animation: ios-sheet-out .25s ease forwards; }
@keyframes ios-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ios-sheet-out { to { transform: translateY(110%); } }

.ios-sheet-title {
  font-size: 13px; color: #8E8E93; text-align: center;
  padding: 12px 16px 10px; white-space: pre-line; line-height: 1.4;
}
.ios-sheet-item {
  display: flex; align-items: center; justify-content: center;
  min-height: 57px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  font-size: 20px; color: #007AFF; font-family: inherit; letter-spacing: -.02em;
  border-bottom: .5px solid rgba(60,60,67,.29);
  -webkit-tap-highlight-color: transparent; transition: background .12s;
}
.ios-sheet-item:last-child { border-bottom: none; }
.ios-sheet-item:active { background: rgba(0,0,0,.06); }
.ios-sheet-item.destructive { color: #FF3B30; }

.ios-sheet-cancel {
  display: flex; align-items: center; justify-content: center;
  min-height: 57px; width: 100%; max-width: 420px; margin: 0 auto;
  background: #FFFFFF;
  border: none; border-radius: 14px; cursor: pointer;
  font-size: 20px; font-weight: 600; color: #007AFF; font-family: inherit;
  box-shadow: 0 1px 12px rgba(0,0,0,.08);
  animation: ios-sheet-in .36s cubic-bezier(.32,.72,0,1);
  -webkit-tap-highlight-color: transparent; transition: background .12s;
}
.ios-sheet-cancel:active { background: #F2F2F7; }

/* ===================================================================
   原生控件 iOS 化
   =================================================================== */

/* ---- 下拉选择 select：iOS 分组行样式 ---- */
select {
  -webkit-appearance: none; appearance: none;
  padding: 9px 32px 9px 12px !important;
  border: 1px solid var(--color-border-default); border-radius: 10px;
  background: #FFFFFF
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.7.6L6 4.9 10.3.6 11.7 2 6 7.7.3 2z' fill='%238E8E93'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  font-size: 14px; font-family: inherit; color: var(--color-text-primary);
  outline: none; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
select:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(0,122,255,.12); }
select:active { background-color: rgba(118,118,128,.06); }

/* ---- 复选框 checkbox：iOS 蓝色圆角对勾 ---- */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin: 0;
  border: 1.5px solid #C7C7CC; border-radius: 6px;
  background: #FFFFFF; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s, border-color .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
input[type="checkbox"]:active { transform: scale(.9); }
input[type="checkbox"]:checked {
  background: #007AFF; border-color: #007AFF;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.2 5.2l4 4.2L12.8 1.4' fill='none' stroke='%23FFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  border-color: transparent;
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* ---- 单选框 radio：iOS 蓝色圆点 ---- */
input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin: 0;
  border: 1.5px solid #C7C7CC; border-radius: 50%;
  background: #FFFFFF; cursor: pointer; flex-shrink: 0;
  transition: border-color .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
}
input[type="radio"]:active { transform: scale(.9); }
input[type="radio"]:checked {
  border-color: #007AFF;
  background: radial-gradient(circle, #007AFF 0 42%, transparent 46%);
}
input[type="radio"]:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* ---- 文本输入统一 iOS 细节 ---- */
input[type="text"], input[type="search"], input[type="email"], input[type="number"],
input[type="tel"], input[type="date"], input[type="time"], textarea {
  -webkit-tap-highlight-color: transparent;
  border-radius: 10px;
}
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration { display: none; }
textarea { resize: vertical; min-height: 72px; }

/* ---- 数字输入箭头隐藏（iOS 无此控件） ---- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---- 滑杆 range：iOS 滑块样式 ---- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: rgba(118,118,128,.2);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #FFFFFF; margin-top: -11px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.04);
  transition: transform .12s;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(118,118,128,.2); }
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.04);
}

/* ===================================================================
   统一反馈系统 · 空状态 / 加载态 / 校验 / 提示条
   =================================================================== */

/* ---- 空状态 ---- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
  color: var(--color-text-tertiary);
}
.empty-state.compact { padding: 28px 16px; }
.empty-state .es-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-bg-subtle); color: var(--color-neutral-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 12px;
}
.empty-state .es-title {
  font-size: var(--font-size-base); font-weight: 600;
  color: var(--color-text-secondary); margin-bottom: 4px;
}
.empty-state .es-desc {
  font-size: var(--font-size-xs); line-height: var(--line-height-normal);
  color: var(--color-text-tertiary); max-width: 320px;
}
.empty-state .es-action { margin-top: 14px; }

/* ---- 加载态 ---- */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: ios-spin .7s linear infinite;
}
.btn.ghost.is-loading::before, .btn.plain.is-loading::before {
  border-color: rgba(0,122,255,.25); border-top-color: var(--color-brand);
}
@keyframes ios-spin { to { transform: rotate(360deg); } }

.loading-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 28px; font-size: var(--font-size-xs); color: var(--color-text-tertiary);
}
.loading-row::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--color-neutral-100); border-top-color: var(--color-brand);
  animation: ios-spin .7s linear infinite;
}

/* ---- 表单校验 ---- */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--color-danger-500);
  background: #FFFBFA;
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(255,59,48,.14);
}
.field-error {
  display: none; align-items: center; gap: 4px;
  margin-top: 5px; font-size: var(--font-size-xs);
  color: var(--color-danger-600); line-height: var(--line-height-tight);
}
.field.has-error .field-error { display: flex; }
/* 入驻页使用 .form-field 容器时同样生效 */
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-danger-500);
  background: #FFFBFA;
}
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(255,59,48,.14);
}
.form-field.has-error .field-error { display: flex; }
/* 协议勾选框（agree-box）错误态 */
.agree-box.has-error { border-color: var(--color-danger-500); background: var(--color-danger-50); }
.agree-box.has-error .field-error { display: flex; margin-top: 8px; }
.field-hint {
  margin-top: 5px; font-size: var(--font-size-xs);
  color: var(--color-text-tertiary); line-height: var(--line-height-tight);
}
.form-summary {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--color-danger-50); border: 1px solid var(--color-danger-200);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs); color: var(--color-danger-700);
  line-height: var(--line-height-normal);
}

/* ---- 提示条（页面内常驻说明，如合规要求）---- */
.inline-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-md);
  font-size: var(--font-size-xs); line-height: var(--line-height-relaxed);
  border: 1px solid transparent; margin-bottom: 14px;
}
.inline-notice .in-icon { flex-shrink: 0; font-size: 14px; line-height: 1.4; }
.inline-notice.info { background: var(--color-primary-50); border-color: var(--color-primary-200); color: #0B4A8F; }
.inline-notice.warn { background: var(--color-warning-50); border-color: var(--color-warning-200); color: var(--color-warning-700); }
.inline-notice.success { background: var(--color-success-50); border-color: var(--color-success-200); color: var(--color-success-800); }
.inline-notice.error { background: var(--color-danger-50); border-color: var(--color-danger-200); color: var(--color-danger-700); }
.inline-notice strong { font-weight: 600; }

/* ---- Toast 增强：类型图标 + 撤销操作 ---- */
.toast { display: flex; align-items: center; gap: 10px; max-width: 90vw; }
.toast .t-icon { flex-shrink: 0; font-size: 14px; line-height: 1; }
.toast .t-msg { flex: 1; }
.toast .t-action {
  flex-shrink: 0; margin-left: 4px; padding: 4px 10px;
  background: rgba(255,255,255,.18); border: none; border-radius: 7px;
  color: #fff; font-size: var(--font-size-xs); font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .15s;
}
.toast .t-action:hover { background: rgba(255,255,255,.3); }
.toast.toast-success { background: rgba(30,30,32,.88); }
.toast.toast-error { background: rgba(255,59,48,.94); }
.toast.toast-warning { background: rgba(255,149,0,.94); }
.toast.toast-info { background: rgba(30,30,32,.88); }

/* ===================================================================
   看板与数据展示
   =================================================================== */

/* KPI：主指标强调 + 统一节奏 */
.kpi-grid { gap: 14px; }
.kpi {
  padding: 18px 20px;
  border: 1px solid var(--color-border-light);
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}
.kpi:hover { transform: none; border-color: var(--color-border-default); box-shadow: var(--shadow-sm); }
.kpi::before { width: 3px; border-radius: 3px 0 0 3px; background: var(--color-primary-300); }
.kpi.is-primary {
  background: linear-gradient(180deg, var(--color-primary-50) 0%, #FFFFFF 62%);
  border-color: var(--color-primary-200);
}
.kpi.is-primary::before { background: var(--color-brand); }
.kpi .label {
  font-size: var(--font-size-xs); font-weight: 500;
  color: var(--color-text-tertiary); letter-spacing: 0;
}
.kpi .value {
  font-size: 26px; font-weight: 700; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kpi.is-primary .value { font-size: 30px; font-weight: 800; }
.kpi .value small { font-size: var(--font-size-xs); font-weight: 500; margin-left: 2px; }
.kpi .delta { font-size: var(--font-size-2xs); margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi .delta.neutral { color: var(--color-text-tertiary); }

/* 分区标题：统一层级与对齐 */
.card h2, .chart-box h2 {
  font-size: var(--font-size-lg); font-weight: 600;
  letter-spacing: -.01em; line-height: var(--line-height-tight);
}
.card h3 { font-size: var(--font-size-base); font-weight: 600; }
.card .card-head { align-items: flex-start; gap: 12px; }
.card .card-head .head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 图表容器：网格线、轴标签、图例 */
.chart-box { border: 1px solid var(--color-border-light); box-shadow: none; }
.chart-box .chart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.chart-box .chart-head .chart-unit {
  font-size: var(--font-size-2xs); color: var(--color-text-tertiary);
}
.chart {
  padding: 4px 0 0;
  border-bottom: 1px solid var(--color-border-default);
}
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px; font-size: var(--font-size-2xs); color: var(--color-text-secondary);
}
.chart-legend .lg { display: flex; align-items: center; gap: 5px; }
.chart-legend .lg i {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
.chart-axis {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 10px; color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* 表格：密度、对齐、数值右对齐 */
.table-wrap { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: #fff; }
table { min-width: 640px; }
thead th {
  font-size: var(--font-size-2xs); font-weight: 600;
  letter-spacing: .02em; color: var(--color-text-tertiary);
  padding: 10px 14px; background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-default);
  text-transform: none; white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--color-border-light); }
tbody tr:hover { background: #FAFAFC; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .cell-meta { font-size: var(--font-size-2xs); color: var(--color-text-tertiary); margin-top: 2px; }
.table-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border-light); background: #FCFCFD;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* 工具栏：筛选与操作一行对齐 */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.toolbar .toolbar-spacer { flex: 1; }
.toolbar .field { margin-bottom: 0; }
.toolbar .field label { margin-bottom: 2px; font-size: var(--font-size-2xs); }

/* 状态圆点标签 */
.status-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 5px; vertical-align: 1px;
}
.status-dot.ok { background: var(--color-success-500); }
.status-dot.warn { background: var(--color-warning-500); }
.status-dot.err { background: var(--color-danger-500); }
.status-dot.idle { background: var(--color-neutral-300); }

/* ===================================================================
   角色切换器（跨端跳转）
   =================================================================== */
.system-switch { position: relative; }
.system-switch .switch-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-full);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-default);
  font-size: var(--font-size-xs); color: var(--color-text-primary);
  cursor: pointer; transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.system-switch .switch-trigger:hover { background: #EDEDF2; border-color: var(--color-border-strong); }
.system-switch .switch-trigger .caret { font-size: 9px; color: var(--color-text-tertiary); }
.system-switch .system-menu { min-width: 232px; max-height: 76vh; overflow-y: auto; padding: 6px; }
.system-switch .system-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}
.system-switch .system-menu a .mi-desc {
  display: block; font-size: 10px; color: var(--color-text-tertiary); font-weight: 400;
}
.system-switch .system-menu a.is-current {
  background: var(--color-primary-50); color: var(--color-primary-600); font-weight: 600;
}
.system-switch .system-menu a.is-current::after {
  content: '当前'; margin-left: auto; font-size: 10px; font-weight: 500;
  color: var(--color-primary-500);
}
.system-switch .system-menu .group-title {
  font-size: 10px; color: var(--color-text-tertiary);
  padding: 8px 10px 4px; font-weight: 600; letter-spacing: .02em;
}
.system-switch .system-menu .divider { height: 1px; background: var(--color-border-light); margin: 4px 6px; }

/* ===================================================================
   响应式补充
   =================================================================== */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-head .head-actions { width: 100%; }
}
@media (max-width: 720px) {
  .content { padding: 14px; }
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar .title { font-size: var(--font-size-base); }
  .card, .chart-box { padding: 16px; border-radius: var(--radius-md); }
  .card-head { flex-direction: column; }
  .toolbar { gap: 8px; }
  .toolbar .field { flex: 1 1 140px; }
  .kpi { padding: 14px 16px; }
  .kpi .value { font-size: 22px; }
  .kpi.is-primary .value { font-size: 26px; }
  .table-wrap { border-radius: var(--radius-md); }
  .empty-state { padding: 36px 16px; }
  .toast { left: 16px; right: 16px; bottom: 20px; transform: translateY(16px); max-width: none; }
  .toast.show { transform: translateY(0); }
  .system-switch .system-menu { right: 0; left: auto; min-width: 220px; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 22px; }
}

/* 角色切换器：移动端顶栏与无导航栏页面的形态 */
.appbar .system-switch .switch-trigger,
.nav-cta .system-switch .switch-trigger {
  padding: 4px 9px; font-size: var(--font-size-2xs); background: rgba(118,118,128,.1);
}
.appbar .system-switch .system-menu { right: 0; left: auto; }

.system-switch.fab-mode {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
}
.system-switch.fab-mode .switch-trigger {
  background: rgba(255,255,255,.94); border-color: var(--color-border-default);
  box-shadow: var(--shadow-md); padding: 8px 14px; font-weight: 500;
}
.system-switch.fab-mode .system-menu {
  bottom: calc(100% + 8px); top: auto; right: 0; left: auto;
}
@media (max-width: 480px) {
  .system-switch.fab-mode { right: 12px; bottom: 12px; }
  .system-switch.fab-mode .switch-trigger { font-size: var(--font-size-2xs); padding: 7px 12px; }
}