/* ============ 设计令牌（Design Tokens） ============ */
:root {
  color-scheme: light;
  --bg: #eef2f7;
  --bg-gradient: linear-gradient(160deg, #eef2f7 0%, #e6ecf5 40%, #eef1f8 100%);
  --card: #ffffff;
  --border: #e6e9f0;
  --border-strong: #d6dbe7;
  --text: #16202e;
  --text-2: #43506b;
  --muted: #7a8699;
  --muted-2: #9aa5b8;
  --primary: #3b5bdb;
  --primary-600: #2f49c4;
  --primary-soft: #eef2ff;
  --danger: #e03131;
  --danger-soft: #fdeaea;
  --ok: #2f9e44;
  --ok-soft: #e8f6ec;
  --warn: #e8890c;
  --warn-soft: #fdf1e0;
  --purple: #7048e8;
  --purple-soft: #f0eafe;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --shadow: 0 2px 6px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.05);
  --shadow-lg: 0 8px 30px rgba(16,24,40,.16);
  --ring: 0 0 0 3px rgba(59,91,219,.18);
  --font: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--primary-600); text-decoration: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c2ccdb; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a9b6ca; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 布局容器 ============ */
.container { max-width: 1160px; margin: 0 auto; padding: 22px 22px 48px; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; margin: -22px -22px 20px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.topbar h1 {
  font-size: 19px; margin: 0; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.topbar h1::before {
  content: ""; width: 5px; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, var(--primary), #7048e8); display: inline-block;
}
.topbar h1 a { color: inherit; }
.topbar .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.topbar button:not(.primary) { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.topbar button:not(.primary):hover { background: #eef1f6; color: var(--text); border-color: transparent; }
.topbar button:not(.primary):active { transform: none; }

/* ============ 卡片 ============ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow); }
.card h2 {
  font-size: 15px; margin: 0 0 14px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; color: var(--text);
}
.section-title {
  font-size: 12px; color: var(--muted); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ============ 我的用户列表（员工端）：留白收紧 + 长列截断，避免列太拥挤 ============
   - 单元格留白 12px → 9px（10 列合计省下约 60px）
   - 姓 / 微信名 / 对接药师 三类长文本超出用省略号，鼠标悬停看全文（title）
   - 电话不折行（11 位数字被拆行会更难读），其余列按内容自适应           */
table.users-table { font-size: 12.5px; }
table.users-table th, table.users-table td { padding: 8px 9px; }
table.users-table thead th { font-size: 11px; }
table.users-table td.c-phone { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.users-table td.c-last { white-space: nowrap; }
table.users-table .ell {
  display: inline-block; max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
table.users-table .ell.w130 { max-width: 130px; }
table.users-table .ell.w110 { max-width: 110px; }
table.users-table .ell.w200 { max-width: 200px; }
/* 名称/文本被截断时给个提示光标，让人知道可以悬停看全文 */
table.users-table .ell[title] { cursor: help; }
table.users-table td.c-ops { white-space: nowrap; }

/* 「操作」列：平时只显示一个按钮，点开才列出该客户能做的事（不再把所有功能平铺在一行） */
.ops-btn { white-space: nowrap; font-size: 12px; padding: 5px 9px; }
.ops-btn.has { border-color: rgba(59,91,219,.4); color: #3a53c4; background: var(--primary-soft); }
.ops-btn.warn { border-color: rgba(220,38,38,.4); color: #b91c1c; background: #fee2e2; font-weight: 700; }
.ops-menu {
  position: fixed; z-index: 90; min-width: 216px; max-width: min(330px, 92vw);
  padding: 6px; background: var(--card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.ops-menu .ops-head {
  padding: 7px 10px 9px; margin-bottom: 5px; border-bottom: 1px dashed var(--border);
  font-size: 12.5px; line-height: 1.75; color: var(--text-2); word-break: break-word;
}
.ops-menu .ops-head b { color: var(--text); }
.ops-menu .ops-item {
  display: block; width: 100%; text-align: left; margin: 0;
  padding: 9px 10px; background: transparent; border: none; border-radius: 6px;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none;
}
.ops-menu .ops-item:hover { background: var(--primary-soft); color: #3a53c4; transform: none; box-shadow: none; }
.ops-menu .ops-item.danger { color: #b91c1c; }
.ops-menu .ops-item.danger:hover { background: #fee2e2; color: #991b1b; }
.ops-menu .ops-item .hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
[data-theme="dark"] .ops-menu { background: #1a2230; border-color: #33456b; }
[data-theme="dark"] .ops-menu .ops-item { color: var(--text); }
[data-theme="dark"] .ops-menu .ops-item:hover { background: #253055; color: #a9b8ff; }
[data-theme="dark"] .ops-menu .ops-item.danger:hover { background: #3a1f1f; color: #fca5a5; }
[data-theme="dark"] .ops-btn.has { background: #253055; color: #a9b8ff; }
[data-theme="dark"] .ops-btn.warn { background: #3a1f1f; color: #fca5a5; }

/* 筛选区：常用条件常显，其余收进「更多筛选」 */
.filters-more {
  margin-top: 10px; padding: 10px 12px;
  background: var(--primary-soft); border: 1px dashed rgba(59,91,219,.25);
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .filters-more { background: #1c2740; border-color: #33456b; }
.filters-actions { flex: none; display: flex; gap: 8px; align-items: center; margin-top: 22px; }
.filters-actions .dot {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 5px;
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}

/* 「点击选择」的下拉多选（如新增用户的营期）：界面上只显示一个选择框，点开才列选项 */
.picker { position: relative; max-width: 420px; }
.picker-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  margin-top: 4px; padding: 10px 14px; text-align: left; cursor: pointer;
  background: var(--card); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font: inherit; font-size: 13px; box-shadow: var(--shadow-sm);
}
.picker-btn:hover { border-color: var(--primary); }
.picker-btn .picker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-btn .picker-text.placeholder { color: var(--muted-2); }
.picker-btn .picker-arrow { color: var(--muted); font-size: 12px; flex: none; }
.picker.open .picker-btn { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.field-invalid .picker-btn { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(220,38,38,.15); }
.picker-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70;
  max-height: 260px; overflow: auto; padding: 6px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.picker-item {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px;
  border-radius: 7px; font-size: 13px; cursor: pointer;
}
.picker-item:hover { background: var(--primary-soft); }
.picker-item.on { background: var(--primary-soft); color: #3a53c4; font-weight: 600; }
.picker-item input { width: auto; margin: 0; flex: none; pointer-events: none; }
/* 空态：没有可选项时给明显提示，避免和"点了没反应"混淆 */
.picker-empty {
  padding: 12px 12px; border-radius: 7px; font-size: 13px;
  background: var(--warn-soft); border: 1px dashed var(--warn); color: #8a5a08;
}
.picker-panel { min-width: 220px; }
[data-theme="dark"] .picker-btn { background: #1a2230; border-color: #33456b; }
[data-theme="dark"] .picker-panel { background: #1a2230; border-color: #33456b; }
[data-theme="dark"] .picker-item.on { background: #253055; color: #a9b8ff; }

/* 多营期勾选列表（分配/批量增删营期弹窗里用） */
.check-list {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
  padding: 10px 12px; background: #f8fafd; border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 210px; overflow: auto;
}
.check-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; cursor: pointer; }
.check-item input { width: auto; margin: 0; }
[data-theme="dark"] .check-list { background: #161d29; border-color: #2b3550; }

/* ============ 表格 ============ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; }
thead th {
  color: var(--muted); font-weight: 700; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
  position: sticky; top: 0; z-index: 1;
}
tbody td { border-bottom: 1px solid var(--border); color: var(--text-2); }
tbody tr { transition: background .12s ease; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f6f8fd; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #eef3ff; }
td .link, td a { text-decoration: none; font-weight: 500; }
.overdue { color: var(--danger); font-weight: 700; }

/* 员工综合看板：可点的数字（点开看该项明细） */
.num-btn {
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  min-width: 30px; padding: 4px 10px; margin: -2px 0;
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid rgba(59,91,219,.18); border-radius: 999px; cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.num-btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.num-btn:active { transform: none; }
.num-btn.overdue { color: #b91c1c; background: #fee2e2; border-color: rgba(220,38,38,.22); }
.num-btn.overdue:hover { background: var(--danger); color: #fff; }
.pill.overdue { background: #fee2e2; color: #b91c1c; }
.rec-content { max-width: 380px; white-space: normal; word-break: break-word; }

/* ============ 标签 / 徽章 ============ */
.tag {
  display: inline-block; padding: 2px 9px; margin: 0 4px 2px 0;
  background: var(--primary-soft); color: #3a53c4; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid rgba(59,91,219,.12);
}
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.pending { background: var(--warn-soft); color: #b56a03; }
.pill.done { background: var(--ok-soft); color: #1f7a30; }
.pill.dismissed { background: #eef1f6; color: var(--muted); }

/* ============ 按钮 ============ */
button {
  appearance: none; font-family: inherit;
  border: 1px solid var(--border-strong); background: #fff;
  padding: 8px 15px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
  color: var(--text); font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease, color .15s ease;
}
button:hover { background: #f6f8fc; border-color: #c3cbdc; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible { outline: none; box-shadow: var(--ring); }
button.primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border-color: transparent; color: #fff; box-shadow: 0 1px 2px rgba(59,91,219,.3);
}
button.primary:hover { background: linear-gradient(180deg, #4662e0, #2f49c4); }
button.danger { color: var(--danger); border-color: #f2c7c7; }
button.danger:hover { background: var(--danger-soft); border-color: #e8a8a8; }
button.small { padding: 5px 11px; font-size: 12px; border-radius: 7px; }

/* ============ 表单 ============ */
label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin: 12px 0 5px; }
input, textarea, select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit;
  color: var(--text); background: #fff; color-scheme: light;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 76px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: #b7c0d2; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring); background: #fcfdff;
}
input:disabled, textarea:disabled, select:disabled { background: #f2f4f9; color: var(--muted); cursor: not-allowed; }
select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--card);
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6b80' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
}
select option { background-color: var(--card); color: var(--text); }
input::placeholder, textarea::placeholder { color: #9aa5b8; opacity: 1; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #5d6a80; }
[data-theme="dark"] select option { background: #1a2230; color: var(--text); }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }

/* ============ 工具类 ============ */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mb { margin-bottom: 10px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.actions > :not(:last-child) { margin-right: 0; }

/* ============ 回访记录条目 ============ */
.record { padding: 12px 0; border-bottom: 1px solid var(--border); }
.record:last-child { border-bottom: none; }
.record .time { color: var(--muted); font-size: 12px; display: flex; gap: 8px; }
.record .content { margin: 5px 0; line-height: 1.6; }

/* ============ 基本信息 ============ */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
/* 四个长文本（讲座/套餐/身体情况/备注）排一行 */
.long-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 860px) { .long-grid { grid-template-columns: 1fr; } }
.info-item { background: #f8fafd; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.info-item .label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.info-item .value { font-size: 13px; margin-top: 3px; color: var(--text); }
.info-item .value a { text-decoration: none; }
/* 长文本（身体情况/套餐/讲座/药师指导/备注）：固定高度内滚动，避免撑破布局 */
.info-item .value-long {
  margin-top: 6px; min-height: 46px; max-height: 95px; overflow-y: auto;
  padding: 6px 10px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}

/* ============ Toast ============ */
#toasts { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast {
  background: #1f2937; color: #f9fafb; border-radius: 12px; padding: 13px 17px;
  min-width: 280px; max-width: 360px; box-shadow: var(--shadow-lg);
  animation: slidein .28s cubic-bezier(.2,.8,.2,1);
  display: flex; align-items: center; gap: 10px;
}
.toast::before { content: "✓"; font-weight: 700; color: #7ee08a; font-size: 15px; }
.toast .t-title { font-weight: 600; }
.toast .t-body { font-size: 12px; opacity: .85; margin-top: 2px; }
.toast a { color: #a5c2ff; }
/* 待回访提醒条：顶部对齐 + 右侧「✕」叉掉本次提醒（不影响其他操作） */
.toast.toast-due { align-items: flex-start; padding: 12px 12px 12px 16px; }
.toast.toast-due::before { content: none; }
.toast .t-content { flex: 1; min-width: 0; }
.toast .t-close {
  flex: none; margin-left: 4px; padding: 2px 6px; border: none; border-radius: 6px;
  background: transparent; color: #c9d3e4; font-size: 14px; line-height: 1; cursor: pointer;
}
.toast .t-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.toast .t-tip { margin-top: 5px; font-size: 11px; opacity: .6; }
@keyframes slidein { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============ Tabs ============ */
.tabs {
  display: flex; gap: 6px; border-bottom: 1px solid var(--border);
  margin-bottom: 20px; flex-wrap: wrap; padding: 0 4px;
}
.tab {
  padding: 10px 18px; cursor: pointer; border: none; background: none;
  font-size: 14px; color: var(--muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent; font-weight: 500; box-shadow: none;
  transition: color .15s ease, background .15s ease;
  position: relative;
}
.tab:hover { color: var(--text); background: #f3f6fc; }
.tab.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; border-bottom-color: var(--primary); }
.panel { display: none; animation: fadeUp .22s ease; }
.panel.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============ 用户详情页顶部醒目备注框 ============ */
.note-box { border-radius: var(--radius); padding: 20px 22px; min-height: 132px; box-shadow: var(--shadow-sm); }
.note-box .note-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.note-box .note-body { font-size: 17px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.note-box.disease { background: #fff5f5; border: 2px solid #fecaca; }
.note-box.disease .note-title { color: #b91c1c; }
.note-box.pharma { background: #f0f6ff; border: 2px solid #bfdbfe; }
.note-box.pharma .note-title { color: #1d4ed8; }

/* 备注（疾病 / 药师） */
.note-card { padding: 10px 16px; }
.note-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.note-row + .note-row { border-top: 1px solid var(--border); }
.note-label { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.note-body { flex: 1; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.note-body textarea { margin-top: 4px; }
.note-edit { flex: none; }

/* 疾病信息区：历史沟通记录（左）与健管备注（右）并排一行，固定高度、超出滚动 */
.note-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 860px) { .note-pair { grid-template-columns: 1fr; } }
.note-block { display: flex; flex-direction: column; min-width: 0; }
.note-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.note-head .note-label { margin: 0; }
/* flex: none 是关键：否则会被 .note-body 的 flex:1 在纵向撑高，固定高度/滚动条就失效了 */
.note-scroll {
  flex: none; height: 100px; overflow-y: auto; overflow-x: hidden; padding: 8px 10px;
  background: #f8fafd; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}
/* 编辑态：放开高度，让文本框与按钮完整显示 */
.note-scroll.note-editing { flex: none; height: auto; min-height: 100px; overflow: visible; }
[data-theme="dark"] .note-scroll { background: #151c29; }

/* 药师备注：放在最下面，浅色底做一点区分 */
.note-row.pharma-row {
  margin-top: 12px; padding: 10px 12px;
  background: #f4f8ff; border: 1px solid #e2ebff; border-radius: var(--radius-sm);
}
[data-theme="dark"] .note-row.pharma-row { background: #1b2233; border-color: #2b3550; }

/* ============ 弹窗（Modal） ============ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5);
  backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
  z-index: 1100; padding: 20px; animation: fadeIn .18s ease;
}
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: min(560px, 94vw); max-height: 82vh; overflow: auto;
  animation: modalPop .26s cubic-bezier(.2,.8,.2,1);
}
.modal .modal-head {
  position: sticky; top: 0; background: linear-gradient(180deg, #fff, #fdfdff);
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border); z-index: 1;
}
.modal .modal-head h2 { font-size: 16px; margin: 0; }
.modal .modal-body { padding: 20px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 关闭按钮 */
.modal-head button.close { border: none; background: #eef1f6; width: 30px; height: 30px; border-radius: 8px; padding: 0; box-shadow: none; font-size: 16px; line-height: 1; color: var(--muted); }
.modal-head button.close:hover { background: #e2e7f0; color: var(--text); }

/* ============ 空状态 / 加载 ============ */
.muted.loading::after { content: "…"; animation: dots 1.2s infinite; }
@keyframes dots { 0%,20%{content:"…"} 40%{content:"…"} 60%{content:"…"} 100%{content:"…"} }

/* 高亮 / 预警（掉播等） */
.highlight-yellow { background: var(--warn-soft); border-color: var(--warn); }
.highlight-red { background: var(--danger-soft); border-color: var(--danger); }
.highlight-purple { background: var(--purple-soft); border-color: var(--purple); }

/* ============ 骨架屏 / 加载 ============ */
.skeleton {
  position: relative; overflow: hidden; color: transparent; border-radius: 6px;
  background: #eef1f6;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(59,91,219,.2); border-top-color: var(--primary);
  animation: spin .7s linear infinite; display: inline-block; vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 关键数字 / 统计 */
.num { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* 卡片内小块信息（用于统计栏） */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; }
.stat-cell {
  background: linear-gradient(160deg,#f8fafe,#eef3fd); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.stat-cell .lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat-cell .val { font-size: 24px; font-weight: 800; margin-top: 4px; color: var(--text); }

/* ============ 两张卡并排（管理端：审批中心 + 提醒规则） ============ */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.grid-2 > .card { margin-bottom: 0; }
/* 卡片头：标题 + 右侧操作 */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.card-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); line-height: 1.7; }
/* 表格内超长文本截断（悬停看全文） */
.cell-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 新建规则表单：告示底 + 两列网格 */
.rule-form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
  padding: 14px; margin-bottom: 12px;
  background: #f7f9ff; border: 1px dashed rgba(59,91,219,.35); border-radius: var(--radius-sm);
}
.rule-form .full { grid-column: 1 / -1; }
.rule-form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
[data-theme="dark"] .rule-form { background: #1d2534; border-color: #33456b; }
@media (max-width: 700px) { .rule-form { grid-template-columns: minmax(0, 1fr); } }

/* 可排序表头（最近跟进时间）：点击在「由近到远 / 由远到近」间切换 */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort .sort-arrow { color: var(--muted-2); font-weight: 700; margin-left: 2px; }
th.th-sort:hover { color: var(--primary); }
th.th-sort:hover .sort-arrow { color: var(--primary); }
th.th-sort.active { color: var(--primary); }
th.th-sort.active .sort-arrow { color: var(--primary); }

/* ============ 管理端首页「员工回访看板」（员工 × 日期） ============ */
.board-wrap { max-height: 72vh; }
table.board { font-size: 12.5px; white-space: nowrap; }
table.board th, table.board td { padding: 6px 9px; text-align: center; }
/* 两层表头：分组行 + 列名行；都吸顶 */
table.board thead th {
  position: sticky; background: var(--card); box-shadow: inset 0 -1px 0 var(--border-strong); z-index: 2;
}
table.board thead tr.board-groups th { top: 0; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
table.board thead tr:not(.board-groups) th { top: 30px; }
table.board thead tr.board-groups th:not([rowspan]) { border-bottom: 1px dashed var(--border); }
/* 首列（员工名）吸附在左侧 */
table.board .board-name {
  position: sticky; left: 0; z-index: 3; text-align: left; font-weight: 700;
  background: var(--card); color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
table.board thead .board-name { z-index: 5; }
/* 今日列高亮 */
table.board .board-today { background: #fff8e6; }
table.board thead th.board-today { background: linear-gradient(180deg, #fdf1cf, #fbe8b6); }
[data-theme="dark"] table.board .board-today { background: #2a2718; }
[data-theme="dark"] table.board thead th.board-today { background: linear-gradient(180deg, #3a331c, #322c19); }
/* 分组列名小字 / 每天的表头 */
table.board .board-wd { font-size: 10px; color: var(--muted); font-weight: 500; }
table.board thead th.board-overdue { color: #b91c1c; }
table.board thead th.board-day { min-width: 52px; }
table.board thead th.board-total { border-left: 2px solid var(--border-strong); }
table.board td.board-num { text-align: center; font-variant-numeric: tabular-nums; }
table.board .num-btn { min-width: 28px; padding: 3px 8px; font-size: 12.5px; margin: 0; }
/* 逾期行左侧色条提醒 */
table.board tbody tr.board-row-overdue > .board-name { box-shadow: inset 3px 0 0 #dc2626; }
/* 合计行 */
table.board tr.board-totals td, table.board tr.board-totals th { font-weight: 700; background: #f2f5fd; border-top: 2px solid var(--border-strong); }
[data-theme="dark"] table.board tr.board-totals td, [data-theme="dark"] table.board tr.board-totals th { background: #222b3c; }
table.board tbody tr:hover td { background: #f6f8fd; }
[data-theme="dark"] table.board tbody tr:hover td { background: #232d40; }

/* ============ 药师回访预约（员工端待查收置顶 / 药师端队列） ============ */
/* 员工端：药师已完成回访 → 置顶高亮待查收 */
.ack-card { border: 2px solid #f2c98a; background: linear-gradient(180deg, #fffdf7, #fff8ea); }
.ack-card h2 { color: #8a5b12; }
.ack-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  background: #fff7e6; border: 1px solid #f3ddb0; border-left: 4px solid #f59e0b; border-radius: var(--radius-sm);
}
.ack-item:last-child { margin-bottom: 0; }
.ack-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.ack-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ack-actions button[disabled] { opacity: .55; cursor: not-allowed; }
.ack-content {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: #f7f9ff; border: 1px solid rgba(59,91,219,.18); font-size: 13.5px; line-height: 1.8;
  max-height: 260px; overflow: auto;
}
[data-theme="dark"] .ack-card { background: linear-gradient(180deg, #2a2519, #262119); border-color: #6b5426; }
[data-theme="dark"] .ack-card h2 { color: #fbbf24; }
[data-theme="dark"] .ack-item { background: #2a2519; border-color: #6b5426; border-left-color: #f59e0b; }
[data-theme="dark"] .ack-content { background: #1d2534; border-color: #33456b; }
/* 药师端：队列里"下一位"高亮 */
table tr.ap-first td { background: #fff8e6; }
[data-theme="dark"] table tr.ap-first td { background: #2a2718; }

/* ============ 药师排班（休息日） ============ */
/* 员工端「药师提醒」卡片顶部的休息提醒条 */
.rest-alert {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: #eef4ff; border: 1px solid rgba(59,91,219,.25); border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.85;
}
.rest-alert.warn { background: #fef2f2; border-color: rgba(220,38,38,.28); border-left-color: #dc2626; }
.rest-alert .rest-line { flex: 1 1 260px; min-width: 200px; }
.rest-alert .rest-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rest-alert b { color: #1d4ed8; }
.rest-alert.warn b { color: #b91c1c; }
[data-theme="dark"] .rest-alert { background: #1c2740; border-color: #33456b; }
[data-theme="dark"] .rest-alert.warn { background: #2b1c1c; border-color: #6b3333; border-left-color: #dc2626; }
[data-theme="dark"] .rest-alert b { color: #93a4f5; }
[data-theme="dark"] .rest-alert.warn b { color: #fca5a5; }

/* 「选择药师」下面那行：最近休息时间（连休显示成一段） */
.rest-hint {
  margin-top: 8px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: #eef4ff; border: 1px solid rgba(59,91,219,.22); border-left: 4px solid var(--primary);
  color: var(--text); font-size: 13px; line-height: 1.75;
}
.rest-hint b { color: #1d4ed8; }
.rest-hint.warn {
  background: #fef2f2; border-color: rgba(220,38,38,.28); border-left-color: #dc2626; color: #b91c1c;
}
.rest-hint.warn b { color: #991b1b; }
.rest-hint.ok {
  background: #f0fdf4; border-color: rgba(34,197,94,.28); border-left-color: #16a34a; color: #166534;
}
.rest-hint.ok b { color: #15803d; }
[data-theme="dark"] .rest-hint { background: #1c2740; border-color: #33456b; }
[data-theme="dark"] .rest-hint b { color: #93a4f5; }
[data-theme="dark"] .rest-hint.warn { background: #2b1c1c; border-color: #6b3333; border-left-color: #dc2626; color: #fca5a5; }
[data-theme="dark"] .rest-hint.warn b { color: #fecaca; }
[data-theme="dark"] .rest-hint.ok { background: #14281c; border-color: #2f6b45; border-left-color: #16a34a; color: #86efac; }
[data-theme="dark"] .rest-hint.ok b { color: #4ade80; }

/* 预约/改期弹窗里的休息日拦截提示（醒目红字，不可提交） */.rest-warn {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: #fef2f2; border: 1px solid rgba(220,38,38,.3); color: #b91c1c;
  font-size: 13px; line-height: 1.75;
}
.rest-warn b { color: #991b1b; }
.rest-warn .rest-fix { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
[data-theme="dark"] .rest-warn { background: #2b1c1c; border-color: #6b3333; color: #fca5a5; }
[data-theme="dark"] .rest-warn b { color: #fecaca; }

/* 表格里的「休息日」标记 */
.pill.rest { background: #fee2e2; color: #b91c1c; }
tr.row-rest td { background: #fff5f5; }
[data-theme="dark"] tr.row-rest td { background: #2b1c1c; }

/* 药师端「我的休息排班」日历 */
.cal-cell.clickable { cursor: pointer; }
.cal-cell.clickable:hover { border-color: var(--primary); }
.cal-cell.rest { background: linear-gradient(180deg, #fff5f5, #ffe9e9); border-color: #f3b6b6; }
.cal-cell.rest .cal-num { background: #fee2e2; color: #b91c1c; border-color: rgba(220,38,38,.25); }
.cal-cell.rest::after {
  content: '休'; position: absolute; right: 4px; bottom: 3px;
  font-size: 10px; font-weight: 700; color: #b91c1c;
}
.cal-cell.has-conflict { box-shadow: inset 0 0 0 2px rgba(220,38,38,.4); }
.cal-cell.past { opacity: .42; }
[data-theme="dark"] .cal-cell.rest { background: linear-gradient(180deg, #2b1c1c, #331f1f); border-color: #6b3333; }
[data-theme="dark"] .cal-cell.rest::after { color: #fca5a5; }
.cal-hint { font-size: 12px; color: var(--muted-2); margin-top: 4px; }

/* 管理端「药师排班总览」：每药师一行 × 每天一格，点格子标注/取消 */
.shift-toggle {
  min-width: 34px; padding: 3px 7px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted-2);
  font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, color .12s ease;
}
.shift-toggle:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.shift-toggle.on {
  border-style: solid; border-color: rgba(220,38,38,.3);
  background: #fee2e2; color: #b91c1c; font-weight: 700;
}
.shift-toggle.on:hover { border-color: #dc2626; color: #991b1b; }
.shift-toggle.has-conflict { box-shadow: inset 0 0 0 2px rgba(220,38,38,.4); }
.shift-toggle.past { opacity: .4; cursor: not-allowed; }
.shift-toggle.past:hover { border-color: var(--border-strong); color: var(--muted-2); transform: none; }
[data-theme="dark"] .shift-toggle.on { background: #3a1f1f; color: #fca5a5; border-color: #6b3333; }
table.board .shift-toggle { margin: 0; }
/* 排班总览是单行表头，不需要给第二行表头留 30px 的吸顶偏移。
   注意：这里必须写成 `thead tr th` / `thead tr:not(.board-groups) th`——
   通用规则 `table.board thead tr:not(.board-groups) th` 的特异性是 (0,2,4)，
   只写 `thead th` 是 (0,2,3) 会被压掉，表头就会被下推 30px 压住第一行数据。 */
table.board.shift-board thead tr th,
table.board.shift-board thead tr:not(.board-groups) th { top: 0; }
table.board.shift-board thead .board-day { min-width: 46px; }
/* 日期多时表格可左右滑动：给个提示，避免以为「后面的列看不到」。
   注意首列 max-width 150px（border-box，含左右各 9px 内边距 → 内容宽约 132px），
   所以提示要短，否则自己会被 ellipsis 截掉。 */
table.board.shift-board thead th.board-name::after {
  content: '‹ 左右滑动 ›'; display: block;
  font-size: 10px; font-weight: 500; color: var(--muted-2); white-space: nowrap;
}

/* ============ 回访日历看板（员工端：按应回访日期看每日工作量） ============ */
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 0 4px; }
.cal-cell {
  position: relative; min-height: 64px; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
  display: flex; flex-direction: column; align-items: center;
}
.cal-cell.empty { border-style: dashed; background: transparent; }
.cal-cell .cal-d { align-self: flex-start; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-cell.today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.cal-cell.today .cal-d { color: var(--primary); font-weight: 800; }
.cal-cell.has { background: linear-gradient(180deg, #fbfcff, #f4f7ff); }
.cal-cell.heavy { background: linear-gradient(180deg, #fffaf0, #fff4de); border-color: #f2c98a; }
.cal-cell.heavy::after {
  content: '偏多'; position: absolute; right: 4px; bottom: 3px;
  font-size: 10px; font-weight: 700; color: #b45309;
}
.cal-num {
  margin-top: 7px; min-width: 32px; padding: 3px 9px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 800; line-height: 1.25; cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.cal-cell.overdue .cal-num { background: #fee2e2; color: #b91c1c; border-color: rgba(220,38,38,.25); }
.cal-cell.future .cal-num { background: var(--primary-soft); color: #3a53c4; border-color: rgba(59,91,219,.2); }
.cal-cell.heavy .cal-num { background: #ffe8bd; color: #b45309; border-color: rgba(232,137,12,.35); }
.cal-num:hover { transform: translateY(-1px); filter: brightness(.96); }
.cal-zero { margin-top: 9px; font-size: 12px; color: var(--muted-2); }
.cal-legend { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cal-dot.overdue { background: #dc2626; }
.cal-dot.today { background: var(--primary); }
.cal-dot.future { background: #93a4f5; }
.cal-dot.heavy { background: #f59e0b; }
[data-theme="dark"] .cal-cell.has { background: linear-gradient(180deg, #1b2331, #1a2130); }
[data-theme="dark"] .cal-cell.heavy { background: linear-gradient(180deg, #2a2620, #262119); border-color: #6b5426; }
[data-theme="dark"] .cal-cell.heavy::after { color: #fbbf24; }
[data-theme="dark"] .cal-cell.overdue .cal-num { background: #3a2426; color: #ff8a8a; border-color: #5a3335; }
[data-theme="dark"] .cal-cell.future .cal-num { background: #252d46; color: #a9b8ff; border-color: #38466b; }
[data-theme="dark"] .cal-cell.heavy .cal-num { background: #3d3320; color: #fbbf24; border-color: #6b5426; }
@media (max-width: 720px) {
  .calendar { gap: 4px; }
  .cal-cell { min-height: 54px; padding: 4px; }
  .cal-num { min-width: 26px; padding: 2px 7px; font-size: 12px; }
}

/* ============ 掉播分析大卡片：分区排版 + 指标块增强 + 列表轻量可视化 ============ */.analysis-card { padding-bottom: 8px; }
.sec { padding: 16px 0; border-top: 1px dashed var(--border); }
.sec:first-child { padding-top: 2px; border-top: none; }
.sec:last-child { padding-bottom: 4px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sec-title {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .01em;
}
.sec-title::before {
  content: ''; width: 4px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--primary), #8aa0ff);
}
.sec-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.sec-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); line-height: 1.8; }
.scope-row { align-items: flex-end; }
/* 指标块：左色条 + 大数字配色 + 副标注 + 进度条 */
.stat-cell { position: relative; overflow: hidden; }
.stat-cell .sub { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.stat-cell::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.stat-cell.tone-ok::after { background: #22c55e; }
.stat-cell.tone-warn::after { background: #f59e0b; }
.stat-cell.tone-danger::after { background: #dc2626; }
.stat-cell.tone-ok .val { color: #15803d; }
.stat-cell.tone-warn .val { color: #b45309; }
.stat-cell.tone-danger .val { color: #b91c1c; }
.stat-cell .meter { margin-top: 9px; height: 6px; border-radius: 999px; background: #e6ecf8; overflow: hidden; }
.stat-cell .meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b5bdb, #7c9bff); transition: width .35s ease; }
[data-theme="dark"] .stat-cell .meter { background: #26314a; }
[data-theme="dark"] .stat-cell.tone-ok .val { color: #4ade80; }
[data-theme="dark"] .stat-cell.tone-warn .val { color: #fbbf24; }
[data-theme="dark"] .stat-cell.tone-danger .val { color: #f87171; }
/* 预警区：有预警=暖色，无预警=绿色 */
.drop-alert-strip.ok { background: #f2fdf5; border-color: #bbf7d0; }
[data-theme="dark"] .drop-alert-strip.ok { background: #17251c; border-color: #2c5138; }
.alert-ok { color: #15803d; font-weight: 600; }
[data-theme="dark"] .alert-ok { color: #4ade80; }
.alert-head { font-size: 12px; color: #b56a03; font-weight: 700; margin-bottom: 8px; }
[data-theme="dark"] .alert-head { color: #fbbf24; }
/* 列表：行状态色条 + 数字右对齐 + 掉播热度条 + 严重度配色 */
table.drop-table { width: 100%; }
table.drop-table tbody tr.drop-row > td:first-child { border-left: 4px solid transparent; }
table.drop-table tbody tr.flag-yellow > td:first-child { border-left-color: #f59e0b; }
table.drop-table tbody tr.flag-red > td:first-child { border-left-color: #dc2626; }
table.drop-table tbody tr.flag-purple > td:first-child { border-left-color: #8b5cf6; }
table.drop-table tbody tr.flag-ok > td:first-child { border-left-color: #86efac; }
table.drop-table tbody tr.flag-none > td:first-child { border-left-color: var(--border-strong); }
table.drop-table td.num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.heat { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; width: 100%; }
.heat-bar { display: inline-block; width: 52px; height: 6px; border-radius: 999px; background: #e9eefb; overflow: hidden; flex: none; }
.heat-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #dc2626); }
[data-theme="dark"] .heat-bar { background: #26314a; }
.sev-1 { color: #b45309; font-weight: 700; }
.sev-2 { color: #b91c1c; font-weight: 800; }
[data-theme="dark"] .sev-1 { color: #fbbf24; }
[data-theme="dark"] .sev-2 { color: #f87171; }

/* 主题切换按钮（固定右下角） */
.theme-toggle {
  position: fixed; right: 22px; top: 22px; z-index: 1200;
  width: 40px; height: 40px; border-radius: 50%; padding: 0; font-size: 18px;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.theme-toggle:hover { background: #f3f6fc; }

/* ============ 深色主题 ============ */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1420;
  --bg-gradient: linear-gradient(160deg,#0f1420 0%,#141b2b 40%,#0d1120 100%);
  --card: #1a2230;
  --border: #2a3446;
  --border-strong: #38445a;
  --text: #e6ebf4;
  --text-2: #c2cbda;
  --muted: #8b95a8;
  --muted-2: #6b7588;
  --primary: #6b8cff;
  --primary-600: #5a7bff;
  --primary-soft: #252d46;
  --danger: #ff6b6b; --danger-soft: #3a2426;
  --ok: #5ac378; --ok-soft: #1f3526;
  --warn: #f0a24e; --warn-soft: #3a2e1a;
  --purple: #9a7bff; --purple-soft: #2c2444;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 2px 8px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(107,140,255,.22);
}
[data-theme="dark"] body { background: var(--bg-gradient); }
[data-theme="dark"] .topbar { background: rgba(18,23,36,.8); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
[data-theme="dark"] thead th { background: linear-gradient(180deg,#202a3a,#1b2332); color: #9aa5b8; }
[data-theme="dark"] tbody td { color: var(--text-2); }
[data-theme="dark"] tbody tr:hover { background: #222c3d; }
[data-theme="dark"] tr.clickable:hover { background: #222a40; }
[data-theme="dark"] button { background: #1f2937; color: var(--text); border-color: #333e53; }
[data-theme="dark"] button:hover { background: #27334b; }
[data-theme="dark"] button:not(.primary) { color: var(--text-2); }
[data-theme="dark"] button.primary { background: linear-gradient(180deg,#6b8cff,#4d6be0); }
[data-theme="dark"] button.danger { color: #ff8a8a; border-color: #5a3335; }
/* 注意：选择器列表里每个都要带主题前缀，否则后面的会泄漏到浅色主题（曾导致下拉框/多行输入框黑底黑字） */
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #141b28; color: var(--text); border-color: #2e3a50; color-scheme: dark; }
[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { background: #171f2d; }
[data-theme="dark"] .info-item { background: #151c29; }
[data-theme="dark"] .info-item .value-long { background: #121826; border-color: #2e3a50; }
[data-theme="dark"] .stat-cell { background: linear-gradient(160deg,#1b2432,#181f2e); }
[data-theme="dark"] .skeleton { background: #27303f; }
[data-theme="dark"] .modal-head { background: linear-gradient(180deg,#1a2230,#171e2b); }
[data-theme="dark"] .tag { background: #252d46; color: #a9b8ff; }
[data-theme="dark"] .pill.pending { background: var(--warn-soft); color: #f2bd71; }
[data-theme="dark"] .pill.done { background: var(--ok-soft); color: #7ad58f; }
[data-theme="dark"] .pill.dismissed { background: #262e3c; color: var(--muted); }
[data-theme="dark"] .note-box.disease { background: #2a2224; border-color: #7a4044; }
[data-theme="dark"] .note-box.pharma { background: #1c2637; border-color: #3a5a8a; }
[data-theme="dark"] .theme-toggle:hover { background: #27334b; }

/* 我的填写记录：营期 × 日期 透视表（左侧营期列固定，日期横向滚动） */
table.pivot { font-size: 12px; white-space: nowrap; }
table.pivot th, table.pivot td { padding: 6px 10px; }
table.pivot thead th.pivot-camp { z-index: 3; }
table.pivot thead th.pivot-date { text-align: center; min-width: 54px; font-variant-numeric: tabular-nums; }
table.pivot .pivot-camp {
  position: sticky; left: 0; z-index: 2; text-align: left; font-weight: 600;
  background: var(--card); max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
table.pivot .pivot-num { text-align: center; font-variant-numeric: tabular-nums; }
/* 末端「完播详情」列：区间内有数据的第一天与最后一天之差 */
table.pivot thead th.pivot-detail-head {
  text-align: center; min-width: 88px; font-weight: 700;
  background: linear-gradient(180deg, #e9eefe, #e2e9fb); border-left: 2px solid var(--border-strong);
}
table.pivot .pivot-detail { text-align: center; font-weight: 700; background: #f5f8ff; border-left: 2px solid var(--border-strong); }
[data-theme="dark"] table.pivot thead th.pivot-detail-head { background: linear-gradient(180deg, #232d40, #1e2634); }
[data-theme="dark"] table.pivot .pivot-detail { background: #1f2735; }
/* 汇总表的「合计（整体）」行 */
table.pivot tr.pivot-total th, table.pivot tr.pivot-total td { font-weight: 700; background: #f2f5fd; }
[data-theme="dark"] table.pivot tr.pivot-total th, [data-theme="dark"] table.pivot tr.pivot-total td { background: #222b3c; }
table.pivot tbody tr:hover .pivot-camp, table.pivot tbody tr:hover .pivot-num { background: #f6f8fd; }
[data-theme="dark"] table.pivot tbody tr:hover .pivot-camp, [data-theme="dark"] table.pivot tbody tr:hover .pivot-num { background: #232d40; }

/* 汇总表清晰度增强：表头吸顶（左列同时吸左）+ 今日列高亮 + 掉播圆点 + 营期标签分组 */
.pivot-wrap { max-height: 72vh; overflow: auto; }
table.pivot thead th { position: sticky; top: 0; z-index: 2; background: var(--card); box-shadow: inset 0 -1px 0 var(--border-strong); }
table.pivot thead th.pivot-camp { z-index: 4; }
table.pivot tbody .pivot-camp { z-index: 3; }
table.pivot .pivot-today { background: #fff8e6; }
table.pivot thead th.pivot-today { background: linear-gradient(180deg, #fdf1cf, #fbe8b6); }
[data-theme="dark"] table.pivot .pivot-today { background: #2a2718; }
[data-theme="dark"] table.pivot thead th.pivot-today { background: linear-gradient(180deg, #3a331c, #322c19); }
.today-tag {
  display: block; margin-top: 2px; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: #b56a03;
}
/* 掉播圆点：格内右上角一个小点（颜色随连续天数：黄 1 天 / 红 2 天 / 紫 ≥3 天） */
table.pivot .pivot-num { position: relative; }
.drop-dot {
  position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c, #f59e0b); box-shadow: 0 0 0 1.5px rgba(255,255,255,.85);
}
[data-theme="dark"] .drop-dot { box-shadow: 0 0 0 1.5px rgba(0,0,0,.6); }
table.pivot .pivot-num.drop-yellow { color: #b45309; font-weight: 700; }
table.pivot .pivot-num.drop-red { color: #b91c1c; font-weight: 700; }
table.pivot .pivot-num.drop-purple { color: #6d28d9; font-weight: 700; }
/* 营期视角：按标签分组的组头行 */
table.pivot tr.pivot-group th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #3346a5; background: #eef2ff; border-top: 1px solid rgba(59,91,219,.18);
  border-bottom: 1px solid rgba(59,91,219,.18);
}
[data-theme="dark"] table.pivot tr.pivot-group th { color: #a9b8ff; background: #212a3d; }
/* 范围摘要行（查看范围卡片 + 汇总表卡片各一份，保证两处口径可见一致） */
.scope-line { font-size: 12px; color: var(--muted); line-height: 1.7; }
.scope-line b { color: var(--text); }
/* 范围提示条：起止颠倒（红）/ 区间内无数据（红）/ 部分天缺填报（琥珀提示） */
.scope-warn {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.8; border: 1px solid transparent;
}
.scope-warn.danger { background: #fff1f1; border-color: #f5b5b5; color: #a12525; }
.scope-warn.danger b { color: #8c1d1d; }
.scope-warn.info { background: #fffaf0; border-color: #f0d9a8; color: #8a5b12; }
.scope-warn.info b { color: #7a4f0d; }
.scope-warn button.small { vertical-align: middle; }
[data-theme="dark"] .scope-warn.danger { background: #2b1e20; border-color: #6b3639; color: #ff9d9d; }
[data-theme="dark"] .scope-warn.danger b { color: #ffb3b3; }
[data-theme="dark"] .scope-warn.info { background: #2b2418; border-color: #5d4a22; color: #f2c981; }
[data-theme="dark"] .scope-warn.info b { color: #fbbf24; }
.drop-legend {
  display: inline-block; padding: 0 7px; border-radius: 999px; font-weight: 700;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}

/* 数据统计 · 掉播下钻（列表行 / 预警徽标 / 详情头 / 分段切换） */
.drop-row { cursor: pointer; }
.drop-row:hover td { background: #eef3ff; }
.drop-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; border: 1px solid transparent;
}
.drop-alert-strip { padding: 10px 12px; background: #fffaf2; border: 1px solid #f3e0c0; border-radius: var(--radius-sm); }
.drop-alert-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin: 0 8px 6px 0; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; border: 1px solid transparent; background: #fff; cursor: pointer;
}
.drop-alert-chip .chip-sub { font-size: 11.5px; font-weight: 500; opacity: .85; }
.drop-alert-chip:hover { filter: brightness(.97); transform: translateY(-1px); }
.detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-head h2 { font-size: 18px; }
.seg {
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-2);
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none;
}
.seg.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.seg:hover:not(.active) { background: #f3f6fc; }
[data-theme="dark"] .drop-alert-strip { background: #2b2418; border-color: #4a3a1c; }
[data-theme="dark"] .drop-row:hover td { background: #222a40; }
[data-theme="dark"] .seg { background: #1f2937; }

/* 必填校验：未填的字段高亮（输入后自动消失） */
.field-invalid {
  border-color: var(--danger) !important;
  background: #fff7f7 !important;
  box-shadow: 0 0 0 3px rgba(224,49,49,.14) !important;
}
[data-theme="dark"] .field-invalid { background: #2b1e20 !important; }

/* 关联用户到药师 · 防呆元素（步骤引导 / 当前操作药师横幅 / 分组按钮） */
.p-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.p-step {
  background: var(--primary-soft); color: #3346a5; border: 1px solid rgba(59,91,219,.18);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
}
.p-step-arrow { color: var(--muted-2); font-size: 12px; }
.p-target {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--primary-soft); border: 1px solid rgba(59,91,219,.28);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; color: #3346a5;
}
.p-target b { font-size: 15px; }
.p-target.warn { background: var(--warn-soft); border-color: var(--warn); color: #b56a03; }
.p-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-actions-label {
  font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .06em;
  min-width: 34px;
}
.p-actions-note { font-size: 11px; color: var(--muted-2); }
.p-actions-exec { padding-top: 6px; border-top: 1px dashed var(--border); }
[data-theme="dark"] .p-target { color: #aabcff; }
[data-theme="dark"] .p-step { color: #aabcff; }

/* 勾选框 / 单选框：不被全局 input{width:100%} 拉宽 */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0;
  flex: none; accent-color: var(--primary); cursor: pointer; box-shadow: none;
}
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--primary); }

/* 关联用户到药师：筛选后的紧凑列表（一行一位用户 + 状态 + 快捷关联/解绑） */
.p-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.p-row:last-child { border-bottom: none; }
.p-row:hover { background: #f6f8fd; }
.p-row .p-info { flex: 1; min-width: 0; }
.p-row .p-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-row .p-name em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; }
.p-row .p-meta { font-size: 11px; color: var(--muted); }
[data-theme="dark"] .p-row:hover { background: #232d40; }

/* 营期管理：列表仅显示营期名称（点击进入详情弹窗） */
.camp-name-list { display: flex; flex-direction: column; gap: 8px; }
.camp-name-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 12px 14px;
  font-size: 15px; font-weight: 600; font-family: inherit;
  background: #f8fafd; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); box-shadow: none; cursor: pointer;
}
.camp-name-item:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.camp-name-item .camp-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-name-item .camp-name-go { flex: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.camp-name-item:hover .camp-name-go { color: var(--primary); }
[data-theme="dark"] .camp-name-item { background: #151c29; }

/* 营期管理：紧凑卡片（参与员工/用户 下拉+悬浮） */
#camp-list .card { padding: 12px 14px; margin-bottom: 12px; }
#camp-list .card h2 { font-size: 15px; }
.camp-block { margin-top: 8px; }
.camp-block-title { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.camp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.emp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-soft); color: #3346a5; border: 1px solid rgba(59,91,219,.18);
  border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 500;
}
.emp-chip .emp-num { font-style: normal; cursor: pointer; background: rgba(59,91,219,.14); border-radius: 999px; padding: 0 5px; font-size: 10px; font-weight: 700; }
.emp-chip .emp-num:hover { background: rgba(59,91,219,.25); }
.chip-x { border: none; background: transparent; color: var(--muted); width: 14px; height: 14px; padding: 0; line-height: 1; border-radius: 50%; cursor: pointer; font-size: 12px; box-shadow: none; }
.chip-x:hover { background: var(--danger-soft); color: var(--danger); }
.camp-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.camp-add select { font-size: 12px; padding: 5px 8px; }
.camp-add input { font-size: 12px; padding: 5px 8px; }
.camp-add button { padding: 4px 9px; font-size: 12px; }
.camp-users-panel { margin-top: 6px; padding: 8px 10px; background: #f8fafd; border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 220px; overflow: auto; }
.camp-u { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.camp-u:last-child { border-bottom: none; }
.camp-u a { font-weight: 500; }
[data-theme="dark"] .camp-users-panel { background: #151c29; }
[data-theme="dark"] .emp-chip { color: #aabcff; }

/* 营期批量添加/移出用的勾选行。
   整个 <label> 都可点，而不是只有那个 13×13 的小方块 —— 手机上手指点不中，
   这是"批量操作在手机上好用不好用"的关键。 */
.pick-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 13px; line-height: 1.35;
}
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: rgba(59, 91, 219, .06); }
.pick-row input[type="checkbox"] { flex: none; margin: 0; cursor: pointer; }
.pick-row > span { min-width: 0; }

/* 添加用户的悬浮下拉（显示用户详情，避免重名选错） */
.udrop-wrap { position: relative; }
.udrop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); max-height: 300px; overflow: auto; min-width: 250px; display: none;
}
.udrop-wrap:hover .udrop { display: block; }
.udrop-search { padding: 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); }
.udrop-search input { font-size: 13px; }
.udrop-item { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.udrop-item:hover { background: #f6f8fd; }
.udrop-item:last-child { border-bottom: none; }
.udrop-name { font-weight: 600; font-size: 13px; }
.udrop-name em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; margin-left: 4px; }
.udrop-detail { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
[data-theme="dark"] .udrop { background: #1a2230; }
[data-theme="dark"] .udrop-item:hover { background: #232d40; }

/* 每日填写：已填写行 → 水印提示（数字以 placeholder 水映展示，不留在输入框内） */
.df-row-filled td { background: #f3faf5; }
.df-row-filled .tag { background: var(--ok-soft); color: #1f7a30; }
.df-row-filled input::placeholder { color: #5fa878; font-weight: 600; }
[data-theme="dark"] .df-row-filled td { background: #16241b; }

/* 每日填写规则：上线数必须 ≥ 完播数（违规时完播输入框标红 + 红色提示） */
.df-invalid { border-color: var(--danger) !important; background: #fff7f7 !important; box-shadow: 0 0 0 3px rgba(224,49,49,.14) !important; }
.df-err { color: var(--danger); font-weight: 600; font-size: 11px; margin-top: 3px; }
[data-theme="dark"] .df-invalid { background: #2b1e20 !important; }

/* ============ 响应式 ============ */
@media (max-width: 720px) {
  .container { padding: 16px 14px 40px; }
  .topbar { margin: -16px -14px 16px; padding: 12px 14px; }
  .topbar h1 { font-size: 17px; }
  .note-box { min-height: auto; }
}

/* ============ 流畅与动效层（animate.css 集成 + GPU 微交互动效） ============ */
:root { --animate-duration: 450ms; } /* 让 animate.css 入场节奏更利落 */

/* 选中文本 & 滚动条（含 Firefox 细滚动条） */
::selection { background: rgba(59,91,219,.18); }
[data-theme="dark"] ::selection { background: rgba(107,140,255,.3); }
* { scrollbar-width: thin; scrollbar-color: #b9c3d4 transparent; }
[data-theme="dark"] * { scrollbar-color: #3a4557 transparent; }
::-webkit-scrollbar-thumb:active { background: #8fa0ba; background-clip: content-box; }

/* 通用按钮：悬浮轻浮起 / 按下回压（纯 transform，走 GPU，不引起重排） */
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(1px) scale(.98); }
/* 特殊按钮（标签页 / 员工小叉 / 顶栏按钮按下）保持不动 */
button.tab:hover, button.tab:active,
.chip-x:hover, .chip-x:active { transform: none; }

/* 标签 / 员工芯片：轻浮起 */
.tag, .emp-chip { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.tag:hover, .emp-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* 统计格：悬浮轻微上浮 + 阴影渐显 */
.stat-cell { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.stat-cell:hover { transform: translateY(-1px); border-color: #c9d4ea; box-shadow: var(--shadow); }
[data-theme="dark"] .stat-cell:hover { border-color: #3e4d69; }

/* 基本信息块：悬浮描边强调 */
.info-item { transition: border-color .15s ease, box-shadow .15s ease; }
.info-item:hover { border-color: #c9d4ea; box-shadow: var(--shadow-sm); }

/* 倒计时/今日未填（此前内联颜色，深色主题下刺眼）：改为主题适配 */
.pill.nf { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .pill.nf { background: #3a2426; color: #ff8a8a; }

/* 弹窗：轻微缩放入场（更精致的层级感） */
@keyframes modalPop {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* 待回访提醒条：每轮先整体弹入（.toast 自带 slidein），轮换只换文字不重复弹 */

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }}

/* ==================================================================
   手机端适配层（手机 / 小平板，<=720px 生效；桌面端完全不受影响）
   ------------------------------------------------------------------
   为什么要单独一层：原来只有零散的几个断点，宽表格（客户列表 12 列、
   统计透视表）在手机上会把整页撑出横向滚动条、按钮又小到点不准。
   这里的规矩：
     · 双列/多列布局一律变单列（form-row / grid-2 / row / stat-strip）；
     · 宽表格**在卡片内横向滚动**（给右侧留出让用户看得出"还能往右划"的渐隐提示）；
     · 触控目标够大（按钮 ≥40px 高、输入框 ≥16px 字号防 iOS 自动放大）；
     · 顶部/底部留出 iPhone 安全区，别被刘海和手势条盖住。
   ================================================================== */
@media (max-width: 720px) {
  /* ---- 触控尺寸：手机上点得准比排得密更重要 ---- */
  button, .btn, input[type="button"], input[type="submit"] { min-height: 40px; padding-left: 14px; padding-right: 14px; }
  button.small { min-height: 34px; padding-left: 11px; padding-right: 11px; }
  /**
   * iOS：输入框字号 <16px 会在聚焦时自动放大整页，很晕 —— 手机上统一提到 16px。
   *
   * ⚠️ 这里**必须**用 !important，别再改成"列组合选择器"的写法。
   * 踩过两次：
   *   · 第 1 次只写了 `select`（特异性 0,0,1），被 `.small { font-size:12px }`(0,1,0)
   *     和 `.camp-add select`(0,1,1) 压过 → 没生效；
   *   · 第 2 次改成 `.small select`（**后代**选择器）—— 可是实际元素是
   *     `<select class="small">`，类在元素**自己身上**，不是它的祖先，所以还是没匹配上 →
   *     真机实测 staff.html 的部门下拉、permissions.html 的「复制某人的权限」仍是 12px。
   * 直接用 !important 一劳永逸：这条规则的唯一目的就是"别让小字号输入框害 iOS 放大整页"，
   * 没有任何场景需要被别的规则覆盖。
   */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }
  /* 下拉/输入框在手机上占满一行更好点 */
  .row > *, .grid-2 > *, .form-row > * { flex: 1 1 100%; min-width: 0; }
  select, .picker { max-width: none; width: 100%; }

  /* ---- 顶部栏：标题一行、操作换行，不挤成一团 ---- */
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar .actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  /**
   * ⚠️ 这里**不能**写 `flex: none`。
   *
   * 原本是"按钮别被拉长"的意思，但代价是子项也**不能收缩**：`.actions` 里有一句比较长的
   * 说明文字（如 stats.html 的「导出在下方『每日完播汇总表』卡片里…」），
   * `flex: none` 让它保持 max-content 宽度 → 整条顶部栏溢出 → 把**整个页面**撑宽。
   * 真机实测（find-overflow-by-experiment.mjs）：stats.html 上隐藏 `.topbar` 后
   * 文档宽从 418 掉回 390 —— 多出来的 28px 就是这句话。
   * 改成 `flex: 0 1 auto` + `min-width: 0`：按钮仍是自然宽度（不拉伸），
   * 但文字可以收缩换行。
   */
  .topbar .actions > * { flex: 0 1 auto; min-width: 0; }
  .topbar h1 { width: 100%; }
  /**
   * 顶栏里的「身份条」（当前身份 + 视角下拉 + 退出登录）。
   *
   * ⚠️ 这几行是**真机量出来的**：身份条在手机上原本是 604px 宽，把整页撑到 614px ——
   * 用户在 iPhone 上看到的是"整页被缩小"，而不是横向滑动。
   * 原因：它是个 inline-flex 的 span，里面还有一个 `min-width:150px` 的下拉框；
   * 作为 flex 子项默认 `min-width:auto`，不会被压缩，于是把自己的内容宽度顶成了整页宽度。
   * 修法：手机上让它自己占满一行、允许收缩、允许内部换行。
   * （jsdom 不做真实布局，这类问题只有真浏览器能量出来 —— 见 ui-real-mobile.mjs）
   */
  #admin-me { flex: 1 1 100%; min-width: 0; max-width: 100%; display: block; }
  #admin-me > span { display: flex !important; flex-wrap: wrap; max-width: 100%; gap: 6px 8px; }
  #admin-me select,
  #admin-me button { max-width: 100%; }
  #admin-me select { min-width: 0 !important; flex: 1 1 140px; }

  /* ---- 标签页：横向滑动（手机上 5 个页签一行放不下） ---- */
  .tabs {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; }

  /* ---- 宽表格：卡片内横向滚动 + 右侧渐隐"还能划"提示 ---- */
  .card > table, .card .table-wrap > table, table:not(.pivot) { min-width: 640px; }
  .card { position: relative; }
  .card > table, .card .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap, .pivot-wrap { max-width: 100%; }
  th, td { padding: 9px 8px; white-space: nowrap; }
  /* 单元格里的长文本允许换行（客户姓名/微信名这类） */
  td.wrap, td .wrap { white-space: normal; }
  .scroll-hint::after {
    content: '← 左右滑动看更多 →'; display: block; text-align: right;
    font-size: 11px; color: var(--muted); padding: 4px 2px 0;
  }

  /* ---- 表单/筛选：竖排、留白收紧 ---- */
  .filters-actions { margin-top: 0; width: 100%; }
  .filters-actions button { flex: 1; }
  label { font-size: 12.5px; }
  .stat-strip { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .stat-cell { padding: 10px 12px; }
  .stat-cell .val { font-size: 20px; }

  /* ---- 弹窗：手机上贴边 + 底部安全区，按钮竖排更好点 ---- */
  .modal { width: calc(100vw - 20px) !important; max-height: 88vh; overflow: auto; }
  .modal .modal-body { padding: 14px; }
  .modal .modal-foot, .modal-body .modal-actions { display: flex; flex-direction: column-reverse; gap: 8px; }
  .modal .modal-foot button, .modal-body .modal-actions button { width: 100%; }
  /* 多选下拉的面板：手机上占满宽度，别跑到屏幕外 */
  .picker-panel { min-width: 0; width: calc(100vw - 40px); max-width: 420px; }

  /* ---- 提醒条 / 提示：手机底部留出安全区，不压住内容 ---- */
  .toast { left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* ---- 客户详情：字段卡片单列（手机上两列太挤） ---- */
  .info-item { padding: 8px 10px; }
  .info-item .value { font-size: 13.5px; }
  .note-pair, .long-grid { grid-template-columns: minmax(0, 1fr); }

  /* ---- 回访日历：手机上一格放不下太多字 ---- */
  .calendar { gap: 3px; }
  .cal-cell { min-height: 46px; padding: 3px; }
  .cal-num { min-width: 22px; padding: 1px 5px; font-size: 11px; }
  .cal-legend { font-size: 11px; }

  /* ---- 卡片内边距整体收紧，手机屏小，内容多 ---- */
  .card { padding: 14px 12px; }
  .card h2 { font-size: 15.5px; }
  .container { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* 窄手机（<=400px）：再收一档，保证不横向溢出 */
@media (max-width: 400px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .topbar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .tabs { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .card { padding: 12px 10px; }
  button, .btn { padding-left: 11px; padding-right: 11px; }
}