/* ============================================================================
   手机端统一样式（2026-10-18 改版，规范见 docs/superpowers/specs/2026-10-18-mobile-app-redesign-design.md）
   ----------------------------------------------------------------------------
   员工 App 模式（html.staff-app-mode / .layout.is-staff-app）与陪玩 App 模式（html.player-app-mode / .player-app）
   共用的令牌、Vant 主题变量与 m-* 组件。只写这几种作用域，所以不写宽度媒体查询、不写 !important；
   颜色从现有主题变量派生，深色模式与「强调色」设置继续生效。player_mobile_css_test.py 一并守护。
   ========================================================================== */

:is(html.staff-app-mode, html.player-app-mode) {
  --m-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --m-bg: var(--bg);
  --m-surface: var(--surface);
  --m-subtle: var(--surface-soft);
  --m-border: var(--border);
  --m-line: var(--line);
  --m-text: var(--text);
  --m-text-2: #5b6275;
  --m-text-3: #697083;
  --m-icon-muted: #8c92a3;
  --m-accent: var(--primary);
  --m-accent-text: var(--primary);
  --m-on-accent: var(--on-primary);
  --m-accent-soft: var(--blue-soft);
  --m-success: #047857; --m-success-bg: #e7f7ef;
  --m-warning: #b45309; --m-warning-bg: #fff4e0;
  --m-danger: #c81e1e;  --m-danger-bg: #fdecec;
  --m-info: #0369a1;    --m-info-bg: #e4f2fb;
  --m-special: #7c3aed; --m-special-bg: #f3edff;
  --m-neutral: #5b6275; --m-neutral-bg: #f0f1f5;
  --m-badge: #dc2626;
  --m-radius-sm: 8px;
  --m-radius-md: 12px;
  --m-radius-lg: 16px;
  --m-gutter: 16px;
  --m-gap: 12px;
  --m-tap: 44px;
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
  --m-shadow-bar: 0 -4px 16px rgba(15, 23, 42, .06);
  /* Vant 主题：与上面同一组颜色，组件库和自写组件看起来是一套 */
  --van-primary-color: var(--m-accent);
  --van-success-color: var(--m-success);
  --van-danger-color: var(--m-badge);
  --van-warning-color: var(--m-warning);
  --van-text-color: var(--m-text);
  --van-text-color-2: var(--m-text-2);
  --van-text-color-3: var(--m-text-3);
  --van-active-color: var(--m-subtle);
  --van-background: var(--m-bg);
  --van-background-2: var(--m-surface);
  --van-border-color: var(--m-border);
  --van-base-font: var(--m-font);
  --van-radius-md: var(--m-radius-md);
  --van-radius-lg: var(--m-radius-lg);
  --van-pull-refresh-head-text-color: var(--m-text-3);
  --van-loading-spinner-color: var(--m-text-3);
}
:is(html.staff-app-mode, html.player-app-mode)[data-theme="dark"] {
  --m-text-2: #c0c6d8;
  --m-text-3: #a1a8bf;
  --m-icon-muted: #7f879e;
  --m-accent-text: color-mix(in srgb, var(--primary) 55%, #fff);
  --m-success: #6ee7b7; --m-success-bg: #173a32;
  --m-warning: #fcd34d; --m-warning-bg: #3d3122;
  --m-danger: #fca5a5;  --m-danger-bg: #432630;
  --m-info: #7dd3fc;    --m-info-bg: #183449;
  --m-special: #c4b5fd; --m-special-bg: #30284a;
  --m-neutral: #c0c6d8; --m-neutral-bg: #262b42;
  --m-badge: #ef4444;
  --m-shadow: 0 0 0 1px var(--line);
  --m-shadow-bar: none;
}
:is(html.staff-app-mode, html.player-app-mode) body { font-family: var(--m-font); }
:is(html.staff-app-mode, html.player-app-mode) :is(.m-btn, .m-chip, .m-icon-btn, .m-action, .m-thumb, .m-copy-line, .m-link, .m-file):focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }

