/* 全局兜底：hidden 就是不该显示。
   ⚠️ 以前踩过好几次：display:flex 的元素会盖掉浏览器默认的 [hidden]{display:none}，
   导致"明明设了 hidden 却还在"（设置页的「断开」按钮就这么露出来过）。 */
[hidden] { display: none !important; }

/* 添益富能平台 · 公共样式（深浅色变量 / 侧边栏 / 通用组件） */

/* ============ 主题变量 ============ */
:root[data-theme="dark"] {
  --bg-app: #0f1011;
  --bg-sidebar: #131415;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(255, 255, 255, 0.07);
  --bg-elevated: #1a1b1d;
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --text-primary: #e6e6e8;
  --text-secondary: #8a8f98;
  --text-tertiary: #5c6169;
  --accent: #5e6ad2;
  --accent-hover: #6f79e0;
  --accent-soft: rgba(94, 106, 210, 0.14);
  --toggle-track: #2a2c2f;
  --avatar-grad-a: #5e6ad2;
  --avatar-grad-b: #8a5ed2;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  --danger: #e5484d;
  --danger-hover: #f2555a;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --warn: #f2a33c;
  --warn-soft: rgba(242, 163, 60, 0.14);
  --money: #4ecda4;
}

:root[data-theme="light"] {
  --bg-app: #ffffff;
  --bg-sidebar: #f7f7f8;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.06);
  --bg-elevated: #ffffff;
  --border: rgba(0, 0, 0, 0.09);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --text-primary: #1c1d21;
  --text-secondary: #6b7078;
  --text-tertiary: #9ba0a8;
  --accent: #4c5ad9;
  --accent-hover: #3f4dc4;
  --accent-soft: rgba(76, 90, 217, 0.1);
  --toggle-track: #dcdde0;
  --avatar-grad-a: #5e6ad2;
  --avatar-grad-b: #8a5ed2;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.12);
  --danger: #d13438;
  --danger-hover: #b92a2e;
  --danger-soft: rgba(209, 52, 56, 0.1);
  --warn: #b8720f;
  --warn-soft: rgba(184, 114, 15, 0.12);
  --money: #0f6e56;
}

/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg-app);
  color: var(--text-primary);
  display: flex;
  overflow: hidden;
  transition: background 0.18s ease, color 0.18s ease;
}

/* ============ 侧边栏 ============ */
.sidebar {
  width: 240px;
  min-width: 240px;
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: background 0.18s ease, border-color 0.18s ease;
}

/* Logo 区 */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.brand-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--avatar-grad-a), var(--avatar-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.brand-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

/* 导航 */
.nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
}

.nav-section {
  margin-bottom: 18px;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 4px 10px 6px;
  letter-spacing: 0.04em;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px;
  margin-bottom: 1px;
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--bg-active);
  color: var(--text-primary);
  font-weight: 500;
}

.nav-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-item.active svg {
  color: var(--accent);
  opacity: 1;
}

/* 侧边栏底部 */
.sidebar-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 主题切换 */
.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px;
}

.theme-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12.5px;
}

.theme-label svg {
  width: 14px;
  height: 14px;
}

.toggle {
  position: relative;
  width: 34px;
  height: 20px;
  background: var(--toggle-track);
  border-radius: 999px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background 0.18s ease;
  flex-shrink: 0;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] .toggle::after {
  transform: translateX(14px);
}

.toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent);
}

/* 用户区 */
.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.user-row:hover {
  background: var(--bg-hover);
}

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-grad-a), var(--avatar-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ 内容区 ============ */
.content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ============ 视图切换 ============ */
.view { display: none; }
.view.active { display: block; }

/* 骨架占位 */
.skeleton {
  margin-top: 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 56px 24px;
  text-align: center;
  color: var(--text-tertiary);
}

.skeleton .sk-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton .sk-icon svg { width: 20px; height: 20px; opacity: 0.6; }

.skeleton .sk-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.skeleton .sk-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-tertiary);
  max-width: 460px;
  margin: 0 auto;
}

/* ============ 页面通用 ============ */
.page {
  padding: 28px 32px 40px;
  max-width: 1400px;
  width: 100%;
}

/* 页头 */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
}

.page-subtitle {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn svg { width: 14px; height: 14px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* 搜索框 */
.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search svg {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.search input {
  height: 30px;
  width: 200px;
  padding: 0 10px 0 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s ease;
}

.search input::placeholder { color: var(--text-tertiary); }

.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* 筛选下拉 */
.select {
  height: 30px;
  padding: 0 26px 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='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 8px center;
  background-size: 12px;
}

.select:focus { border-color: var(--accent); }

/* 工具栏 */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}

.toolbar-spacer { flex: 1; }

/* ============ 表格 ============ */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-app);
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.12s ease;
}

tbody tr:hover { background: var(--bg-hover); }

tbody td {
  padding: 11px 14px;
  color: var(--text-secondary);
  vertical-align: middle;
  white-space: nowrap;
}

/* 名称列：头像 + 文字 */
.cell-name {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cell-name .avatar-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-grad-a), var(--avatar-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.cell-name strong {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 13px;
}

/* 标签 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 11.5px;
  font-weight: 450;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 状态 */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status.active .dot {
  background: #4cb782;
  box-shadow: 0 0 0 3px rgba(76, 183, 130, 0.16);
}

.status.disabled .dot {
  background: var(--text-tertiary);
  box-shadow: 0 0 0 3px var(--bg-hover);
}

.status.disabled { color: var(--text-tertiary); }

/* 项目状态：筹备中 / 进行中 / 已停止 */
.status.prep .dot { background: #f2a33c; box-shadow: 0 0 0 3px rgba(242, 163, 60, 0.16); }
.status.stopped .dot { background: #8a8f98; box-shadow: 0 0 0 3px var(--bg-hover); }
.status.stopped { color: var(--text-tertiary); }

/* 备注列 */
.cell-remark {
  color: var(--text-tertiary);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 空值占位（负责人未指定等） */
.cell-empty {
  color: var(--text-tertiary);
  opacity: 0.75;
}

/* 行操作 */
.row-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

tbody tr:hover .row-actions { opacity: 1; }

.icon-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.icon-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

/* 禁用的图标按钮（如项目排序里第一行的「上移」、最后一行的「下移」） */
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn:disabled:hover { background: transparent; color: var(--text-tertiary); }

.icon-btn svg { width: 14px; height: 14px; }

/* 多选筛选器 */
.ms { position: relative; }

.ms-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.ms-trigger:hover { background: var(--bg-hover); color: var(--text-primary); }
.ms-trigger:focus { outline: none; border-color: var(--accent); }
.ms-trigger.open { border-color: var(--accent); }
.ms-trigger svg { width: 12px; height: 12px; opacity: 0.7; }

.ms-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}

.ms[hidden] { display: none; }

.ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  padding: 4px;
  z-index: 30;
  display: none;
}

.ms-panel.open { display: block; }

.ms-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease, color 0.1s ease;
}

.ms-option:hover { background: var(--bg-hover); color: var(--text-primary); }

.ms-box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.ms-option.checked .ms-box {
  background: var(--accent);
  border-color: var(--accent);
}

.ms-box svg {
  width: 10px;
  height: 10px;
  color: #fff;
  opacity: 0;
}

.ms-option.checked .ms-box svg { opacity: 1; }

.ms-panel-foot {
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
  padding-top: 4px;
}

.ms-clear {
  width: 100%;
  padding: 5px 8px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
}

.ms-clear:hover { background: var(--bg-hover); color: var(--text-primary); }

/* 单选下拉：选中态 */
.ms-option .opt-label { flex: 1; }

.ms-option .opt-check {
  width: 13px;
  height: 13px;
  color: var(--accent);
  opacity: 0;
  flex-shrink: 0;
}

.ms-option .opt-check svg { width: 13px; height: 13px; }

.ms-option.sel .opt-check { opacity: 1; }
.ms-option.sel { color: var(--text-primary); }

/* 触发按钮处于筛选态时高亮 */
.ms-trigger.filtered {
  border-color: var(--accent);
  color: var(--text-primary);
  background: var(--accent-soft);
}

.ms-trigger.filtered .ms-label { font-weight: 500; }

/* 身份多标签 */
.tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* 筛选 chip */
.filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}

.filter-chips[hidden] { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 6px 0 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--accent-soft);
  color: var(--text-primary);
  font-size: 11.5px;
  cursor: default;
}

.chip button {
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  line-height: 1;
}

.chip button:hover { color: var(--text-primary); }
.chip button svg { width: 10px; height: 10px; }

/* 危险按钮 */
.btn-danger {
  border-color: transparent;
  background: transparent;
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}

.btn-danger-solid {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-danger-solid:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
  color: #fff;
}

/* ============ 二次确认弹窗 ============ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 60;
}

.confirm-overlay.open { opacity: 1; pointer-events: auto; }

.confirm-card {
  width: 380px;
  max-width: 90vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 20px;
  transform: scale(0.96);
  transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

.confirm-overlay.open .confirm-card { transform: scale(1); }

.confirm-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.confirm-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.confirm-text strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* 二次确认里的补充提示；.warn 用于"删掉就破坏规则"这类需要额外提醒的情况 */
.confirm-hint { display: block; }
/* ⚠️ `.hint.warn`（普通提示的警告态）：以前只有 .confirm-hint.warn 有样式，
   而设备管理页里「服务商家」那两句提示一直在用 `hint warn` → **从来没变色过**（2026-10-14 顺手补上）。 */
.hint.warn { color: var(--warn); }

/* `.switch-row.disabled`：条件不满足时那个勾不让点（比如"采购人不是同城商家"就勾不了） */
.switch-row.disabled { opacity: 0.45; cursor: not-allowed; }

.confirm-hint.warn {
  margin-top: 4px;
  color: var(--warn);
  font-weight: 500;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 操作列 */
.cell-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.link-btn {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.link-btn:hover { background: var(--accent-soft); }

.enter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.enter-btn:hover {
  background: var(--accent);
  border-color: var(--accent-hover);
  color: #fff;
}

.enter-btn svg { width: 12px; height: 12px; transition: transform 0.14s ease; }
.enter-btn:hover svg { transform: translate(1px, -1px); }

/* ============ 详情抽屉 ============ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 92vw;
  height: 100vh;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  z-index: 50;
}

.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.drawer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.drawer-foot .foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 抽屉内的成员卡片 */
.detail-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-card .avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-grad-a), var(--avatar-grad-b));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

.detail-card .dc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-card .dc-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 待改密角标 */
.badge-warn {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  margin-left: 8px;
  border-radius: 4px;
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}

