/* ============================================================================
   界面风格 · iOS（2026-10-26 用户要求：参考苹果 iOS 的界面风格与动画）
   —— 只在 body.ui-ios 下生效；默认经典风格（不加载本文件任何规则）完全不受影响。
   切换入口：设置 → 界面风格（随时可切回经典）
   ========================================================================== */

/* ---------- 基础：字体 / 背景 / 圆角 / 阴影变量 ---------- */
body.ui-ios {
  --ios-blue: #0A84FF;
  --ios-blue-ink: #0060DF;
  --ios-gray-bg: #F2F2F7;
  --ios-card: #FFFFFF;
  --ios-sep: rgba(60, 60, 67, .14);
  --ios-text: #1C1C1E;
  --ios-text-2: #3A3A3C;
  --ios-text-3: #8E8E93;
  --ios-radius: 16px;
  --ios-radius-sm: 10px;
  --ios-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --ios-shadow-lg: 0 12px 40px rgba(0, 0, 0, .14);
  --bg: var(--ios-gray-bg);
  --text: var(--ios-text);
  --line: var(--ios-sep);
  --line-soft: rgba(60, 60, 67, .08);
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;
  background: var(--ios-gray-bg);
}

/* ---------- 左侧导航：浅色毛玻璃 + 蓝色选中胶囊 ---------- */
body.ui-ios .sidebar {
  width: 164px;
  background: rgba(249, 249, 251, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--ios-sep);
  color: var(--ios-text-2);
}
body.ui-ios .brand { height: 68px; padding: 0 10px; }
body.ui-ios .brand .name { color: var(--ios-text); }
body.ui-ios .brand .ver { color: var(--ios-text-3); }
body.ui-ios .brand .logo { border-radius: 12px; box-shadow: 0 4px 14px rgba(10, 132, 255, .35); }
body.ui-ios .nav { padding: 6px 8px; gap: 2px; }
body.ui-ios .nav a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  height: 40px; border-radius: 12px; color: var(--ios-text-2); font-size: 13px; font-weight: 500;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
body.ui-ios .nav a .ic { background: rgba(120, 120, 128, .12); color: var(--ios-text-2); border-radius: 8px; }
body.ui-ios .nav a:hover { background: rgba(120, 120, 128, .10); color: var(--ios-text); }
body.ui-ios .nav a.on {
  background: rgba(10, 132, 255, .12); color: var(--ios-blue-ink); font-weight: 600;
}
body.ui-ios .nav a.on::before { display: none; }
body.ui-ios .nav a.on .ic { background: var(--ios-blue); color: #fff; }
body.ui-ios .nav a.on .ic svg { stroke: #fff; }
body.ui-ios .nav .badge { background: rgba(10, 132, 255, .14); color: var(--ios-blue-ink); border-color: rgba(10, 132, 255, .22); }
body.ui-ios .side-foot { color: var(--ios-text-3); border-top-color: var(--ios-sep); }

/* ---------- 顶栏 / 面包屑 ---------- */
body.ui-ios .topbar { background: rgba(249, 249, 251, .78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--ios-sep); }
body.ui-ios .crumb { color: var(--ios-text-3); }

/* ---------- 卡片 / 区块 ---------- */
body.ui-ios .card {
  background: var(--ios-card); border: 1px solid rgba(60, 60, 67, .06);
  border-radius: var(--ios-radius); box-shadow: var(--ios-shadow);
  transition: box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
body.ui-ios .card-h { border-bottom: 1px solid var(--ios-sep); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
body.ui-ios .card-b { color: var(--ios-text-2); }

/* ---------- 按钮：iOS 胶囊 + 按压回弹 ---------- */
body.ui-ios .btn {
  border-radius: 10px; border-color: rgba(60, 60, 67, .16); background: #fff; color: var(--ios-text);
  font-weight: 500; transition: transform .14s cubic-bezier(.2, .8, .2, 1), background .18s ease, box-shadow .2s ease;
}
body.ui-ios .btn:hover { background: #F7F7FA; border-color: rgba(60, 60, 67, .22); }
body.ui-ios .btn:active { transform: scale(.96); }
body.ui-ios .btn.pri {
  background: linear-gradient(180deg, #3D9BFF 0%, #0A84FF 100%);
  border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(10, 132, 255, .28);
}
body.ui-ios .btn.pri:hover { filter: brightness(1.04); background: linear-gradient(180deg, #3D9BFF 0%, #0A84FF 100%); }
body.ui-ios .btn.pri.btn-strong { background: linear-gradient(180deg, #3D9BFF 0%, #0A84FF 100%); }
body.ui-ios .btn.warn { background: rgba(255, 159, 10, .12); border-color: rgba(255, 159, 10, .28); color: #C93400; }
body.ui-ios .btn.danger { background: linear-gradient(180deg, #FF5A52, #E03A32); border-color: #C9302A; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(224, 58, 50, .30); }
body.ui-ios .btn.danger:hover { background: linear-gradient(180deg, #FF6B63, #E8433A); border-color: #B92B25; color: #fff; filter: none; }

/* ---------- 表单 ---------- */
body.ui-ios .inp, body.ui-ios select.inp, body.ui-ios textarea.inp {
  background: #fff; border: 1px solid rgba(60, 60, 67, .14); border-radius: var(--ios-radius-sm);
  color: var(--ios-text); transition: box-shadow .18s ease, border-color .18s ease;
}
body.ui-ios .inp:focus, body.ui-ios select.inp:focus, body.ui-ios textarea.inp:focus {
  outline: none; border-color: var(--ios-blue); box-shadow: 0 0 0 3.5px rgba(10, 132, 255, .22);
}
body.ui-ios .inp.ro { background: #F7F7FA; color: var(--ios-text-3); }
body.ui-ios .fld > label { color: var(--ios-text-3); font-size: 12px; }

/* ---------- 表格：分组列表风格 ---------- */
body.ui-ios .t th { color: var(--ios-text-3); font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: .01em; border-bottom: 1px solid var(--ios-sep); background: transparent; }
body.ui-ios .t td { border-bottom: 1px solid var(--ios-sep); }
body.ui-ios .t tbody tr { transition: background .16s ease; }
body.ui-ios .t tbody tr:hover { background: rgba(10, 132, 255, .045); }
body.ui-ios .t tbody tr:last-child td { border-bottom: none; }

/* ---------- tab / 分段控件 ---------- */
body.ui-ios .subtabs, body.ui-ios .tabs {
  background: rgba(120, 120, 128, .10); border: none; border-radius: 10px; padding: 3px; gap: 2px;
}
body.ui-ios .subtabs .st, body.ui-ios .tabs .tab {
  border: none !important; border-radius: 8px; margin: 0; padding: 7px 12px; color: var(--ios-text-2); font-weight: 500;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
body.ui-ios .subtabs .st.on, body.ui-ios .tabs .tab.on {
  background: #fff; color: var(--ios-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}
body.ui-ios .subtabs .st.off { opacity: .45; }

/* ---------- 徽标 / 标签 / 提示条 ---------- */
body.ui-ios .pill, body.ui-ios .tag { border-radius: 999px; }
body.ui-ios .pill.blue { background: rgba(10, 132, 255, .12); color: var(--ios-blue-ink); }
body.ui-ios .pill.green { background: rgba(52, 199, 89, .14); color: #1F7A34; }
body.ui-ios .pill.amber, body.ui-ios .pill.warn { background: rgba(255, 159, 10, .16); color: #A8560A; }
body.ui-ios .pill.gray { background: rgba(120, 120, 128, .14); color: var(--ios-text-2); }
body.ui-ios .syncbar { background: rgba(10, 132, 255, .07); border: none; border-radius: 12px; color: var(--ios-text-2); }
body.ui-ios .info-strip { background: rgba(120, 120, 128, .07); border: none; border-radius: 12px; color: var(--ios-text-3); }

/* ---------- 订单二级菜单 ---------- */
body.ui-ios .subnav { border: none; border-radius: var(--ios-radius); box-shadow: var(--ios-shadow); padding: 8px; }
body.ui-ios .subnav a { border-radius: 10px; color: var(--ios-text-2); }
body.ui-ios .subnav a.on { background: rgba(10, 132, 255, .12); color: var(--ios-blue-ink); font-weight: 600; }
body.ui-ios .subnav .sep { background: var(--ios-sep); }

/* ---------- 单据列表行 ---------- */
body.ui-ios .doc-row { border-radius: 12px; transition: background .16s ease, transform .16s ease; }
body.ui-ios .doc-row:hover { background: rgba(10, 132, 255, .05); }
body.ui-ios .doc-row.sel { background: rgba(10, 132, 255, .10); }

/* ---------- 弹窗：iOS 卡片式 + 弹出动画 ---------- */
body.ui-ios .overlay { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.ui-ios .modal {
  border-radius: 16px; border: none; box-shadow: var(--ios-shadow-lg);
  animation: ios-modal-in .34s cubic-bezier(.22, 1.2, .36, 1) both;
}
body.ui-ios .modal-h { border-bottom: 1px solid var(--ios-sep); }
body.ui-ios .modal-f { border-top: 1px solid var(--ios-sep); background: rgba(249, 249, 251, .6); border-radius: 0 0 20px 20px; }
body.ui-ios .toast { border-radius: 999px; background: rgba(28, 28, 30, .92); color: #fff; box-shadow: var(--ios-shadow-lg); animation: ios-toast-in .3s cubic-bezier(.22, 1.2, .36, 1) both; }

/* ---------- 工作台统计卡 ---------- */
body.ui-ios .stats .stat { border-radius: var(--ios-radius); background: #fff; box-shadow: var(--ios-shadow); border: 1px solid rgba(60, 60, 67, .06); }
body.ui-ios .stat .num, body.ui-ios .stat b { letter-spacing: -.02em; }

/* ---------- 动画特效 ---------- */
@keyframes ios-page-in {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ios-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ios-toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ios-card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
body.ui-ios .view.active { animation: ios-page-in .32s cubic-bezier(.2, .8, .2, 1) both; }
body.ui-ios .view.active > .card,
body.ui-ios .view.active > .stats > .stat,
body.ui-ios .view.active > .orders-body > .card {
  animation: ios-card-in .4s cubic-bezier(.2, .8, .2, 1) both;
}
body.ui-ios .view.active > .stats > .stat:nth-child(1) { animation-delay: .02s; }
body.ui-ios .view.active > .stats > .stat:nth-child(2) { animation-delay: .06s; }
body.ui-ios .view.active > .stats > .stat:nth-child(3) { animation-delay: .10s; }
body.ui-ios .view.active > .stats > .stat:nth-child(4) { animation-delay: .14s; }
body.ui-ios .t tbody tr { animation: ios-card-in .32s ease both; }
body.ui-ios .t tbody tr:nth-child(1) { animation-delay: .02s; }
body.ui-ios .t tbody tr:nth-child(2) { animation-delay: .05s; }
body.ui-ios .t tbody tr:nth-child(3) { animation-delay: .08s; }
body.ui-ios .t tbody tr:nth-child(4) { animation-delay: .11s; }
body.ui-ios .t tbody tr:nth-child(5) { animation-delay: .14s; }
body.ui-ios .t tbody tr:nth-child(6) { animation-delay: .17s; }
body.ui-ios .t tbody tr:nth-child(n+7) { animation-delay: .20s; }
body.ui-ios .doc-row { animation: ios-card-in .3s ease both; }
body.ui-ios .doc-row:nth-child(2) { animation-delay: .03s; }
body.ui-ios .doc-row:nth-child(3) { animation-delay: .06s; }
body.ui-ios .doc-row:nth-child(4) { animation-delay: .09s; }
body.ui-ios .doc-row:nth-child(n+5) { animation-delay: .12s; }




/* ---------- 页内切换：高亮滑块（2026-10-26 用户要求：只滑块滑过去，不整页动画） ---------- */
body.ui-ios .tabs, body.ui-ios .subtabs, body.ui-ios .subnav { position: relative; }
body.ui-ios .tab-slider {
  display: block; position: absolute; left: 3px; top: 3px; width: 0; height: 0;
  /* v1.2.77 修复：横向页签（.tabs / .subtabs）的滑块此前只有 width 没有 height（JS 只算 left/width），
     实际高度是 0 → 选中态的白底滑块从来没显示出来，只剩文字变色。这里给横向滑块一个可用高度。 */
  border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
  transition: left .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1),
              top .28s cubic-bezier(.2, .8, .2, 1), height .28s cubic-bezier(.2, .8, .2, 1);
  z-index: 0; pointer-events: none;
}
body.ui-ios .tabs .tab, body.ui-ios .subtabs .st, body.ui-ios .subnav a {
  position: relative; z-index: 1; background: transparent !important; box-shadow: none !important;
}
/* 横向页签滑块：撑满内边距后的高度（竖向 .subnav 由 JS 写 inline top/height，不受影响） */
body.ui-ios .tabs .tab-slider, body.ui-ios .subtabs .tab-slider { height: calc(100% - 6px); }
body.ui-ios .tabs .tab.on { color: var(--ios-text); font-weight: 600; }
/* 订单二级菜单：竖向滑块（蓝色淡底） */
body.ui-ios .subnav .tab-slider {
  left: 6px; right: 6px; width: auto; top: 0; height: 0;
  background: rgba(10, 132, 255, .12); box-shadow: none; border-radius: 10px;
}
body.ui-ios .subnav a.on { color: var(--ios-blue-ink); font-weight: 600; }

/* 页面切换优化（2026-10-27）：切换路由时不重播逐元素入场动画，只做 90ms 极轻淡入，避免闪屏 */
@keyframes ios-route-fade { from { opacity: .9; } to { opacity: 1; } }
body.ui-ios .view.active.ui-no-entry * { animation: none !important; }
body.ui-ios .view.active.ui-no-entry { animation: ios-route-fade .09s ease-out; }

/* 关闭动画（设置里可关） */
body.ui-no-anim *,
body.ui-no-anim *::before,
body.ui-no-anim *::after {
  animation-duration: .001s !important;
  animation-delay: 0s !important;
  transition-duration: .001s !important;
}

/* 减少动态（系统辅助功能） */
@media (prefers-reduced-motion: reduce) {
  body.ui-ios *, body.ui-ios *::before, body.ui-ios *::after {
    animation-duration: .001s !important; transition-duration: .001s !important;
  }
}