/* ---------------- 新版本提示（页面顶部） ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .update-bar { top: calc(var(--m-safe-top) + 8px); }

/* ---------------- 按钮 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  min-height: var(--m-tap); padding: 0 20px; border: 1px solid var(--m-border); border-radius: var(--m-radius-md);
  background: var(--m-surface); color: var(--m-text); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .15s ease, opacity .15s ease;
}
:is(html.staff-app-mode, html.player-app-mode) .m-btn:active { transform: scale(.97); }
:is(html.staff-app-mode, html.player-app-mode) .m-btn:disabled { opacity: .45; transform: none; cursor: not-allowed; }
:is(html.staff-app-mode, html.player-app-mode) .m-btn.is-primary { border-color: transparent; background: var(--m-accent); color: var(--m-on-accent); }
:is(html.staff-app-mode, html.player-app-mode) .m-btn.is-danger { border-color: var(--m-danger); color: var(--m-danger); }
:is(html.staff-app-mode, html.player-app-mode) .m-btn.is-soft { border-color: transparent; background: var(--m-accent-soft); color: var(--m-accent-text); }
:is(html.staff-app-mode, html.player-app-mode) .m-btn.is-block { display: flex; width: 100%; }
/* 小按钮 34px 高，热区用 ::after 上下各扩 5px 到 44px */
:is(html.staff-app-mode, html.player-app-mode) .m-btn.is-sm { min-height: 34px; padding: 0 12px; border-radius: var(--m-radius-sm); font-size: 13px; }
:is(html.staff-app-mode, html.player-app-mode) .m-btn.is-sm::after { content: ''; position: absolute; inset: -5px -2px; }
:is(html.staff-app-mode, html.player-app-mode) .m-icon-btn {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: var(--m-radius-md); background: var(--m-subtle); color: var(--m-text-2); cursor: pointer;
}
:is(html.staff-app-mode, html.player-app-mode) .m-icon-btn::after { content: ''; position: absolute; inset: -4px; }
:is(html.staff-app-mode, html.player-app-mode) .m-icon-btn.is-active { background: var(--m-accent-soft); color: var(--m-accent-text); }
:is(html.staff-app-mode, html.player-app-mode) .m-dot-badge {
  position: absolute; top: -4px; right: -4px; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--m-badge); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
:is(html.staff-app-mode, html.player-app-mode) .m-link { min-height: 32px; margin-left: 8px; padding: 0 4px; border: 0; background: transparent; color: var(--m-accent-text); font: inherit; font-size: 13px; cursor: pointer; }