/* 需改密开关 */
.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.switch-row .ms-box { width: 14px; height: 14px; border-radius: 4px; }
.switch-row .ms-box svg { width: 10px; height: 10px; }
.switch-row.checked { color: var(--text-primary); }
.switch-row.checked .ms-box { background: var(--accent); border-color: var(--accent); }
.switch-row.checked .ms-box svg { opacity: 1; }

/* 密码框 */
.pwd-wrap { position: relative; }

.pwd-wrap input { padding-right: 36px; }

.pwd-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.pwd-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.pwd-toggle:active { transform: translateY(-50%) scale(0.9); }
.pwd-toggle svg { width: 15px; height: 15px; overflow: visible; }

/* 眼睛图标：睁眼 ⇄ 闭眼的过渡动画 */
.eye-shape {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
}

.eye-pupil {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.16s ease;
}

.eye-slash {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 密码已掩码（看不见）：眯眼 + 瞳孔收掉 + 斜线画出 */
.pwd-toggle.masked .eye-shape { transform: scaleY(0.62); opacity: 0.6; }
.pwd-toggle.masked .eye-pupil { transform: scale(0.1); opacity: 0; }
.pwd-toggle.masked .eye-slash { stroke-dashoffset: 0; }

.field-link {
  margin-top: 6px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 11.5px;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
}

.field-link:hover { text-decoration: underline; }

/* 校验错误态 */
.field .hint {
  margin-top: 5px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.field .field-error {
  display: none;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--danger);
}

.field.invalid .hint { display: none; }
.field.invalid .field-error { display: block; }

.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: var(--danger);
}

.field.invalid input:focus,
.field.invalid textarea:focus,
.field.invalid select:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.field.invalid .check-item { border-color: var(--danger); }

/* 表单顶部提示 */
.form-notice {
  display: none;
  margin-bottom: 16px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
}

.form-notice.show { display: block; }

/* 表单 */
.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

/* ⚠️ `.p-inp` = 成员门户里**不在 .field 里**的裸输入框（比如「我的资料」表格单元格里那个手机号）。
   并列进同一条规则，是为了不再复制一份声明 —— 门户里再加裸输入框，记得也带上这个类。 */
.field input,
.field select,
.field textarea,
.p-inp {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s ease;
}

.field textarea {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}

/* 原生下拉（抽屉表单内）：强制主题配色，避免系统白底 + 浅色字 */
.field select {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='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 10px center;
  background-size: 12px;
  padding-right: 30px;
  cursor: pointer;
}

.field select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

:root[data-theme="light"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.p-inp:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 身份勾选组 */
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.check-item:hover { background: var(--bg-hover); color: var(--text-primary); }

.check-item.checked {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-primary);
}

.check-item .ms-box { width: 13px; height: 13px; border-radius: 4px; transition: background 0.12s ease, border-color 0.12s ease; }
.check-item.checked .ms-box { background: var(--accent); border-color: var(--accent); }
.check-item .ms-box svg { width: 9px; height: 9px; }
.check-item.checked .ms-box svg { opacity: 1; }

/* 空态 */
.empty {
  padding: 48px 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12.5px;
}

/* 表格底部 */
.table-footer {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
::-webkit-scrollbar-track { background: transparent; }

/* ===== 设置页 ===== */
.settings-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 20px 20px;
  max-width: 760px;
}

.settings-card-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 0;
}

.settings-row-main { min-width: 0; }

.settings-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.settings-row-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

.settings-row .btn { flex-shrink: 0; }

/* ===== 数据看板指标卡 ===== */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 920px;
}

.metric-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}

.metric-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

/* 抽屉内的分区标题（区分只读信息与可编辑区） */
.drawer-section-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 6px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* 危险操作图标按钮（删除） */
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: var(--danger-soft); color: var(--danger-hover); }

/* 抽屉双模式：mode-detail 只读展示 / mode-edit 可编辑
   同一字段放两个元素（.detail-only 与 .edit-only），靠模式类切换 */
.drawer.mode-detail .edit-only { display: none; }
.drawer.mode-edit .detail-only,
.drawer.mode-create .detail-only { display: none; }

/* 佣金列：上下结构（上行金额、下行比例） */
.money-cell .money-main {
  font-size: 13px;
  font-weight: 500;
  color: var(--money);
  line-height: 1.35;
}
.money-cell .money-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.35;
  margin-top: 2px;
}

/* ===== 来源标签：按来源区分配色（辨识度优先，明暗各一版） ===== */
.src-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