/* ---------------- 文本与小块 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:is(html.staff-app-mode, html.player-app-mode) .m-meta { color: var(--m-text-3); font-size: 12px; line-height: 17px; font-variant-numeric: tabular-nums; }
:is(html.staff-app-mode, html.player-app-mode) .m-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--m-subtle); color: var(--m-text-2); font-size: 12px; font-weight: 400; line-height: 20px; white-space: nowrap; vertical-align: 2px; }
:is(html.staff-app-mode, html.player-app-mode) .m-tag.is-special { background: var(--m-special-bg); color: var(--m-special); font-weight: 500; }
:is(html.staff-app-mode, html.player-app-mode) .m-count { margin-left: 6px; color: var(--m-text-3); font-size: 13px; font-weight: 400; }
:is(html.staff-app-mode, html.player-app-mode) .m-note { margin: 0; padding: 8px 12px; border-radius: var(--m-radius-md); background: var(--m-info-bg); color: var(--m-info); font-size: 12px; line-height: 18px; }
:is(html.staff-app-mode, html.player-app-mode) .m-note.is-warn { background: var(--m-warning-bg); color: var(--m-warning); }
:is(html.staff-app-mode, html.player-app-mode) .m-block-line { display: block; }

/* ---------------- 状态标签（6 种色调） ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-status {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 22px; white-space: nowrap;
}
:is(html.staff-app-mode, html.player-app-mode) .m-status.is-success { background: var(--m-success-bg); color: var(--m-success); }
:is(html.staff-app-mode, html.player-app-mode) .m-status.is-warning { background: var(--m-warning-bg); color: var(--m-warning); }
:is(html.staff-app-mode, html.player-app-mode) .m-status.is-danger { background: var(--m-danger-bg); color: var(--m-danger); }
:is(html.staff-app-mode, html.player-app-mode) .m-status.is-info { background: var(--m-info-bg); color: var(--m-info); }
:is(html.staff-app-mode, html.player-app-mode) .m-status.is-special { background: var(--m-special-bg); color: var(--m-special); }
:is(html.staff-app-mode, html.player-app-mode) .m-status.is-neutral { background: var(--m-neutral-bg); color: var(--m-neutral); }

/* ---------------- 卡片 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-card { box-sizing: border-box; padding: 14px var(--m-gutter); border-radius: var(--m-radius-lg); background: var(--m-surface); box-shadow: var(--m-shadow); }
:is(html.staff-app-mode, html.player-app-mode) .m-card-title { display: flex; align-items: baseline; margin: 0 0 6px; color: var(--m-text); font-size: 15px; font-weight: 600; line-height: 22px; }

/* ---------------- 搜索框与筛选 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-search { display: flex; align-items: center; gap: 8px; margin: 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-search-box {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 36px; padding: 0 10px 0 12px;
  border-radius: var(--m-radius-md); background: var(--m-subtle); color: var(--m-icon-muted);
}
:is(html.staff-app-mode, html.player-app-mode) .m-search-box input {
  flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--m-text); font: inherit; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
:is(html.staff-app-mode, html.player-app-mode) .m-search-box input::placeholder { color: var(--m-text-3); font-size: 14px; }
:is(html.staff-app-mode, html.player-app-mode) .m-search-box input::-webkit-search-cancel-button { display: none; }
:is(html.staff-app-mode, html.player-app-mode) .m-search-clear { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: -4px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--m-icon-muted); }
:is(html.staff-app-mode, html.player-app-mode) .m-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
:is(html.staff-app-mode, html.player-app-mode) .m-chips::-webkit-scrollbar { display: none; }
:is(html.staff-app-mode, html.player-app-mode) .m-chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none; height: 34px; padding: 0 12px;
  border: 1px solid var(--m-border); border-radius: 999px; background: var(--m-surface); color: var(--m-text-2);
  font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
}
/* 筛选片 34px 高，热区用 ::after 上下各扩 5px 到 44px（与陪玩 App 紧凑控件同一约定） */
:is(html.staff-app-mode, html.player-app-mode) .m-chip::after { content: ''; position: absolute; inset: -5px 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-chip.is-active { border-color: transparent; background: var(--m-accent-soft); color: var(--m-accent-text); font-weight: 500; }
:is(html.staff-app-mode, html.player-app-mode) .m-chip-count { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------- 列表：骨架、空状态、底部状态 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-list-items { display: flex; flex-direction: column; gap: var(--m-gap); }
:is(html.staff-app-mode, html.player-app-mode) .m-list-foot { display: flex; justify-content: center; min-height: 20px; padding: 12px 0 4px; color: var(--m-text-3); font-size: 12px; }
:is(html.staff-app-mode, html.player-app-mode) .m-list-loading { display: inline-flex; align-items: center; gap: 8px; }
:is(html.staff-app-mode, html.player-app-mode) .m-list-retry { min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--m-accent-text); font: inherit; font-size: 13px; }
:is(html.staff-app-mode, html.player-app-mode) .m-list-sentinel { height: 1px; }
:is(html.staff-app-mode, html.player-app-mode) .m-spinner { width: 14px; height: 14px; border: 2px solid var(--m-border); border-top-color: var(--m-text-3); border-radius: 50%; animation: m-spin .8s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }
:is(html.staff-app-mode, html.player-app-mode) .m-skeleton { display: flex; flex-direction: column; gap: var(--m-gap); }
:is(html.staff-app-mode, html.player-app-mode) .m-skeleton-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--m-radius-lg); background: var(--m-surface); box-shadow: var(--m-shadow); }
:is(html.staff-app-mode, html.player-app-mode) .m-skeleton-card i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--m-subtle) 25%, var(--m-line) 37%, var(--m-subtle) 63%); background-size: 400% 100%; animation: m-shimmer 1.4s ease infinite; }
:is(html.staff-app-mode, html.player-app-mode) .m-skeleton-card .is-title { width: 60%; height: 16px; }
:is(html.staff-app-mode, html.player-app-mode) .m-skeleton-card .is-line { width: 90%; }
:is(html.staff-app-mode, html.player-app-mode) .m-skeleton-card .is-short { width: 40%; }
@keyframes m-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
:is(html.staff-app-mode, html.player-app-mode) .m-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; color: var(--m-text-3); text-align: center; }
:is(html.staff-app-mode, html.player-app-mode) .m-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 18px; background: var(--m-subtle); color: var(--m-icon-muted); }
:is(html.staff-app-mode, html.player-app-mode) .m-empty p { margin: 0; color: var(--m-text); font-size: 15px; font-weight: 500; }
:is(html.staff-app-mode, html.player-app-mode) .m-empty small { font-size: 13px; }
:is(html.staff-app-mode, html.player-app-mode) .m-empty .m-btn { margin-top: 10px; }
:is(html.staff-app-mode, html.player-app-mode) .m-empty.is-error .m-empty-icon { background: var(--m-danger-bg); color: var(--m-danger); }

/* ---------------- 信息行 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-kv { display: flex; align-items: flex-start; gap: 12px; min-height: 36px; padding: 8px 0; box-sizing: border-box; font-size: 14px; line-height: 20px; }
:is(html.staff-app-mode, html.player-app-mode) .m-kv + .m-kv { border-top: 1px solid var(--m-line); }
:is(html.staff-app-mode, html.player-app-mode) .m-kv-label { flex: none; width: 72px; color: var(--m-text-2); }
:is(html.staff-app-mode, html.player-app-mode) .m-kv-value { flex: 1; min-width: 0; color: var(--m-text); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
:is(html.staff-app-mode, html.player-app-mode) .m-kv-copy { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -4px -6px -4px -6px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--m-icon-muted); }
:is(html.staff-app-mode, html.player-app-mode) .m-kv-block { flex-wrap: wrap; }
:is(html.staff-app-mode, html.player-app-mode) .m-remark-edit { display: flex; flex-direction: column; gap: 8px; flex: 1 1 100%; }
:is(html.staff-app-mode, html.player-app-mode) .m-remark-edit textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
:is(html.staff-app-mode, html.player-app-mode) .m-inline-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------- 底部操作菜单 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .modal-body.m-action-sheet { display: flex; flex-direction: column; padding: 0 0 8px; }
:is(html.staff-app-mode, html.player-app-mode) .m-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 16px;
  border: 0; border-top: 1px solid var(--m-line); background: transparent; color: var(--m-text); font: inherit; font-size: 16px; cursor: pointer;
}
:is(html.staff-app-mode, html.player-app-mode) .m-action:first-child { border-top: 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-action:active { background: var(--m-subtle); }
:is(html.staff-app-mode, html.player-app-mode) .m-action.is-danger { color: var(--m-danger); }
:is(html.staff-app-mode, html.player-app-mode) .m-action.is-primary { color: var(--m-accent-text); font-weight: 500; }
:is(html.staff-app-mode, html.player-app-mode) .m-action:disabled { opacity: .4; }
:is(html.staff-app-mode, html.player-app-mode) .m-action small { color: var(--m-text-3); font-size: 12px; }

/* ---------------- 二级页（AppModal page 模式、size="xl" 详情）：全屏、从右侧滑入、左上角返回 ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page { align-items: stretch; top: var(--pa-vvt, 0px); bottom: auto; height: var(--pa-vvh, 100dvh); padding: 0; background: var(--m-bg); animation: none; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal {
  width: 100%; height: 100%; max-height: none; border-radius: 0; background: var(--m-bg); box-shadow: none;
  animation: m-page-in .24s cubic-bezier(.2, .8, .2, 1) both;
}
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal::before { display: none; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-head {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: calc(44px + var(--m-safe-top));
  padding: var(--m-safe-top) 52px 0; border-bottom: 1px solid var(--m-line); background: var(--m-surface); font-size: 17px; font-weight: 600;
}
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-head .close-button { position: absolute; left: 4px; bottom: 0; width: 44px; height: 44px; border: 0; background: transparent; color: var(--m-text); }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-head .close-glyph { display: none; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-head .modal-back-glyph { display: block; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-body { flex: 1; min-height: 0; max-height: none; padding: var(--m-gap); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-foot {
  display: flex; gap: 12px; padding: 10px var(--m-gutter) calc(10px + var(--m-safe-bottom)); border-top: 0; border-radius: 0;
  background: var(--m-surface); box-shadow: var(--m-shadow-bar);
}
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-foot:empty { display: none; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-foot > .btn { flex: 1 1 0; min-height: 44px; justify-content: center; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-foot > .btn.m-foot-more { flex: 0 0 auto; padding: 0 16px; }
@keyframes m-page-in { from { transform: translate3d(32%, 0, 0); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal { animation: none; }
  :is(html.staff-app-mode, html.player-app-mode) .m-spinner, :is(html.staff-app-mode, html.player-app-mode) .m-skeleton-card i { animation: none; }
}

/* ---------------- 订单详情（App 版内容） ---------------- */
:is(html.staff-app-mode, html.player-app-mode) .m-detail { display: flex; flex-direction: column; gap: var(--m-gap); padding-bottom: 8px; }
:is(html.staff-app-mode, html.player-app-mode) .m-detail-loading { padding: 32px 0; color: var(--m-text-3); text-align: center; }
:is(html.staff-app-mode, html.player-app-mode) .m-detail-hero { display: flex; flex-direction: column; gap: 6px; }
:is(html.staff-app-mode, html.player-app-mode) .m-detail-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:is(html.staff-app-mode, html.player-app-mode) .m-detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--m-text); font-size: 17px; font-weight: 600; line-height: 24px; }
:is(html.staff-app-mode, html.player-app-mode) .m-copy-line { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--m-text-2); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
:is(html.staff-app-mode, html.player-app-mode) .m-amount-box { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 10px 12px; border-radius: var(--m-radius-md); background: var(--m-subtle); }
:is(html.staff-app-mode, html.player-app-mode) .m-amount { display: flex; align-items: baseline; gap: 6px; color: var(--m-text-2); font-size: 12px; }
:is(html.staff-app-mode, html.player-app-mode) .m-amount b { color: var(--m-text); font-size: 28px; font-weight: 700; line-height: 34px; }
:is(html.staff-app-mode, html.player-app-mode) .m-amount-box small { color: var(--m-text-3); font-size: 12px; line-height: 17px; }
:is(html.staff-app-mode, html.player-app-mode) .m-people { display: flex; flex-direction: column; }
:is(html.staff-app-mode, html.player-app-mode) .m-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 0; border-top: 1px solid var(--m-line); font-size: 14px; }
:is(html.staff-app-mode, html.player-app-mode) .m-person-name { flex: 1 1 auto; min-width: 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-person-income { flex: 1 1 100%; color: var(--m-text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
:is(html.staff-app-mode, html.player-app-mode) .m-people + .m-kv { border-top: 1px solid var(--m-line); }
:is(html.staff-app-mode, html.player-app-mode) .m-card-title + .m-people .m-person:first-child,
:is(html.staff-app-mode, html.player-app-mode) .m-card-title + .m-kv { border-top: 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-report { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--m-line); }
:is(html.staff-app-mode, html.player-app-mode) .m-card-title + .m-report { border-top: 0; padding-top: 2px; }
:is(html.staff-app-mode, html.player-app-mode) .m-report-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
:is(html.staff-app-mode, html.player-app-mode) .m-report-head .m-meta { margin-left: auto; }
:is(html.staff-app-mode, html.player-app-mode) .m-report-note { margin: 0; color: var(--m-text-2); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
:is(html.staff-app-mode, html.player-app-mode) .m-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
:is(html.staff-app-mode, html.player-app-mode) .m-thumb { display: grid; place-items: center; width: 76px; height: 76px; padding: 0; overflow: hidden; border: 1px solid var(--m-line); border-radius: var(--m-radius-md); background: var(--m-subtle); color: var(--m-text-2); font-size: 12px; font-weight: 600; cursor: zoom-in; }
:is(html.staff-app-mode, html.player-app-mode) .m-thumb img { width: 100%; height: 100%; object-fit: cover; }
:is(html.staff-app-mode, html.player-app-mode) .m-files { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
:is(html.staff-app-mode, html.player-app-mode) .m-file { min-height: 32px; padding: 0 10px; border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); background: var(--m-surface); color: var(--m-text); font: inherit; font-size: 13px; }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline { margin: 0; padding: 0; list-style: none; }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li { position: relative; padding: 0 0 14px 20px; }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-border); }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li::after { content: ''; position: absolute; left: 6.5px; top: 18px; bottom: 0; width: 1px; background: var(--m-line); }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li:last-child { padding-bottom: 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li:last-child::after { display: none; }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li.is-current::before { background: var(--m-accent); box-shadow: 0 0 0 3px var(--m-accent-soft); }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li.is-current.is-danger::before { background: var(--m-danger); box-shadow: 0 0 0 3px var(--m-danger-bg); }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline li.is-current.is-success::before { background: var(--m-success); box-shadow: 0 0 0 3px var(--m-success-bg); }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; font-size: 14px; }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline-head b { color: var(--m-text); font-weight: 500; }
:is(html.staff-app-mode, html.player-app-mode) .m-timeline-note { margin: 2px 0 0; color: var(--m-text-2); font-size: 13px; line-height: 19px; overflow-wrap: anywhere; }
:is(html.staff-app-mode, html.player-app-mode) .m-adjust { display: flex; flex-direction: column; gap: 10px; }
:is(html.staff-app-mode, html.player-app-mode) .m-adjust .field { margin: 0; }

/* ---------------- 员工外壳：大标题导航栏、下划线分区页签（结构见 components/staff_shell.js） ---------------- */
.layout.is-staff-app .sa-bar { background: var(--m-surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.layout.is-staff-app .sa-bar-group { display: none; }
.layout.is-staff-app .sa-bar-title { font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: -.01em; }
.layout.is-staff-app .sa-icon-btn { color: var(--m-text); }
.layout.is-staff-app .quick-create-trigger.is-compact { width: var(--m-tap); height: var(--m-tap); border-radius: 12px; background: transparent; box-shadow: none; color: var(--m-text); }
.layout.is-staff-app .quick-create-trigger.is-compact:active { background: var(--m-subtle); }
.layout.is-staff-app .sa-sections { gap: 22px; height: 42px; padding: 0 16px; background: var(--m-surface); border-bottom: 1px solid var(--m-line); }
.layout.is-staff-app .sa-section { height: 42px; padding: 0 2px; border-radius: 0; background: transparent; color: var(--m-text-2); font-size: 15px; font-weight: 400; }
.layout.is-staff-app .sa-section.is-active { background: transparent; color: var(--m-text); font-weight: 600; }
.layout.is-staff-app .sa-section.is-active::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 20px; height: 3px; margin-left: -10px; border-radius: 2px; background: var(--m-accent); }
.layout.is-staff-app .sa-section-badge { min-width: 16px; height: 16px; padding: 0 4px; background: var(--m-badge); font-size: 10px; line-height: 16px; }
.layout.is-staff-app .sa-tabbar { background: var(--m-surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--m-line); box-shadow: var(--m-shadow-bar); }
.layout.is-staff-app .sa-tab { color: var(--m-text-3); }
.layout.is-staff-app .sa-tab.is-active { color: var(--m-accent-text); }
.layout.is-staff-app .sa-tab-badge { background: var(--m-badge); }

/* ---------------- 员工 App 版列表页（pages/staff_app_*.js）：顶部白色工具区 + 汇总 + 卡片列表 ---------------- */
.layout.is-staff-app .m-page { display: flex; flex-direction: column; }
.layout.is-staff-app .m-page-tools { display: flex; flex-direction: column; gap: 10px; margin: calc(-1 * var(--sa-gap)) calc(-1 * var(--sa-gap)) 0; padding: 8px 16px 12px; background: var(--m-surface); border-bottom: 1px solid var(--m-line); }
:is(html.staff-app-mode, html.player-app-mode) .m-summary { margin: 12px 4px 10px; color: var(--m-text-3); font-size: 12px; line-height: 17px; font-variant-numeric: tabular-nums; }
:is(html.staff-app-mode, html.player-app-mode) .m-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-summary-row .m-summary { margin: 0 4px; }

/* 订单 / 转单卡片 */
:is(html.staff-app-mode, html.player-app-mode) .m-order { display: flex; flex-direction: column; gap: 6px; cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform .15s ease; }
:is(html.staff-app-mode, html.player-app-mode) .m-order:active { transform: scale(.99); }
:is(html.staff-app-mode, html.player-app-mode) .m-order:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-head { display: flex; align-items: center; gap: 6px; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--m-text); font-size: 15px; font-weight: 600; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-line { margin: 0; overflow: hidden; color: var(--m-text-2); font-size: 14px; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-line.is-muted { color: var(--m-text-3); font-size: 13px; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-foot .m-meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-amount { flex: none; color: var(--m-text); font-size: 17px; font-weight: 700; line-height: 24px; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--m-line); cursor: default; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-actions > .m-meta { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .m-transfer-flow { display: flex; align-items: center; gap: 4px; color: var(--m-text); }
:is(html.staff-app-mode, html.player-app-mode) .m-transfer-flow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 二级页底部的危险操作（驳回、作废等） */
:is(html.staff-app-mode, html.player-app-mode) .modal-mask.is-page .modal-foot > .btn-danger { border-color: var(--m-danger); background: var(--m-surface); color: var(--m-danger); }
:is(html.staff-app-mode, html.player-app-mode) .m-person.player-chip { margin: 0; padding: 8px 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font-size: 14px; }

/* 老板卡片 */
:is(html.staff-app-mode, html.player-app-mode) .m-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--m-accent-soft); color: var(--m-accent-text); font-size: 14px; font-weight: 600; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-title small { font-weight: 400; }
:is(html.staff-app-mode, html.player-app-mode) .m-tag.is-vip { background: var(--m-warning-bg); color: var(--m-warning); font-weight: 500; }
:is(html.staff-app-mode, html.player-app-mode) .m-boss-money { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: var(--m-radius-md); background: var(--m-subtle); }
:is(html.staff-app-mode, html.player-app-mode) .m-boss-money small { display: block; color: var(--m-text-3); font-size: 12px; line-height: 17px; }
:is(html.staff-app-mode, html.player-app-mode) .m-boss-money b { color: var(--m-text); font-size: 16px; font-weight: 700; line-height: 22px; }

/* 提现卡片：金额、收款信息（一键复制）、改卡提醒 */
:is(html.staff-app-mode, html.player-app-mode) .m-withdraw { display: flex; flex-direction: column; gap: 8px; }
:is(html.staff-app-mode, html.player-app-mode) .m-withdraw-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
:is(html.staff-app-mode, html.player-app-mode) .m-withdraw-amount b { color: var(--m-text); font-size: 22px; font-weight: 700; line-height: 28px; }
:is(html.staff-app-mode, html.player-app-mode) .m-payee { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--m-radius-md); background: var(--m-subtle); }
:is(html.staff-app-mode, html.player-app-mode) .m-payee-card { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; flex: 1; min-width: 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-payee-card small { flex: 1 1 100%; color: var(--m-text-3); font-size: 12px; }
:is(html.staff-app-mode, html.player-app-mode) .m-payee-card .m-num { color: var(--m-text); font-size: 15px; font-weight: 500; letter-spacing: .02em; overflow-wrap: anywhere; }

/* ---------------- 还没有手机专用版本的员工页面：去掉电脑专用功能，详情页内的统计改两列 ---------------- */
.layout.is-staff-app :is(.column-settings, .export-button, .view-switch) { display: none; }
.layout.is-staff-app .pager { gap: 8px; }
.layout.is-staff-app .pager :is(.pager-size, .pager-jump, .pager-ellipsis, .pager-num:not(.active)) { display: none; }
html.is-staff .is-staff-app .modal-mask.is-page .modal-body :is(.cards, .stats) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; margin-right: 0; padding: 0; }
html.is-staff .is-staff-app .modal-mask.is-page .modal-body :is(.cards, .stats) > * { min-width: 0; min-height: 0; height: auto; margin: 0; padding: 10px 12px; }
html.is-staff .is-staff-app .modal-mask.is-page .modal-body .detail-columns { display: flex; flex-direction: column; gap: 12px; }
:is(html.staff-app-mode, html.player-app-mode) .modal-mask:not(.is-page) .modal-head .close-button { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--m-subtle); }

/* 工作台、充值登记等长表单：提交按钮滑动时停在底栏上方，不用滑到最底下才能点 */
.layout.is-staff-app .m-sticky-submit { position: sticky; bottom: calc(var(--sa-tabbar-h) + var(--sa-safe-bottom) + 10px); z-index: 6; }
.layout.is-staff-app button.m-sticky-submit { display: flex; justify-content: center; width: 100%; min-height: var(--m-tap); font-size: 16px; box-shadow: 0 6px 18px color-mix(in srgb, var(--m-accent) 28%, transparent); }
.layout.is-staff-app div.m-sticky-submit { flex-wrap: nowrap; padding: 10px; margin-left: -10px; margin-right: -10px; border-radius: var(--m-radius-lg); background: var(--m-surface); box-shadow: 0 6px 22px rgba(15, 23, 42, .12); }
.layout.is-staff-app div.m-sticky-submit > .btn { flex: 1 1 0; justify-content: center; min-height: var(--m-tap); }
.layout.is-staff-app div.m-sticky-submit > .btn-primary { flex-grow: 1.6; }
:is(html.staff-app-mode, html.player-app-mode) .m-order-title small { margin-left: 6px; }


/* 分析页：指标卡两列紧凑排列（一屏看到 6 个指标），图表区域可左右滑 */
.layout.is-staff-app .overview-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.layout.is-staff-app .overview-stat { min-height: 0; padding: 10px 12px; border-radius: var(--m-radius-md); }
.layout.is-staff-app .overview-stat-head { min-height: 0; padding: 0; border-bottom: 0; font-size: 12px; }
.layout.is-staff-app .overview-stat-head strong { color: var(--m-text-2); font-weight: 500; }
.layout.is-staff-app .overview-more { min-height: 28px; padding: 0 2px; font-size: 12px; }
.layout.is-staff-app .overview-stat-body { min-height: 0; padding: 2px 0 4px; }
.layout.is-staff-app .overview-stat-value { font-size: 19px; font-weight: 700; line-height: 26px; letter-spacing: -.01em; }
.layout.is-staff-app .overview-stat-icon { display: none; }
.layout.is-staff-app .overview-stat-foot { flex-wrap: nowrap; padding: 0; font-size: 11px; }
.layout.is-staff-app .overview-stat-foot > :first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .m-detail .detail-datetime { white-space: nowrap; }

/* 售后看板：三张统计卡改成一行三格的紧凑数字 */
.layout.is-staff-app .eval-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.layout.is-staff-app .eval-stat { display: block; min-height: 0; padding: 10px 12px; border-radius: var(--m-radius-md); }
.layout.is-staff-app .eval-stat-icon, .layout.is-staff-app .eval-stat em { display: none; }
.layout.is-staff-app .eval-stat small { display: block; overflow: hidden; color: var(--m-text-2); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.layout.is-staff-app .eval-stat strong { display: block; margin: 2px 0 0; font-size: 20px; line-height: 26px; }

/* 订单卡片四个金额（订单金额 / 老板实付 / 俱乐部收入 / 陪玩分成，2026-10-04 第三轮约定订单卡片保留）：一行四格 */
:is(html.staff-app-mode, html.player-app-mode) .m-money { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 2px 0 0; padding: 8px 10px; border-radius: var(--m-radius-md); background: var(--m-subtle); }
:is(html.staff-app-mode, html.player-app-mode) .m-money > div { min-width: 0; }
:is(html.staff-app-mode, html.player-app-mode) .m-money dt { overflow: hidden; color: var(--m-text-3); font-size: 11px; line-height: 15px; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .m-money dd { margin: 2px 0 0; overflow: hidden; color: var(--m-text); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
:is(html.staff-app-mode, html.player-app-mode) .m-money dd.m-order-amount { font-size: 14px; }
/* 派单大厅工具行 */
.layout.is-staff-app .m-tool-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.layout.is-staff-app .m-tool-row::-webkit-scrollbar { display: none; }
/* 申请人数已够：与电脑派单卡片同一组绿色（2026-10-10 用户要求「申请绿色数字」） */
.layout.is-staff-app .m-dispatch.is-application-ready { background: #f0fdf4; box-shadow: inset 0 0 0 1px #22c55e, var(--m-shadow); }
html.staff-app-mode[data-theme="dark"] .layout.is-staff-app .m-dispatch.is-application-ready { background: #142c22; box-shadow: inset 0 0 0 1px #4ade80; }
.layout.is-staff-app .m-dispatch .dispatch-application-count { margin-right: 6px; vertical-align: 1px; }

/* 陪玩派单大厅卡片：单价用强调色（全站只有一个强调色，红色只留给危险和售后） */
.player-app .pa-hall-price { color: var(--m-accent-text); }