:root[data-theme="dark"] .src-douyin   { color: #3ed8e6; background: rgba(62, 216, 230, 0.15); }
:root[data-theme="light"] .src-douyin  { color: #0a7f8c; background: rgba(10, 143, 156, 0.10); }

:root[data-theme="dark"] .src-wechat   { color: #4ed88a; background: rgba(78, 216, 138, 0.15); }
:root[data-theme="light"] .src-wechat  { color: #0b7a41; background: rgba(7, 193, 96, 0.12); }

:root[data-theme="dark"] .src-kuaishou { color: #ffa04d; background: rgba(255, 160, 77, 0.15); }
:root[data-theme="light"] .src-kuaishou{ color: #b25200; background: rgba(255, 102, 0, 0.10); }

:root[data-theme="dark"] .src-supply   { color: #b39df5; background: rgba(179, 157, 245, 0.16); }
:root[data-theme="light"] .src-supply  { color: #5b3fbe; background: rgba(91, 63, 190, 0.10); }

/* 金额数字：等宽数字让竖排对齐，货币符号弱化处理 */
.money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.money .money-sym {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-right: 1px;
}

/* ===== 表格勾选框与批量操作栏 ===== */
/* 自绘勾选框：未选中为深色/浅色底的空心方块，选中/半选为强调色，
   全部走主题变量，明暗模式各自适配 */
.row-check {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.row-check:hover { border-color: var(--text-tertiary); }
.row-check:focus-visible { outline: none; border-color: var(--accent); }

.row-check:checked,
.row-check:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}

.row-check:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 3.5px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.row-check:indeterminate::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 6.5px;
  width: 7px;
  height: 0;
  border-top: 1.5px solid #fff;
}

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bulk-bar[hidden] { display: none; }

.bulk-count {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bulk-bar .btn svg { width: 13px; height: 13px; }

/* ===== 商品类目筛选（标签块，多行自动换行） ===== */
.cat-filter {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.cat-filter-label {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-secondary);
  padding-top: 6px;
  white-space: nowrap;
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cat-chip {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.cat-chip:hover { background: var(--bg-active); }

.cat-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== 带单位后缀的输入框（如 佣金 %） ===== */
.input-affix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  overflow: hidden;
  transition: border-color 0.14s ease;
}
.input-affix:focus-within { border-color: var(--accent); }

/* 覆盖 .field input 的独立边框，让 input 与后缀成为一个整体 */
.field .input-affix input {
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.input-affix .affix-suffix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-hover);
  border-left: 1px solid var(--border-subtle);
  user-select: none;
}

.field.invalid .input-affix { border-color: var(--danger); }

/* ===== 详情里的外链按钮 ===== */
.link-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.link-out:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.link-out svg { width: 13px; height: 13px; flex-shrink: 0; }
.link-out[hidden] { display: none; }

/* 复制成功后的短暂反馈 */
.link-out.copied {
  color: var(--money);
  border-color: var(--money);
  background: transparent;
}

/* ===== 轻提示（导入/导出结果反馈） ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(8px);
  z-index: 200;
  max-width: min(520px, calc(100vw - 48px));
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.err { border-color: var(--danger); color: var(--danger); }

/* ===== 成员身份标签：按身份区分配色（明暗各一版） ===== */
.ident-tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

:root[data-theme="dark"] .ident-admin   { color: #b39df5; background: rgba(179, 157, 245, 0.16); }
:root[data-theme="light"] .ident-admin  { color: #5b3fbe; background: rgba(91, 63, 190, 0.10); }

:root[data-theme="dark"] .ident-talent  { color: #f49fd0; background: rgba(244, 159, 208, 0.16); }
:root[data-theme="light"] .ident-talent { color: #b3308a; background: rgba(179, 48, 138, 0.10); }

:root[data-theme="dark"] .ident-device  { color: #7fb8f5; background: rgba(127, 184, 245, 0.16); }
:root[data-theme="light"] .ident-device { color: #1a6ab8; background: rgba(26, 106, 184, 0.10); }

/* 同城商家（2026-10-11 新增）—— 本地商家客户，用在「同城代运营」这条线上 */
:root[data-theme="dark"] .ident-merchant  { color: #f0a85c; background: rgba(240, 168, 92, 0.16); }
:root[data-theme="light"] .ident-merchant { color: #a35c00; background: rgba(163, 92, 0, 0.10); }
:root[data-theme="dark"] .ident-other   { color: #b4b2a9; background: rgba(180, 178, 169, 0.16); }
:root[data-theme="light"] .ident-other  { color: #5f5e5a; background: rgba(95, 94, 90, 0.10); }

/* ===== 达人平台标签：按平台区分配色（明暗各一版） ===== */
.plat-tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

:root[data-theme="dark"] .plat-douyin    { color: #3ed8e6; background: rgba(62, 216, 230, 0.15); }
:root[data-theme="light"] .plat-douyin   { color: #0a7f8c; background: rgba(10, 143, 156, 0.10); }

:root[data-theme="dark"] .plat-wechat    { color: #4ed88a; background: rgba(78, 216, 138, 0.15); }
:root[data-theme="light"] .plat-wechat   { color: #0b7a41; background: rgba(7, 193, 96, 0.12); }

:root[data-theme="dark"] .plat-kuaishou  { color: #f0c060; background: rgba(240, 192, 96, 0.15); }
:root[data-theme="light"] .plat-kuaishou { color: #b87a00; background: rgba(184, 122, 0, 0.10); }

:root[data-theme="dark"] .plat-xhs       { color: #f58bb8; background: rgba(245, 139, 184, 0.16); }
:root[data-theme="light"] .plat-xhs      { color: #c2185b; background: rgba(194, 24, 91, 0.10); }

:root[data-theme="dark"] .plat-taobao    { color: #f5906e; background: rgba(245, 144, 110, 0.16); }
:root[data-theme="light"] .plat-taobao   { color: #c9421f; background: rgba(201, 66, 31, 0.10); }

:root[data-theme="dark"] .plat-other     { color: #b4b2a9; background: rgba(180, 178, 169, 0.16); }
:root[data-theme="light"] .plat-other    { color: #5f5e5a; background: rgba(95, 94, 90, 0.10); }

/* ===== 设备采购：分节标题 / 数量控件 / 表格内输入 / 明细表 ===== */
.section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 28px 0 12px;
}

.qty-ctrl {
  display: inline-flex;
  align-items: center;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.qty-btn {
  width: 26px;
  height: 100%;
  border: none;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.qty-btn:hover { background: var(--bg-active); color: var(--text-primary); }
.qty-val {
  min-width: 36px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.qty-ctrl.disabled { opacity: 0.45; pointer-events: none; }

.price-input {
  width: 112px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.price-input:focus { outline: none; border-color: var(--accent); }

/* 设备目录里的「备注」输入框（跟单价一样可就地改） */
.remark-input {
  width: 164px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
}
.remark-input:focus { outline: none; border-color: var(--accent); }

/* 详情弹窗里的「规格参数 / 备注」列表（规格是一行一个参数） */
.spec-list {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-app);
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-primary);
}
.spec-list .spec-row + .spec-row { border-top: 1px dashed var(--border); padding-top: 4px; margin-top: 4px; }
.spec-list .spec-empty { color: var(--text-tertiary); }

.pur-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.pur-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}
.pur-table td {
  padding: 8px 6px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.pur-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pur-table tr:last-child td { border-bottom: none; }

.pur-total {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}
.add-row[hidden] { display: none; }
.add-row input {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
}
.add-row input:focus { outline: none; border-color: var(--accent); }
/* 内联新增表单里的「类型」下拉（与 .field select 同款自绘箭头） */
.add-row select {
  width: 92px;
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='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 9px center;
  background-size: 12px;
  cursor: pointer;
}
.add-row select:focus { outline: none; border-color: var(--accent); }
.add-row select option { background-color: var(--bg-elevated); color: var(--text-primary); }
.add-row input[type="text"] { width: 180px; }
.add-row input[type="number"] { width: 110px; }

.mini-search {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
}
.mini-search:focus { outline: none; border-color: var(--accent); }

.pick-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.pick-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pick-item:hover { border-color: var(--text-tertiary); }
.pick-item.checked { border-color: var(--accent); background: var(--accent-soft); }
.pick-item .pi-box {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pick-item.checked .pi-box { background: var(--accent); border-color: var(--accent); }
.pick-item .pi-box svg { width: 10px; height: 10px; color: #fff; opacity: 0; }
.pick-item.checked .pi-box svg { opacity: 1; }
.pick-item .pi-name { font-size: 13px; color: var(--text-primary); }
.pick-item .pi-sub { margin-left: auto; font-size: 11.5px; color: var(--text-tertiary); }

/* ===== 设备类型标签（硬件 / 服务） ===== */
.kind-tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
:root[data-theme="dark"] .kind-hardware  { color: #7fb8f5; background: rgba(127, 184, 245, 0.16); }
:root[data-theme="light"] .kind-hardware { color: #1a6ab8; background: rgba(26, 106, 184, 0.10); }
:root[data-theme="dark"] .kind-service   { color: #f0c060; background: rgba(240, 192, 96, 0.15); }
:root[data-theme="light"] .kind-service  { color: #b87a00; background: rgba(184, 122, 0, 0.10); }

/* ===== 设备目录分组标题行（硬件 / 服务隔开） ===== */
.group-row td {
  background: var(--bg-hover);
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.group-row .gr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.group-row .gr-bar {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.group-row .gr-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
}
.group-row .gr-meta {
  font-size: 11.5px;
  color: var(--text-tertiary);
}
:root[data-theme="dark"] .gr-hardware .gr-bar  { background: #7fb8f5; }
:root[data-theme="light"] .gr-hardware .gr-bar { background: #1a6ab8; }
:root[data-theme="dark"] .gr-service .gr-bar   { background: #f0c060; }
:root[data-theme="light"] .gr-service .gr-bar  { background: #b87a00; }

:root[data-theme="dark"] .kind-mixed   { color: #b39df5; background: rgba(179, 157, 245, 0.16); }
:root[data-theme="light"] .kind-mixed  { color: #5b3fbe; background: rgba(91, 63, 190, 0.10); }

/* ===== 必选 / 可选服务 ===== */
:root[data-theme="dark"] .kind-required  { color: #f0c060; background: rgba(240, 192, 96, 0.15); }
:root[data-theme="light"] .kind-required { color: #8a5a00; background: rgba(184, 122, 0, 0.13); }
:root[data-theme="dark"] .kind-optional  { color: #9aa0a8; background: rgba(154, 160, 168, 0.14); }
:root[data-theme="light"] .kind-optional { color: #64686f; background: rgba(100, 104, 111, 0.10); }

/* 服务的两个子分组行：比一级分组行再缩进一层，用左侧竖线体现层级 */
:root[data-theme="dark"] .gr-required .gr-bar  { background: #f0c060; }
:root[data-theme="light"] .gr-required .gr-bar { background: #b87a00; }
:root[data-theme="dark"] .gr-optional .gr-bar  { background: #6b7078; }
:root[data-theme="light"] .gr-optional .gr-bar { background: #a4a8ae; }
.group-row.gr-sub td { padding-left: 30px; background: var(--bg-app); }
.group-row.gr-sub .gr-name { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.group-row.gr-sub .gr-meta { font-size: 11.5px; }

/* 必选服务的勾选框：已勾选且锁死（不可取消），用强调色区分于普通勾选 */
.row-check:disabled { cursor: not-allowed; opacity: 1; }
:root[data-theme="dark"] .row-check:disabled:checked  { background: #b8842c; border-color: #b8842c; }
:root[data-theme="light"] .row-check:disabled:checked { background: #c98a10; border-color: #c98a10; }
.row-check:disabled:not(:checked) { background: var(--bg-hover); border-color: var(--border); }

/* 底部的必选服务配置进度 */
.req-state { font-size: 12px; white-space: nowrap; }
.req-state.ok { color: var(--money); }
.req-state.wait { color: var(--text-tertiary); }

/* 新增表单里的「必选服务」开关 */
.add-req {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.add-req[hidden] { display: none; }
.add-req input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

/* 明细表里的分组行：左侧段名、右侧小计 */
.group-row .gr-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.group-row .gr-sum {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pur-table .group-row td {
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
}

/* ===== 采购预设下拉 ===== */
.preset-wrap { position: relative; display: inline-block; }
.preset-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 8px;
  z-index: 40;
  display: none;
}
.preset-panel.open { display: block; }

.preset-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.preset-item:hover { background: var(--bg-hover); }
.preset-item .pi-name { font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.preset-item .pi-meta { margin-left: auto; font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; }
.preset-item .icon-btn { flex-shrink: 0; }

.preset-foot {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.preset-save-row { display: flex; gap: 8px; align-items: center; }
.preset-save-row input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: inherit;
}
.preset-save-row input:focus { outline: none; border-color: var(--accent); }
.preset-foot .hint { font-size: 11.5px; color: var(--text-tertiary); margin-top: 8px; }

/* ===== 服务到期日（临期/已过期提醒） ===== */
.expiry {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .expiry.warn { color: #f0c060; }
:root[data-theme="light"] .expiry.warn { color: #b87a00; }
:root[data-theme="dark"] .expiry.over { color: #f58b6e; }
:root[data-theme="light"] .expiry.over { color: #c9421f; }
.expiry .ex-days { font-size: 11.5px; opacity: 0.85; }
/* 服务到期下面的「来自哪项服务」 */
.ex-from {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
}
/* 派生字段：只读展示，替代原来的输入框（虚线边表示不可直接编辑） */
.derived-field {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--bg-app);
  color: var(--text-secondary);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 服务明细（编辑抽屉里的「服务明细」区） ===== */
.svc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.svc-empty {
  font-size: 12.5px;
  color: var(--text-tertiary);
  padding: 8px 0;
}
.svc-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-app);
  font-size: 12.5px;
}
.svc-item.off { opacity: 0.55; }
.svc-item.off .svc-name { text-decoration: line-through; }
.svc-name { color: var(--text-primary); font-weight: 500; }
.svc-meta { font-size: 11.5px; color: var(--text-tertiary); }
.svc-exp { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.svc-lock { font-size: 11.5px; color: var(--text-tertiary); }
.svc-actions { margin-top: 2px; }
.svc-total {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding: 9px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* 明细行里的周期 / 到期日 / 已停用 */
.as-item-cycle { font-size: 11px; color: var(--text-tertiary); }
.as-item-exp { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.as-item.off { opacity: 0.55; }
.as-item.off .as-item-name { text-decoration: line-through; }
:root[data-theme="dark"] .as-item-exp.warn, :root[data-theme="dark"] .svc-exp.warn { color: #f0c060; }
:root[data-theme="light"] .as-item-exp.warn, :root[data-theme="light"] .svc-exp.warn { color: #b87a00; }
:root[data-theme="dark"] .as-item-exp.over, :root[data-theme="dark"] .svc-exp.over { color: #f58b6e; }
:root[data-theme="light"] .as-item-exp.over, :root[data-theme="light"] .svc-exp.over { color: #c9421f; }
:root[data-theme="dark"] .kind-off { color: #9aa0a8; background: rgba(154, 160, 168, 0.14); }
:root[data-theme="light"] .kind-off { color: #64686f; background: rgba(100, 104, 111, 0.10); }

/* 单据来源：维修 */
:root[data-theme="dark"] .kind-repair { color: #f58b6e; background: rgba(245, 139, 110, 0.16); }
:root[data-theme="light"] .kind-repair { color: #c9421f; background: rgba(201, 66, 31, 0.10); }

/* ===== 设备组「账目」区（详情抽屉内，窄列布局：第一行 日期·单号·金额，第二行 来源·内容） ===== */
.led { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.led-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
}
.led-date { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.led-id { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.led-amt {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.led-sub { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
.led-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.led-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 11px;
  background: var(--bg-hover);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.led-total span:last-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--money);
  font-variant-numeric: tabular-nums;
}
.led-empty { font-size: 12.5px; color: var(--text-tertiary); padding: 10px 0; }

/* 流水行里的「删除这笔」（比表格里的图标按钮再小一号，别把行撑高） */
.led-row .icon-btn.led-del {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
}
.led-row .icon-btn.led-del svg { width: 13px; height: 13px; }

/* ===== 设备账目页（表格一行 = 一组设备，花费看抽屉） ===== */
.lg-foot-k { color: var(--text-tertiary); font-size: 12px; margin-right: 5px; }

/* ===== 设备账目 · 详情抽屉 ===== */
/* 账目内容多（待处理 + 流水 + 操作），给它一个更宽的变体；不动公共 .drawer */
.drawer.drawer-wide { width: 560px; }

/* 抽屉里的「待处理」列表 */
.lgd-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
}
.lgd-row:last-child { border-bottom: none; }
.lgd-row-t { color: var(--text-primary); font-weight: 500; }
.lgd-row-s { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; min-width: 0; }
.lgd-row-s.warn { color: #b87a00; }
.lgd-row-s.over { color: #c9421f; }
:root[data-theme="dark"] .lgd-row-s.warn { color: #f0c060; }
:root[data-theme="dark"] .lgd-row-s.over { color: #f58b6e; }
.lgd-row .btn-mini { margin-left: auto; }
.lgd-none {
  font-size: 12.5px;
  color: var(--text-tertiary);
  padding: 10px 0;
}

/* 小号按钮（待处理行里的动作） */
.btn.btn-mini {
  height: 26px;
  padding: 0 11px;
  font-size: 12px;
  border-radius: 6px;
}

/* 待处理区的表头（全选 + 批量续费） */
.lgd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.lgd-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.lgd-head .btn-mini { margin-left: auto; }
.lgd-row-gap { width: 15px; flex-shrink: 0; }
label.lgd-row { cursor: pointer; }

/* 批量续费面板里的逐项清单 */
.rn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.rn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-app);
  font-size: 12.5px;
}
.rn-t { color: var(--text-primary); font-weight: 500; }
.rn-s {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rn-s strong { font-weight: 500; color: var(--text-primary); }
.rn-ar { opacity: 0.7; }

/* 选中项的属性说明（加服务/加硬件面板里的下拉下面） */
.pick-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.55;
}
.pick-hint .kind-tag { flex-shrink: 0; }

/* 二次确认弹窗里的动态补充区（如"停用硬件时顺手收尾维修"） */
.confirm-extra {
  margin-bottom: 16px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-app);
}
.confirm-extra .ce-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--warn);
  margin-bottom: 3px;
}
.confirm-extra .ce-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.confirm-extra .field { margin-bottom: 10px; }
.confirm-extra .field:last-of-type { margin-bottom: 0; }
.confirm-extra .ce-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 9px;
  line-height: 1.55;
}
/* 关闭开放范围时列出的受影响占用 */
.confirm-extra .ce-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--text-primary);
}
.confirm-extra .ce-row + .ce-row { border-top: 1px dashed var(--border); }

/* 设备调用：子项目标签（青绿，跟平台标签区分开） */
:root[data-theme="dark"] .kind-sub { color: #5dcaa5; background: rgba(93, 202, 165, 0.16); }
:root[data-theme="light"] .kind-sub { color: #0f6e56; background: rgba(15, 110, 86, 0.10); }

/* 设备调用页：一套设备组一个小方框（iOS 磁贴）
   靠「灰底分组容器 + 无描边卡片 + 大圆角」分层，不用描边 */
/* 设备调用页：按「开放范围组合」分组，每组 = 小灰标题 + 一个灰底面板
   （同组卡片的大项目标签数相同 → 高度天然一致，不用再纠结容器大小） */
.dev-sec + .dev-sec { margin-top: 18px; }
.dev-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 8px;
}
.dev-sec-t { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.dev-sec-n { font-size: 11.5px; color: var(--text-tertiary); }
.dev-group {
  background: var(--bg-sidebar);
  border-radius: 18px;
  padding: 14px;
}
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
}
.dev-card {
  /* ⚠️ 必须显式写成 flex 纵向：<button> 的 UA 样式会把内容**垂直居中**，
     卡片被网格拉伸时（同排里有人内容更高），内容少的那张就会被推到中间、
     跟别的卡片对不齐。用 flex + align-items:stretch + 默认 flex-start 钉死在左上角。 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--bg-elevated);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease;
}
.dev-card:hover { filter: brightness(1.05); }
:root[data-theme="light"] .dev-card:hover { background: #fbfbfd; }
.dev-card:active { transform: scale(0.97); }      /* iOS：按下缩一下，不用悬停抬升 */
.dev-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dev-card-top { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dev-card-ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}
.dev-card-ic svg { width: 16px; height: 16px; }
.dev-card-id {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* 卡片上的「调用范围」：显示大项目（灰标签，跟弹窗里的大项目一个色）；没开放就写一行灰字 */
/* 卡片第二行：调用范围标签 + 紧跟其后的状态胶囊 */
/* 卡片副行（2026-10-11 用户要求「统一成 2 个大项目的高度」）：
   固定成**上下两行** —— 上行大项目标签（1 个或 2 个），下行状态 / 金额。
   这样不管这套设备开了 1 个还是 2 个大项目，卡片高度和内容位置都完全一致，不会对不齐。 */
.dev-card-caps {
  /* flex:1 → 卡片被拉伸时这把副行撑满，配合下面值行的 margin-top:auto，
     让「标签」顶对齐、「状态/金额」贴着卡片底部 —— 同排所有卡片三行都对齐。 */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 11px;
  /* ⚠️ 兜底：收益页「暂无收益」的卡片没有值行，靠这个最小高度跟别的一样高
     （＝两行标签 60 + 间距 8 + 值行 27，改标签区高度时这里要跟着改） */
  min-height: 95px;
}
/* 卡片上的大项目标签：**永远竖排、一个标签一行**（2026-10-11 用户要求「一直两行」）。
   ⚠️ 不能再让它横向自动换行 —— 那样宽窗口挤成一行、窄窗口变成两行，同一张卡片两种长相。
   min-height 预留「两行标签」的高度，1 个标签的卡片也跟 2 个的一样高（实测一行 26px、两行含间距 60px）。 */
.dev-card-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 60px; }
/* 标签 + 占用分数 同一行（设备调用页用；分数高度跟标签一样，不增加行数、不影响卡片高度） */
.tag-row { display: flex; align-items: center; gap: 8px; }
/* 设备认领页：每行空位标签下面那行小字（还能认领 N 个 / 已满） */
.claim-slot { margin-top: 6px; font-size: 12px; color: var(--text-tertiary); }
/* 「已占用 / 已开放」分数：分母 = 这条大项目下开放的子项目数，分子 = 其中有未归还占用的 */
.slot-n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.slot-n.some { color: var(--accent); }
:root[data-theme="dark"] .slot-n.full { color: #ff9f0a; }
:root[data-theme="light"] .slot-n.full { color: #a95a00; }
/* 值行（状态胶囊 / 金额）：靠右 + 贴底（同排卡片即使因标签换行而高度不同，值行也在同一水平） */
.dev-card-caps > .dev-pill,
.dev-card-caps > .rev-amt { margin-left: auto; margin-top: auto; }
.dev-card-nocap { font-size: 11.5px; color: var(--text-tertiary); }
/* 卡片上的「调用范围」标签：比弹窗里那个灰标签更醒目
   （主题色淡底 + 主题色字 + 一圈淡描边，比 11.5px 的灰标签更大更实） */
.dev-card-caps .big-tag {
  padding: 4px 11px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
:root[data-theme="dark"] .dev-card-caps .big-tag {
  color: #b3baf9;
  background: rgba(94, 106, 210, 0.26);
  box-shadow: inset 0 0 0 1px rgba(94, 106, 210, 0.45);
}
:root[data-theme="light"] .dev-card-caps .big-tag {
  color: #3f4cc4;
  background: rgba(76, 90, 217, 0.13);
  box-shadow: inset 0 0 0 1px rgba(76, 90, 217, 0.22);
}
/* iOS 胶囊：半透明同色底 + 同色文字 */
.dev-pill {
  display: inline-block;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.45;
}
:root[data-theme="dark"] .dev-pill.ok { color: #30d158; background: rgba(48, 209, 88, 0.16); }
:root[data-theme="light"] .dev-pill.ok { color: #248a3d; background: rgba(52, 199, 89, 0.14); }
:root[data-theme="dark"] .dev-pill.warn { color: #ff9f0a; background: rgba(255, 159, 10, 0.16); }
:root[data-theme="light"] .dev-pill.warn { color: #a95a00; background: rgba(255, 149, 0, 0.15); }
:root[data-theme="dark"] .dev-pill.bad { color: #ff453a; background: rgba(255, 69, 58, 0.16); }
:root[data-theme="light"] .dev-pill.bad { color: #c9271d; background: rgba(255, 59, 48, 0.13); }
:root[data-theme="dark"] .dev-pill.idle { color: #98989d; background: rgba(152, 152, 157, 0.16); }
:root[data-theme="light"] .dev-pill.idle { color: #6c6c70; background: rgba(142, 142, 147, 0.13); }

/* 设备收益：卡片上的累计金额（跟 .dev-pill 同形，等宽数字 + 金额色，第二行靠右）
   —— 靠右那条规则在上面 .dev-card-caps > .rev-amt 里，这里只管长相 */
.rev-amt {
  display: inline-block;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .rev-amt { color: #4ecda4; background: rgba(78, 205, 164, 0.16); }
:root[data-theme="light"] .rev-amt { color: #0f6e56; background: rgba(15, 110, 86, 0.10); }

/* 设备收益：流水行右侧的金额（不吃卡片那个右推） */
.rev-row-amt {
  flex-shrink: 0;
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--money);
}

.u-late { color: var(--danger); }
.u-note { color: var(--text-tertiary); }

/* 大项目标签（灰 —— 大项目 / 子项目 / 平台 三级里最弱的一级） */
.big-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.5;
}
:root[data-theme="dark"] .big-tag { color: #b9b7ae; background: rgba(185, 183, 174, 0.15); }
:root[data-theme="light"] .big-tag { color: #5f5e5a; background: rgba(95, 94, 90, 0.10); }

/* 设备占用管理中心（弹窗比常规确认框宽；里面装当前占用 + 新增占用两块） */
.confirm-card.card-wide { width: 560px; max-height: 88vh; overflow-y: auto; }
.confirm-actions #useGoAsset { margin-right: auto; }
/* 弹窗标题栏 = 这套设备（组编号 + 归属者/状态/到期一行）；不给切换，所以没有下拉 */
.uo-titlebar {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.uo-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.uo-titlemeta { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }

.uo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 8px;
}
.uo-head-t { font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.uo-head-m { font-size: 11.5px; color: var(--text-tertiary); }
.uo-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-app);
  padding: 4px 10px;
  max-height: 212px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.uo-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.uo-row + .uo-row { border-top: 1px dashed var(--border); }
.uo-row .uo-main { flex: 1; min-width: 0; }
.uo-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.uo-name { font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.uo-meta { font-size: 11.5px; color: var(--text-tertiary); margin-top: 4px; }
.uo-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.uo-row.done { opacity: 0.6; }
.uo-empty { padding: 10px 0; font-size: 12.5px; color: var(--text-tertiary); }
/* 没开放任何子项目时的兜底提示（登记表单会被藏起来，但历史照看） */
.uo-nocap {
  padding: 12px 13px;
  margin-bottom: 16px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 编辑抽屉里的「开放调用范围」：大项目 → 子项目两层，靠左缩进体现层级 */
.caps-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-app);
  padding: 12px 12px 8px;
  margin-bottom: 16px;
}
.caps-hint { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.6; margin-bottom: 8px; }
.cap-proj.off { display: flex; align-items: center; gap: 9px; padding: 6px 0; opacity: 0.5; }
.cap-subs { padding-left: 25px; }
.cap-subs:not(:last-child) { padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; }
.cap-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.cap-proj .cap-row { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.cap-row.on { color: var(--text-primary); }
.cap-name { flex: none; }
.cap-note { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-tertiary); }
.cap-box {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cap-row:hover .cap-box { border-color: var(--accent); }
.cap-box.on { background: var(--accent); border-color: var(--accent); }
.cap-box.on::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cap-box.half { background: var(--accent-soft); border-color: var(--accent); }
.cap-box.half::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 5.5px;
  width: 8px;
  height: 2px;
  background: var(--accent);
}
.uo-fold {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-top: 1px dashed var(--border);
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  text-align: left;
}
.uo-fold:hover { color: var(--text-secondary); }
.uo-fold-ar { font-size: 10px; line-height: 1; }
.uo-fold-body .uo-row:first-child { border-top: 0; }

/* 设备组状态：报修中（有未完成的维修工单，派生显示） */
:root[data-theme="dark"] .status.repair { color: #f0c060; }
:root[data-theme="light"] .status.repair { color: #8a5a00; }
:root[data-theme="dark"] .status.repair .dot { background: #f0c060; box-shadow: 0 0 0 3px rgba(240, 192, 96, 0.18); }
:root[data-theme="light"] .status.repair .dot { background: #b87a00; box-shadow: 0 0 0 3px rgba(184, 122, 0, 0.14); }

/* ===== 账目入口卡片（设备详情抽屉里，点它跳到「设备账目」页） ===== */
.led-jump {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-app);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.12s ease;
}
.led-jump:hover { border-color: var(--accent); background: var(--accent-soft); }
.led-jump:active { transform: scale(0.985); }
.led-jump:focus-visible { outline: none; border-color: var(--accent); }
.led-jump-ic {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.led-jump-ic svg { width: 16px; height: 16px; }
.led-jump-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.led-jump-t { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.led-jump-s { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.led-jump-ar {
  flex-shrink: 0;
  display: flex;
  color: var(--text-tertiary);
  transition: color 0.14s ease, transform 0.14s ease;
}
.led-jump-ar svg { width: 15px; height: 15px; }
.led-jump:hover .led-jump-ar { color: var(--accent); transform: translateX(2px); }
.lgd-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-app);
  margin-bottom: 16px;
}
.lgd-sum-k { font-size: 12.5px; color: var(--text-secondary); }
.lgd-sum-v {
  font-size: 18px;
  font-weight: 500;
  color: var(--money);
  font-variant-numeric: tabular-nums;
}

/* ===== 设备组明细行 ===== */
.as-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
}
/* 明细行上的「停用 / 恢复」按钮（窄抽屉里不挤） */
.as-item .link-btn { font-size: 11.5px; flex-shrink: 0; }
.as-item .svc-lock { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.as-item .kind-off { flex-shrink: 0; }
.as-item:last-child { border-bottom: none; }
.as-item .gr-bar {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.as-item-name { color: var(--text-primary); }
.as-item-qty {
  margin-left: auto;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* 设备组状态：停用（已退出使用） */
.status.off .dot { background: #d9534f; box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.16); }
.status.off { color: var(--text-secondary); }

/* 设备组状态：需续费（必选服务已过期，派生显示） */
:root[data-theme="dark"] .status.renew { color: #f58b6e; }
:root[data-theme="light"] .status.renew { color: #c9421f; }
:root[data-theme="dark"] .status.renew .dot { background: #f58b6e; box-shadow: 0 0 0 3px rgba(245, 139, 110, 0.18); }
:root[data-theme="light"] .status.renew .dot { background: #c9421f; box-shadow: 0 0 0 3px rgba(201, 66, 31, 0.14); }
.st-orig {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
}

/* ===== 明细分组（可折叠） ===== */
.as-group { border-bottom: 1px solid var(--border-subtle); }
.as-group:last-child { border-bottom: none; }

.as-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.as-group-head:hover { color: var(--accent); }
.as-group-head .as-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 0.15s ease;
}
.as-group.open .as-arrow { transform: rotate(90deg); }
.as-group-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* 折叠体：只做高度过渡（不叠透明度，避免把逐项错落感糊掉） */
.as-group-body {
  padding-bottom: 4px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.as-group-body .as-item { padding-left: 20px; }

/* 展开时明细「一项接一项」向下滑入（iOS 风格错落） */
@keyframes as-item-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.as-group.open .as-group-body .as-item {
  animation: as-item-in 0.44s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.as-group.open .as-group-body .as-item:nth-child(1) { animation-delay: 0.06s; }
.as-group.open .as-group-body .as-item:nth-child(2) { animation-delay: 0.11s; }
.as-group.open .as-group-body .as-item:nth-child(3) { animation-delay: 0.16s; }
.as-group.open .as-group-body .as-item:nth-child(4) { animation-delay: 0.21s; }
.as-group.open .as-group-body .as-item:nth-child(5) { animation-delay: 0.26s; }
.as-group.open .as-group-body .as-item:nth-child(6) { animation-delay: 0.31s; }
.as-group.open .as-group-body .as-item:nth-child(7) { animation-delay: 0.36s; }
.as-group.open .as-group-body .as-item:nth-child(8) { animation-delay: 0.41s; }
.as-group.open .as-group-body .as-item:nth-child(n+9) { animation-delay: 0.46s; }

/* ⚠️ 这里刻意不做 prefers-reduced-motion 屏蔽（2026-10-07 用户确认需要看到动效）：
   本机 Windows 关闭了「动画效果」，浏览器会持续上报 prefers-reduced-motion: reduce，
   一旦这里加屏蔽，这两处动效将永远不播 —— 曾因此被误判为"没有过渡动画"。
   若将来要恢复无障碍适配，把下面这段放开即可：
   @media (prefers-reduced-motion: reduce) {
     .as-group-body, .as-group-head .as-arrow { transition: none; }
     .as-group.open .as-group-body .as-item { animation: none; }
   }
*/

/* ===== 商家库：左列表 + 右详情（2026-10-15 加的「详细信息录入」工作区） ===== */
/* 分类切换行（同城商家信息 / 供应链商家信息）—— 在页头与工作区之间（2026-10-15 加） */
.mch-kinds { margin: 0 0 14px; }
.mch-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.mch-list { border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-elevated); }
.mch-tools { padding: 10px; border-bottom: 0.5px solid var(--border); }
.mch-search { width: 100%; height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-primary); font-size: 13px; outline: none; margin-bottom: 8px; font-family: inherit; }
.mch-search:focus { border-color: var(--accent); }
/* 250 → 294：页头下面多了一行分类 chips（28 高 + 14 间距 = 42） */
.mch-rows { max-height: calc(100vh - 294px); overflow-y: auto; }
.mch-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  border-bottom: 0.5px solid var(--border-subtle); }
.mch-row:last-child { border-bottom: none; }
.mch-row:hover { background: var(--bg-hover); }
.mch-row.active { background: var(--bg-active); }
.mch-row-main { flex: 1; min-width: 0; }
.mch-row-sub { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mch-form { border: 0.5px solid var(--border); border-radius: 10px; background: var(--bg-elevated); padding: 14px 16px; }
.mch-form-h { display: flex; align-items: center; gap: 12px; padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border); margin-bottom: 4px; }
.mch-form-h > div:first-child { flex: 1; min-width: 0; }
.mch-form-t { font-size: 15px; font-weight: 500; }
.mch-form-s { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.mch-group { padding: 12px 0; border-bottom: 0.5px solid var(--border-subtle); }
.mch-group-t { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px; }
.mch-group .field { margin-bottom: 12px; max-width: 420px; }
.mch-req { color: var(--warn); font-size: 11px; margin-left: 4px; }
.mch-radio { display: flex; gap: 6px; flex-wrap: wrap; }
.mch-opt { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 12px; cursor: pointer; font-family: inherit; }
.mch-opt:hover { color: var(--text-primary); }
.mch-opt.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mch-form-f { display: flex; gap: 8px; justify-content: flex-end; padding-top: 14px; }

/* ===== 商家库 · 表格形态样式（2026-10-16 加）：商家库页签用；上面那套面板样式仍归「待录入商家」 ===== */
/* 工具行：搜索 + 完善度 chips */
.mch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mch-bar .mch-search { width: 260px; margin-bottom: 0; }
/* 详情改成了居中弹窗（2026-10-16 晚），样式见下面「商家详情弹窗」段 */

/* ===== 商家详情弹窗（2026-10-16 晚：从右侧抽屉改成居中大弹窗 —— 好看 + 可改性高） =====
   外层复用公共 .confirm-overlay（居中 + 遮罩 + 打开动画），卡片自己长这样。 */
.mch-modal {
  width: 760px; max-width: 94vw; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-pop);
  transform: scale(0.97); transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.confirm-overlay.open .mch-modal { transform: scale(1); }
.mch-modal-head { display: flex; align-items: center; gap: 11px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.mch-modal-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--avatar-grad-a), var(--avatar-grad-b));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.mch-modal-titles { flex: 1; min-width: 0; }
.mch-modal-title { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.mch-modal-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.mch-modal-body { flex: 1; overflow-y: auto; padding: 14px 18px 4px; }
.mch-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border-subtle); flex-shrink: 0; }
/* 弹窗里的两列表单：短字段并排、wide 字段跨两列（详细地址 / 服务标签这类长的） */
.mch-group .mch-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.mch-group .mch-fgrid .field { margin-bottom: 0; max-width: none; }
.mch-group .mch-fgrid .field.wide { grid-column: 1 / -1; }

/* 成员身份标签：供应链商家（2026-10-15 新增）—— 用青绿跟「同城商家」的琥珀区分开 */
:root[data-theme="dark"] .ident-supply { color: #4dd4c0; background: rgba(77, 212, 192, 0.16); }
:root[data-theme="light"] .ident-supply { color: #0e7c6b; background: rgba(14, 124, 107, 0.10); }

/* ===== 发布大厅（管理端 → 门户「大厅」，2026-10-17） =====
   ⚠️ 类名统一 pub-*（theme.css 里原本没有这个前缀）；输入框不复用 .field，
      是为了让「标签在左、内容在右」跟收件人那行对齐。 */
.pub-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px 14px;
  margin-bottom: 14px;
  max-width: 980px;
}
.pub-box .cat-chips { margin-bottom: 16px; }
.pub-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.pub-label { width: 66px; flex-shrink: 0; font-size: 12px; color: var(--text-secondary); padding-top: 7px; }
.pub-hint { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.pub-people { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.pub-main { flex: 1; min-width: 0; }
.pub-textarea, .pub-date {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s ease;
}
.pub-textarea { width: 100%; padding: 8px 10px; line-height: 1.55; resize: vertical; }
.pub-date { width: 150px; height: 32px; padding: 0 10px; }
.pub-textarea:focus, .pub-date:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root[data-theme="dark"] .pub-date { color-scheme: dark; }
:root[data-theme="light"] .pub-date { color-scheme: light; }
.pub-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.pub-tip { font-size: 12px; color: var(--text-tertiary); }
/* 每块卡片自己的标题行（三块独立后，标题写在卡片里，不再靠上面的类型 chips） */
.pub-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pub-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.pub-sub { font-size: 12px; color: var(--text-tertiary); }
/* 「已发记录」的小标题行（左边标题，右边筛选 chips） */
.hall-list-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 6px; }
.hall-list-head .filter-chips { padding-bottom: 0; margin-bottom: 0; }
/* 记录列表里的类型标签（任务 / 公告 / 提醒 —— 明暗各一版） */
.nt-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  font-size: 11px; white-space: nowrap; }
:root[data-theme="dark"] .nt-task     { color: #c3a6ff; background: rgba(150, 110, 255, 0.16); }
:root[data-theme="dark"] .nt-announce { color: #7cc7f0; background: rgba(70, 170, 230, 0.16); }
:root[data-theme="dark"] .nt-notice   { color: #b4b2a9; background: rgba(180, 178, 169, 0.16); }
:root[data-theme="light"] .nt-task     { color: #6b3fc4; background: rgba(120, 80, 200, 0.10); }
:root[data-theme="light"] .nt-announce { color: #1f6c96; background: rgba(40, 140, 190, 0.10); }
:root[data-theme="light"] .nt-notice   { color: #5f5e5a; background: rgba(95, 94, 90, 0.10); }

/* ===== 成员分组（2026-10-17）：表格里的组标签 / 抽屉里的组勾选 / 管理分组的弹窗 ===== */
.grp-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
  font-size: 11px; white-space: nowrap; }
:root[data-theme="dark"] .grp-tag { color: #9ec5ff; background: rgba(90, 150, 240, 0.16); }
:root[data-theme="light"] .grp-tag { color: #2b5aa8; background: rgba(60, 120, 210, 0.10); }
.grp-tag.grp-more { opacity: 0.75; }
/* 抽屉里「+ 新建分组」展开的小输入行 */
/* ⚠️ .grp-inline 是 flex，会盖掉 [hidden] 的 display:none → 必须显式写一条 */
.grp-inline[hidden] { display: none; }
.grp-inline { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
/* 抽屉里组名后面的人数 */
.check-item .grp-n { margin-left: 6px; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.grp-inline input { flex: 1; min-width: 0; height: 30px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; outline: none; }
.grp-inline input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 管理分组弹窗（宽版居中，跟商家库那个弹窗同一套路子） */
.grp-modal { width: 720px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-pop); overflow: hidden;
  transform: scale(0.97); transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1); }
.confirm-overlay.open .grp-modal { transform: scale(1); }
.grp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.grp-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.grp-body { flex: 1; display: flex; min-height: 240px; overflow: hidden; }
.grp-side { width: 210px; flex-shrink: 0; border-right: 1px solid var(--border-subtle);
  padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.grp-list { display: flex; flex-direction: column; gap: 2px; }
.grp-item { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
  color: var(--text-secondary); }
.grp-item:hover { background: var(--bg-hover); }
.grp-item.active { background: var(--bg-active); color: var(--text-primary); font-weight: 500; }
.grp-item .grp-n { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.grp-side > .btn { width: 100%; justify-content: center; }
.grp-main { flex: 1; min-width: 0; padding: 14px 16px; overflow-y: auto; }
.grp-main .field { margin-bottom: 14px; }
.grp-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.grp-foot { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-top: 1px solid var(--border-subtle); flex-shrink: 0; }
.grp-spacer { flex: 1; }
/* 抽屉里「+ 新建分组」输入框的出错态（重名/空名） */
.grp-inline input.grp-err { border-color: var(--danger); }
/* 组 chip 里的人数（跟组名同一按钮里，小一号、淡一点） */
.cat-chip .grp-n { margin-left: 5px; font-size: 10.5px; opacity: 0.65; font-variant-numeric: tabular-nums; }

/* ===== 任务发布（达人全域变现，2026-10-17 第 1 版）===== */
/* 任务详情里的逐人状态行 */
.tk-person { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 0.5px solid var(--border-subtle); font-size: 13px; }
.tk-person:last-child { border-bottom: 0; }
.tk-person .tk-who { flex: 1; min-width: 0; color: var(--text-primary); }
/* 抽屉里「发给谁」的两排 chips 之间留点空 */
#tkGroupChips .cat-chip, #tkPeopleChips .cat-chip { height: 26px; padding: 0 10px; font-size: 12px; }

/* ===== 任务管理：页内 tab（任务发布 / 任务收取） ===== */
.page-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin: 2px 0 16px; }
.ptab { padding: 7px 12px 9px; background: transparent; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
  font-size: 13px; color: var(--text-secondary);
  transition: color 0.12s ease, border-color 0.12s ease; }
.ptab:hover { color: var(--text-primary); }
.ptab.active { color: var(--text-primary); font-weight: 500; border-bottom-color: var(--accent); }
.ptab .tab-n { margin-left: 6px; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.ptab.active .tab-n { color: var(--accent); }

/* ===== 2026-10-19：把「任务验收」这个页签做显眼 =====
   用户反馈"管理端怎么进验收、没有这个界面" —— 页签本来就在，只是太小太灰看不见。
   ① 页签字号加大 ② 有待验收时数字变成红色胶囊 ③ 侧边栏「任务管理」挂红点 ④ 发布页顶部横幅 */
.ptab { padding: 9px 14px 11px; font-size: 14px; }
.ptab .tab-n:not(:empty) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; margin-left: 7px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}
.ptab.active .tab-n:not(:empty) { color: #fff; }
/* 侧边栏红点（管理端没有 portal.css，这里补一份） */
.nav-badge {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 10.5px; line-height: 16px;
  text-align: center; font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.nav-badge[hidden] { display: none; }
/* 发布页顶部横幅：有活等着验就冒出来 */
.tk-banner {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 12px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(240, 192, 96, 0.35); background: rgba(240, 192, 96, 0.10);
  color: var(--text-primary); font-family: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.tk-banner[hidden] { display: none; }
.tk-banner:hover { background: rgba(240, 192, 96, 0.18); }
.tk-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: #f0c060; flex-shrink: 0; }
.tk-banner-go { margin-left: auto; color: var(--accent); font-weight: 500; white-space: nowrap; }
:root[data-theme="light"] .tk-banner { border-color: rgba(184, 122, 0, 0.30); background: rgba(184, 122, 0, 0.08); }
:root[data-theme="light"] .tk-banner:hover { background: rgba(184, 122, 0, 0.14); }
:root[data-theme="light"] .tk-banner-dot { background: #b87a00; }
/* 打回：在那行下面就地展开写原因（不用弹窗） */
.reject-row > td { background: var(--bg-hover); }
.reject-box { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.reject-box .p-inp { flex: 1; max-width: 420px; }
/* 二次确认那一格里的问句（通过 / 退回上阶段） */
.reject-ask { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
/* 详情里每人名字后面的时间小字 */
.tk-when { display: block; font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
/* 「打回」按钮用红字，跟「通过」区分开 */
.link-btn.danger { color: var(--danger); }
.link-btn.danger:hover { background: rgba(220, 80, 80, 0.12); }

/* ===== 指定达人：搜索式选人（2026-10-17，替代原来两排 chips） ===== */
.tk-picker { position: relative; }
.tk-search {
  width: 100%; height: 32px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.12s ease;
}
.tk-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tk-search::placeholder { color: var(--text-tertiary); }
.tk-cand {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  max-height: 200px; overflow-y: auto; padding: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-pop);
}
.tk-cand[hidden] { display: none; }
.tk-cand-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 7px 10px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--text-primary); text-align: left;
}
.tk-cand-item:hover { background: var(--bg-hover); }
.tk-cand-more { padding: 6px 10px; font-size: 11.5px; color: var(--text-tertiary); }
.tk-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 22px; align-items: center; }
.tk-pick {
  display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 4px 0 9px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 12px;
}
.tk-pick button {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 3px;
}
/* 选人控件的宿主容器：如果原来带 .check-group（flex），会把候选和已选排成两列 → 强转块级 */
.tk-host { display: block !important; }
/* 分组弹窗里的选人：候选不做浮层（弹窗内滚动会裁掉），直接铺在下面 */
.grp-main .tk-cand { position: static; margin-top: 6px; box-shadow: none; max-height: 148px; overflow-y: auto; }

/* ===== 管理业务板块（2026-10-18） ===== */
.brd-add { display: flex; gap: 8px; margin-bottom: 12px; }
.brd-input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--border); background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; outline: none;
}
.brd-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.brd-list { display: flex; flex-direction: column; gap: 2px; }
.brd-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text-primary); }
.brd-item:hover { background: var(--bg-hover); }
.brd-item.editing { gap: 8px; }
.brd-edit {
  flex: 1; min-width: 0; height: 28px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--accent); background: transparent; color: var(--text-primary);
  font-size: 13px; font-family: inherit; outline: none;
}
.brd-act { display: flex; align-items: center; gap: 2px; }

/* ===== 任务：直播话术折叠 + 交付链接（2026-10-18） ===== */
.tk-scr { margin-top: 6px; font-size: 12px; }
.tk-scr > summary { cursor: pointer; color: var(--accent); list-style: none; }
.tk-scr > summary::-webkit-details-marker { display: none; }
.tk-scr > summary::before { content: "▸ "; }
.tk-scr[open] > summary::before { content: "▾ "; }
.tk-scr-body {
  margin-top: 6px; padding: 8px 10px; border-radius: 6px;
  background: var(--bg-app); border: 0.5px solid var(--border-subtle);
  font-size: 12.5px; line-height: 1.75; color: var(--text-secondary);
  max-height: 220px; overflow-y: auto; white-space: normal;
}
.tk-link { color: var(--accent); word-break: break-all; }
/* 门户大厅：交链接那一行 */
.hl-vrow > td { background: var(--bg-hover); }
.hl-vbox { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.hl-vbox .p-inp { flex: 1; max-width: 460px; }

/* ===== 日期框占位「年 / 月 / 日」（2026-10-18）=====
   ⚠️ 原生 date 的空态文字是浏览器语言定的，改不了 → 自画一行，空值时把原生文字设成透明。
   只在不聚焦时藏，聚焦后正常显示数字（不然没法输入）。 */
.date-wrap { position: relative; display: block; }
.date-wrap .date-ph {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-tertiary); pointer-events: none; white-space: nowrap;
}
.date-wrap.has-val .date-ph,
.date-wrap input[type="date"]:focus + .date-ph { display: none; }
.date-wrap:not(.has-val) input[type="date"]:not(:focus)::-webkit-datetime-edit { color: transparent; }

/* ===== 新建任务：附件（选本地文件，一条一行，2026-10-18 改成真上传） ===== */
/* 隐藏原生 file 控件（按钮点它），样式自己画 */
.tk-fileinput { display: none; }
.tk-file {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; padding: 7px 10px; border-radius: 9px;
  background: var(--bg-hover); font-size: 12.5px;
}
.tk-file .tk-fname {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-primary);
}
.tk-file .tk-fsize { flex-shrink: 0; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.tk-file .icon-btn { flex-shrink: 0; width: 22px; height: 22px; }
.tk-file .icon-btn svg { width: 12px; height: 12px; }

/* ===== 任务详情里的描述与附件（2026-10-18） ===== */
.tk-desc {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: var(--bg-app); border: 0.5px solid var(--border-subtle);
  font-size: 12.5px; line-height: 1.75; color: var(--text-secondary);
}
.tk-files { margin-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.tk-files-k { color: var(--text-tertiary); }
.tk-files .tk-link { padding: 2px 8px; border-radius: 12px; background: var(--accent-soft); text-decoration: none; }
/* 附件是上传的文件时，前面加个下载箭头，跟"外链"区分开 */
.tk-files .tk-dl::before { content: "↓"; margin-right: 3px; opacity: 0.75; }

/* 表格里两个操作按钮（详情 / 撤回）别换行 */
.cell-ops { white-space: nowrap; }
.cell-ops .link-btn + .link-btn { margin-left: 10px; }

/* ===== 业务板块：任务卡片（照「设备调用」的磁贴做的，2026-10-18） =====
   ⚠️ 复用 .dev-card（它是 <button> + flex 纵向，UA 样式才不会把内容垂直居中）；
      这里只加任务专属的几块：标题两行截断、标签行、底部进度 + 状态胶囊。 */
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
.tb-card { padding: 14px 15px; }
.tb-head { display: flex; align-items: flex-start; gap: 9px; flex-shrink: 0; }
.tb-ic { width: 28px; height: 28px; border-radius: 8px; }
.tb-ic svg { width: 15px; height: 15px; }
/* 标题最多两行；min-height 钉成两行的高度 → 一行标题的卡片也跟两行的一样高 */
.tb-name {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 500; line-height: 1.5;
  color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 40px;
}
.tb-body { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.tb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; color: var(--text-tertiary); }
.tb-who { min-width: 0; }
.tb-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.tb-prog { margin-right: auto; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ===== 门户「任务广场」：同一套磁贴卡（2026-10-18） =====
   卡是 <div>（里面有领取/报名按钮，button 不能套 button）；整卡可点 → 进详情弹窗。
   按钮那块要恢复普通光标，不然悬停在按钮上像整卡都能点。 */
.sq-card { cursor: pointer; }
.sq-card .sq-act, .sq-card .sq-state { cursor: auto; }
.sq-card:active { transform: none; }         /* 按卡里的按钮时别让整卡缩一下 */
.sq-state { margin-right: auto; }            /* 状态靠左，按钮靠右 */
.sq-act { flex-shrink: 0; }

/* ===== 任务详情：居中弹窗（2026-10-18，从右侧抽屉改过来；管理端和门户共用这套） =====
   外层复用公共 .confirm-overlay（居中 + 遮罩 + 打开动画），卡片自己长这样。 */
.tkm-modal {
  width: 620px; max-width: 94vw; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-pop);
  transform: scale(0.97); transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.confirm-overlay.open .tkm-modal { transform: scale(1); }
.tkm-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.tkm-titles { flex: 1; min-width: 0; }
.tkm-title { font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--text-primary); }
.tkm-meta { margin-top: 3px; font-size: 12px; color: var(--text-tertiary); }
.tkm-body { flex: 1; overflow-y: auto; padding: 14px 18px 6px; }
.tkm-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border-subtle); flex-shrink: 0;
}
.tkm-foot .sq-state { margin-right: auto; }
/* 详情底部「修改任务」靠左，关闭靠右 */
#tdEdit { margin-right: auto; }

/* 修改模式（抽屉顶部那句提醒：谁已交回不能动 / 已截止不会自动开启）
   ⚠️ 这个块用 hidden 属性控制显隐，所以别给它 display:flex（会盖掉 [hidden]） */
.tk-editnote {
  margin-bottom: 14px; padding: 9px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.6;
  background: rgba(184, 122, 0, 0.12); color: #d8a94a;
}
:root[data-theme="light"] .tk-editnote { background: rgba(184, 122, 0, 0.10); color: #8a5c00; }

/* ===== 门户「我的任务」：打回原因 / 我交了什么（2026-10-19） ===== */
.my-reason {
  margin-top: 2px; padding: 7px 10px; border-radius: 8px;
  font-size: 12px; line-height: 1.6;
  background: rgba(217, 83, 79, 0.12); color: #f0a09b;
  border: 0.5px solid rgba(217, 83, 79, 0.28);
}
:root[data-theme="light"] .my-reason {
  background: rgba(201, 66, 31, 0.08); color: #a3341a; border-color: rgba(201, 66, 31, 0.22);
}
.my-sent { margin-top: 2px; }
/* 「已截止」小标（大厅行内 / 我的任务卡片上）：管理员提前截止的标记 */
.my-closed {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px;
  font-size: 11px; line-height: 1.5; white-space: nowrap;
  background: rgba(217, 83, 79, 0.14); color: #e58f89;
}
:root[data-theme="light"] .my-closed { background: rgba(201, 66, 31, 0.10); color: #a3341a; }
/* 收取 / 已验收 里那条「备注：…」 */
.tk-dl-note { color: var(--text-tertiary); }

/* ===== 验收表里的「交付块」（2026-10-19 重做） =====
   验收的人要先看清达人交的链接/附件，才决定通过还是打回 —— 所以不能再是小灰字 */
.tk-deliver {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--bg-app); border: 0.5px solid var(--border-subtle);
  font-size: 12.5px; line-height: 1.75;
}
.tk-deliver-row { display: flex; align-items: baseline; gap: 8px; }
.tk-deliver-k { flex-shrink: 0; width: 54px; color: var(--text-tertiary); font-size: 11.5px; }
.tk-deliver-v { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tk-deliver-none { color: var(--text-tertiary); }
.tk-deliver-note { color: var(--text-tertiary); font-size: 12px; margin-top: 4px; }
/* 交付内容（作品链接）：文字 + 「复制」按钮
   2026-10-19 用户要求：不用管里面是不是链接，一律给个复制按钮（不跳转，抖音链接要粘到 App）。 */
.tk-copywrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.tk-copyurl {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* 复制按钮：**长得像按钮**（之前只是一行蓝字，用户认不出来「没有复制链接」）。
   ⚠️ 底色用 --accent-soft：用 --bg-elevated 会跟弹窗/卡片同色，边框根本看不出来。 */
.tk-copybtn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.tk-copybtn:hover { border-color: var(--accent); }
.tk-copybtn:active { transform: scale(0.97); }
/* 卡片里那行（我交的）允许换行 */
.my-sent .tk-copywrap { vertical-align: middle; }

/* ===== 平台成员：密码列 + 改密记录（2026-10-19） =====
   用户要求「管理端要能一眼看到成员现在的密码」，所以密文明文放在列表里；
   ⚠️ 只是本机内部用：谁打开这个页面都看得到，上云后要收紧（见上云改造清单 阶段 4/5）。 */
.cell-pwd { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pwd-copy {
  padding: 0 6px; height: 20px; border-radius: 5px;
  border: 1px solid transparent;
  background: var(--accent-soft); color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 20px; letter-spacing: 0.3px;
  cursor: pointer;
}
.pwd-copy:hover { border-color: var(--accent); }
.pwd-copy.ok { color: #4cb782; background: rgba(76, 183, 130, 0.16); }
.pwd-copy.bad { color: var(--danger); background: rgba(217, 83, 79, 0.16); }
.pwd-when { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* 抽屉里的改密记录 */
.pwd-log {
  margin-top: 10px; padding: 9px 10px; border-radius: 8px;
  background: var(--bg-app); border: 0.5px solid var(--border-subtle);
  font-size: 11.5px; line-height: 1.7;
}
.pwd-log-title { color: var(--text-tertiary); margin-bottom: 4px; }
.pwd-log-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pwd-log-at { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.pwd-log-from { color: var(--text-tertiary); text-decoration: line-through; }
.pwd-log-arrow { color: var(--text-tertiary); }
.pwd-log-to { color: var(--text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pwd-log-by { margin-left: auto; font-size: 10.5px; color: var(--text-tertiary); }

/* ===== 管理端锁屏（2026-10-19） =====
   没登录时：html[data-locked] → body 整体不可见（避免内容先闪一下），
   锁屏自己 append 到 body，用 visibility:visible 覆盖父级的 hidden。 */
html[data-locked] body { visibility: hidden; }
.adminlock {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-app);
  visibility: visible;
}
.adminlock-card {
  width: 360px; max-width: calc(100vw - 40px);
  padding: 26px 26px 20px; border-radius: 14px;
  background: var(--bg-elevated);
  border: 0.5px solid var(--border-subtle);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.adminlock-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.adminlock-logo {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
}
.adminlock-title { font-size: 14.5px; font-weight: 500; color: var(--text-primary); }
.adminlock-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.adminlock-card .field { margin-bottom: 14px; }
.adminlock-card .p-inp { width: 100%; box-sizing: border-box; }
.adminlock-err { min-height: 18px; font-size: 12px; color: var(--danger); margin-bottom: 6px; }
.adminlock-btn { width: 100%; height: 36px; }
.adminlock-note { margin-top: 14px; font-size: 11px; line-height: 1.7; color: var(--text-tertiary); text-align: center; }
.adminlock-who { margin-top: 8px; font-size: 11px; color: var(--text-tertiary); text-align: center; }
.adminlock-card.shake { animation: al-shake 0.36s ease; }
@keyframes al-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* ===== 设置页：导入预览（2026-10-19） =====
   选完备份文件先把"里面有什么"摊开，确认了才覆盖 —— 防手滑覆盖掉现在的数据 */
.import-preview {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-app); border: 0.5px solid var(--border-subtle);
  font-size: 12.5px; line-height: 1.75;
}
.import-preview.bad { border-color: rgba(217, 83, 79, 0.5); color: #e58f89; }
.import-preview-title { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.import-preview-line { color: var(--text-secondary); }
.import-preview-warn { margin-top: 6px; color: #d8a94a; }
.import-preview-acts { margin-top: 12px; display: flex; gap: 8px; }

/* ===== 乐观锁冲突提示条（2026-10-19）=====
   两个客户端改了同一条记录 → 后写的被拒绝，底部弹这条，给「刷新看最新」的出口。
   ⚠️ 用 display:flex 控制显隐，所以没有 [hidden] 的坑；但也别给它加 [hidden] 规则。 */
.ty-conflict {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 9000;
  display: flex; align-items: center; gap: 10px;
  max-width: min(720px, calc(100vw - 40px));
  padding: 10px 14px; border-radius: 10px;
  background: var(--bg-elevated);
  border: 0.5px solid rgba(184, 122, 0, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  font-size: 12.5px; line-height: 1.6; color: var(--text-secondary);
}
.ty-conflict-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #d8a94a;
}
.ty-conflict-txt { flex: 1; min-width: 0; }
.ty-conflict-txt b { color: var(--text-primary); }
:root[data-theme="light"] .ty-conflict { border-color: rgba(184, 122, 0, 0.45); }

/* 密码列：哈希后看不到明文，只显示「已设置 / 未设置」（2026-10-19） */
.pwd-set {
  display: inline-block; padding: 0 7px; height: 20px; line-height: 20px; border-radius: 5px;
  font-size: 11.5px; background: var(--accent-soft); color: var(--accent); cursor: help;
}
.pwd-none { font-size: 11.5px; color: var(--text-tertiary); }

/* ============================================================================
   手机端适配（2026-10-19）—— 断点 720px
   宽屏完全不受影响：下面这些类在宽屏默认隐藏，样式只在 media 里生效。
   ========================================================================== */
/* 默认（宽屏）：顶栏和遮罩都不存在 */
.m-bar { display: none; }
.mnav-mask { display: none; }

@media (max-width: 720px) {
  /* ① 顶部窄条：☰ + 当前页标题 */
  .m-bar {
    display: flex; align-items: center; gap: 6px;
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 800;
    padding: 0 8px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-subtle);
  }
  .m-title {
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 8px;
  }
  .m-burger {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  }
  .m-burger span {
    width: 18px; height: 1.6px; border-radius: 1px;
    background: var(--text-primary); display: block;
  }
  .m-burger:active { background: var(--bg-hover); }

  /* ② 侧边栏变抽屉 */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 268px; min-width: 0; height: 100dvh;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
  }
  body.mnav-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.45); }
  .mnav-mask {
    position: fixed; inset: 0; z-index: 850;
    background: rgba(0, 0, 0, 0.5);
  }
  body.mnav-open .mnav-mask { display: block; }

  /* ③ 内容区：给顶栏让位，去掉固定高度（手机上用页面滚动） */
  .content { height: auto; min-height: 100dvh; padding-top: 52px; }

  /* ④ 页头 / 工具栏改成竖排换行
     注：顶栏已经显示页面名，正文里那个大标题就隐藏，省一屏高度 */
  .page-header .page-title { display: none; }
  .page-header .page-subtitle { margin-top: 0; }

  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .toolbar { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar-spacer { display: none; }

  /* ⑤ 表格：允许很宽，靠横向滑动看（首列不冻结，先保证能看清内容） */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  /* 表格：交给内容自己撑开（列宽是内联写死的，撑不开就会横向滚）；
     不强制 640 —— 那会把"要我做"这种窄表的操作列挤到屏幕外 */
  /* ⚠️ 别让单元格换行：7 列的表格一换行就会变成「一/字/一/行」。
     宽就宽，让它横向滑（下面给了滑动提示）。 */
  .table-wrap table { min-width: max-content; }
  .table-wrap th, .table-wrap td { white-space: nowrap; }
  /* ★ 最右边那列（基本是「操作」）钉在右侧：横滑时按钮始终看得见 */
  .table-wrap th:last-child,
  .table-wrap td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: var(--bg-app);
    box-shadow: -10px 0 14px -10px rgba(0, 0, 0, 0.6);
  }
  .table-wrap td:last-child .btn,
  .table-wrap td:last-child a { white-space: nowrap; }

  /* ★ 任务发布 / 任务验收 这两张表：手机上直接改成卡片
     （7 列挤在 390px 里怎么排都难受，横滑又看不到标题全文） */
  /* 表头在这两张表上没意义（每行自带标签），藏掉 */
  .table-wrap table:has(#taskTbody) thead,
  .table-wrap table:has(#inboxTbody) thead { display: none; }
  #taskTbody tr, #inboxTbody tr {
    display: block; padding: 12px 2px;
    border-bottom: 1px solid var(--border-subtle);
  }
  #taskTbody td, #inboxTbody td {
    display: inline-block; border: 0; padding: 0 12px 0 0;
    font-size: 12px; color: var(--text-secondary);
  }
  /* 第 1 列 = 任务名：整行显示，不截断 */
  #taskTbody td:first-child, #inboxTbody td:first-child {
    display: block; width: 100%; padding: 0 0 6px;
    font-size: 13.5px; color: var(--text-primary); white-space: normal;
  }
  /* 最后一列 = 操作：单独一行，按钮做成小胶囊 */
  #taskTbody td:last-child, #inboxTbody td:last-child {
    display: block; width: 100%; padding: 8px 0 0;
    position: static; box-shadow: none; background: transparent;
  }
  #taskTbody td:last-child a, #inboxTbody td:last-child a,
  #taskTbody td:last-child button, #inboxTbody td:last-child button {
    display: inline-block; margin: 0 10px 0 0; font-size: 12.5px;
  }
  #taskTbody td:last-child a[data-tdel], #inboxTbody td:last-child a[data-tdel] { margin-right: 0; }
  /* ★ 大厅那三张表在手机上改成"竖排卡片"：一行一条，不再横向挤
     （整列竖起来读字太难受；表格 block 化之后，每行自然上下堆叠） */
  #viewHall .table-wrap { background: none; }
  #viewHall .table-wrap table,
  #viewHall .table-wrap tbody,
  #viewHall .table-wrap tr,
  #viewHall .table-wrap td { display: block; width: auto; min-width: 0; }
  #viewHall .table-wrap thead { display: none; }
  #viewHall .table-wrap tr {
    padding: 10px 2px; border-bottom: 1px solid var(--border-subtle);
  }
  #viewHall .table-wrap td { border: 0; padding: 2px 0; white-space: normal; }
  #viewHall .table-wrap td:nth-child(2) { font-size: 13.5px; line-height: 1.6; }
  #viewHall .table-wrap td:nth-child(3) { font-size: 12px; color: var(--text-tertiary); }
  #viewHall .table-wrap td:last-child { margin-top: 8px; }
  #viewHall .table-wrap td:last-child .btn { width: 100%; justify-content: center; }
  /* 公告 / 消息 那两张是 3 列：时间在上、内容在下 */
  #viewHall .table-wrap td.ha-time { font-size: 12px; color: var(--text-tertiary); }
  /* 右边一条渐隐，暗示"还能往右滑" */
  .table-wrap {
    background:
      linear-gradient(to left, var(--bg-app) 0, rgba(0,0,0,0) 24px) right / 24px 100% no-repeat,
      linear-gradient(to left, rgba(0,0,0,0.35) 0, rgba(0,0,0,0) 24px) right / 24px 100% no-repeat;
  }

  /* ⑥ 抽屉 / 弹窗铺满屏宽 */
  .drawer { width: 100vw; max-width: 100vw; }
  .drawer.drawer-wide { width: 100vw; }
  .tkm-modal { width: calc(100vw - 20px); max-height: 86dvh; }
  .grp-modal { width: calc(100vw - 20px); max-height: 88dvh; }

  /* ⑥b 设备磁贴卡：手机上不再给标签留固定高度（那是桌面为了对齐才写死的 95px），
     否则卡片底下空一大块 */
  .dev-card { padding: 12px; }
  .dev-card-caps { min-height: 0; gap: 6px; }
  .dev-group { gap: 8px; }

  /* ⑦ 两列表单 / 卡片网格改单列 */
  .field-row { grid-template-columns: 1fr; }
  .tb-grid { grid-template-columns: 1fr; }
  .dev-grid { grid-template-columns: 1fr; }

  /* ⑧ 设置页那种"左说明右按钮"的行：按钮换到下一行 */
  .settings-row { flex-wrap: wrap; }
  .settings-row .btn { flex: 1 1 auto; }

  /* ⑨ 冲突提示条改成贴边 */
  .ty-conflict { left: 10px; right: 10px; transform: none; bottom: 10px; max-width: none; }

  /* ⑩ 输入框 16px：iOS 聚焦时不会自动放大整页 */
  input[type="text"], input[type="password"], input[type="number"],
  input[type="date"], input[type="search"], select, textarea { font-size: 16px; }

  /* ⑪ iOS 底部安全区 */
  .content { padding-bottom: 24px; }
  .drawer-foot, .tkm-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ===== 任务「带哪些产品」（2026-10-20） ===== */
.tk-prods {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0 0;
}
.tk-prod {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  background: var(--accent-soft); color: var(--text-primary);
  font-size: 12.5px; text-decoration: none;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
}
a.tk-prod:hover { border-color: var(--accent); }
.tk-prod-price { color: var(--accent); font-size: 12px; }

/* 身份 chip 锁定（非超级账号不能勾「平台管理员」） */
.check-item.locked {
  opacity: 0.45; cursor: not-allowed;
  position: relative;
}
.check-item.locked::after {
  content: "🔒"; font-size: 10px; margin-left: 4px; opacity: .8;
}

/* 抽屉里「当前密码」单独一行（2026-10-20） */
.pwd-now {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 2px; padding: 7px 10px; border-radius: 8px;
  background: var(--bg-app); border: 0.5px solid var(--border-subtle);
  font-size: 12.5px;
}
.pwd-now-k { color: var(--text-tertiary); }
.pwd-now-v {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--text-primary);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .3px;
}
.pwd-now-v:hover { color: var(--accent); }
.pwd-now-tip { color: var(--text-tertiary); font-size: 11.5px; }
.pwd-now-none { color: var(--text-tertiary); }

/* 设置页：file:// 打开时的警告条（2026-10-20） */
.settings-warn {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(216, 169, 74, 0.12);
  border: 0.5px solid rgba(216, 169, 74, 0.45);
  color: var(--text-secondary); font-size: 12.5px; line-height: 1.7;
}
.settings-warn b { color: var(--text-primary); }
.settings-warn code { font-size: 12px; color: #d8a94a; }

/* 左下角「退出」小按钮（2026-10-20） */
.side-out {
  margin-left: auto;
  border: 0.5px solid var(--border-subtle);
  background: transparent; color: var(--text-tertiary);
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px;
  cursor: pointer; line-height: 1.4;
}
.side-out:hover { color: var(--text-primary); border-color: var(--accent); }