/* Pawtrail Admin Hub —— 内部运营后台样式
 *
 * 色板真源：design/claude-design-prompt-adminhub-v1.md 的「色板」节
 * （它自己继承 App/Theme.swift）。**本文件不新增任何颜色**——
 * 下面 :root 里的每一个值都能在那份 prompt 里逐字找到。
 *
 * 字体纪律：正文 Nunito，**所有数字一律 IBM Plex Mono**。
 * 数字用等宽不是审美：表格里的金额与计数要能上下对齐，
 * 比例条旁边的百分比在刷新时不能左右跳。
 *
 * 🔴 零外部依赖：不引 CDN、不引 Google Fonts。
 *    （曾经的 `/adminhub/report` 服务端那页确实 link 了 fonts.googleapis.com，
 *    但那是它自己的选择，且该页已于主仓 D178 删除）；本页面走的 vhost 带严格头，
 *    且这是内部工具，
 *    断网也要能开。⇒ 字体名列在 font-family 里，装了就用、没装就回落系统字体，
 *    **绝不因为字体没加载就让页面不可用**。
 */

:root {
  /* 底与面 */
  --page: #E9DCC4;       /* 页面外底 */
  --page-card: #F2E8D5;  /* 页面卡底（外层大卡） */
  --card: #FFFBF0;       /* 卡片 */
  --paper: #FFFDF6;      /* 纸面（卡中卡） */
  --track: #F7EEDC;      /* 条形轨道 */
  --border: #EBDCBC;     /* 描边 */

  /* 强调 */
  --accent: #EE8A4F;      /* 蜜桃橙 */
  --accent-deep: #C4682C; /* 深一档 */

  /* 危险 */
  --danger: #B44230;      /* 陶土红 */
  --danger-wash: #FBEDE9; /* 浅底 */

  /* 文字 */
  --ink: #4A4036;
  --ink-2: #8A7B66;
  --ink-3: #A8977E;

  /* 成功 / 已办结 */
  --success: #AECB8B;

  --radius: 24px;
  --radius-sm: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(150, 110, 60, 0.05), 0 8px 24px rgba(150, 110, 60, 0.07);
  --shadow-lift: 0 2px 4px rgba(150, 110, 60, 0.07), 0 14px 34px rgba(150, 110, 60, 0.11);

  --font-text: 'Nunito', 'PingFang SC', 'Hiragino Sans GB', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 🔴 数字专用。IBM Plex Mono 没装时回落到系统等宽，**仍然是等宽**——
     对齐这件事不能依赖一次网络请求。 */
  --font-num: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 🔴 数字一律等宽 + tabular。`.num` 挂在每一个数字节点上。 */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

[hidden] { display: none !important; }

/* ───────────── 骨架 ───────────── */

.shell { max-width: 1400px; margin: 0 auto; padding: 22px 28px 90px; }

/* 屏号眉头：「01 总览 · 昨日快照…」 */
.screen-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 30px 16px;
}
.screen-head .no {
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}
.screen-head .name { font-weight: 800; font-size: 16px; }
.screen-head .hint { color: var(--ink-3); font-size: 13px; }

/* 外层页面卡：所有内容都躺在这张 #F2E8D5 的大卡上 */
.page-card {
  background: var(--page-card);
  border-radius: 28px;
  padding: 22px;
}

/* ───────────── 顶栏 ───────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.brand {
  background: #4A4036;
  color: #FFFBF0;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}

/* 药丸导航：选中 = 实心深色底白字，未选中 = 透明描边 */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.tab {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.tab:hover { background: rgba(255, 251, 240, 0.7); }
.tab[aria-selected="true"] {
  background: #4A4036;
  border-color: #4A4036;
  color: #FFFBF0;
}

/* tab 上的待办角标 */
.tab .tab-badge {
  display: inline-block;
  margin-left: 7px;
  min-width: 19px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  vertical-align: 1px;
}
.tab[aria-selected="true"] .tab-badge { background: var(--accent); }

.topbar .spacer { flex: 1 1 auto; }

/* 右上角圆形图标按钮 */
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-2);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.15s, transform 0.15s;
}
.icon-btn:hover { background: var(--paper); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.spinning { animation: spin 0.8s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* 卡片右上角那个「展开详情」斜箭头 */
.arrow-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.arrow-btn:hover { background: var(--track); }

/* ───────────── 卡片 ───────────── */

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}

.card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head .titles { flex: 1 1 auto; min-width: 0; }
.card-head h2 { font-size: 17px; }
.card-head .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

.grid { display: grid; gap: 18px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.main-split { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: start; }

@media (max-width: 1180px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.main-split, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

/* ───────────── 大数字指标卡 ───────────── */

.stat {
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: var(--shadow-card);
  min-height: 158px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat .value {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  word-break: break-all;
}
/* 🔴 缺数据的破折号：刻意画成一根短横，与「0」在视觉上无法混淆。 */
.stat .value.dash { color: var(--ink-3); letter-spacing: 0; }
.stat .label { margin-top: 14px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.stat .note { margin-top: 3px; color: var(--ink-3); font-size: 12px; }

/* ───────────── 漏斗 ───────────── */

.funnel-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 66px 74px;
  align-items: center;
  gap: 14px;
  padding: 5px 0;
}
.funnel-row .fl-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.funnel-track {
  background: var(--track);
  border-radius: var(--radius-pill);
  height: 30px;
  overflow: hidden;
}
.funnel-fill {
  background: var(--accent);
  height: 100%;
  border-radius: var(--radius-pill);
  min-width: 4px;
}
.funnel-row .fl-count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 14px;
  color: var(--ink);
}
.funnel-row .fl-count.dash { color: var(--ink-3); }

/* 占比药丸 */
.pct {
  display: inline-block;
  width: 100%;
  text-align: center;
  border-radius: var(--radius-pill);
  padding: 4px 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
}
.pct.base { background: var(--track); color: var(--ink-2); font-family: var(--font-text); }
/* 🔴 比值 > 1：灰色「不可比」，**绝不显示百分比**。
   计数是事件不是人，口径重叠会算出 100% 以上（曾经真的发出去过 −300%）。 */
.pct.incomparable {
  background: var(--track);
  color: var(--ink-3);
  font-family: var(--font-text);
}
.pct.none { background: transparent; color: var(--ink-3); font-family: var(--font-text); }

.foot-note {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}

/* ───────────── 待办列表 ───────────── */

.todo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
.todo-row .t-label { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.todo-row + .todo-row.divided {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 14px;
}

.count-pill {
  min-width: 34px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.count-pill.hot { background: var(--danger); }
.count-pill.good { background: var(--success); color: #3E4A2C; }
.count-pill.muted { background: var(--track); color: var(--ink-3); }

/* ───────────── 环形进度 ───────────── */

.ring-card { display: flex; align-items: center; gap: 22px; }
.ring { flex: 0 0 auto; }
.ring-text .big {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}
.ring-text .cap { color: var(--ink-2); font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.ring-text .sub { color: var(--ink-3); font-size: 12px; }

/* ───────────── 竖条趋势图 ───────────── */

.spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 132px;
  padding-top: 8px;
}
.spark .bar {
  flex: 1 1 0;
  min-width: 3px;
  background: var(--track);
  border-radius: var(--radius-pill);
  position: relative;
  display: flex;
  align-items: flex-end;
}
.spark .bar i {
  display: block;
  width: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  min-height: 3px;
}
/* 细长竖条 + 圆点端点（不要粗柱状） */
.spark .bar i::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
}
.spark .bar.empty i { background: transparent; }
.spark .bar.empty i::after { display: none; }
.spark-axis {
  display: flex;
  justify-content: space-between;
  color: var(--ink-3);
  font-size: 11px;
  margin-top: 8px;
}

/* ───────────── 横向排名条 ───────────── */

.rank-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.rank-row .rk-label {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-row .rk-count {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.rank-track { background: var(--track); border-radius: var(--radius-pill); height: 22px; overflow: hidden; }
.rank-fill { background: var(--accent); height: 100%; border-radius: var(--radius-pill); min-width: 3px; }

/* 停留时长：同色系深浅堆叠（有序量，不是分类 ⇒ 不用五种颜色） */
.dwell-stack {
  display: flex;
  height: 22px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--track);
}
.dwell-seg { height: 100%; }
.dwell-s1 { background: #F6D7BC; }
.dwell-s2 { background: #F1B98C; }
.dwell-s3 { background: var(--accent); }
.dwell-s4 { background: #D9773B; }
.dwell-s5 { background: var(--accent-deep); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* ───────────── 信息条（常驻，不是弹窗） ───────────── */

/* 🔴 未定价模型的警示条：陶土红浅底的**常驻信息条**。
   不是 modal、不是 toast —— 它描述的是一个持续存在的账目缺口，
   而不是一次刚发生的失败。 */
.infobar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--danger-wash);
  border: 1px solid rgba(180, 66, 48, 0.22);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.infobar .ib-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.infobar .ib-body { flex: 1 1 auto; min-width: 0; }
.infobar .ib-title { color: var(--danger); font-weight: 700; font-size: 14px; }
.infobar .ib-sub { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; word-break: break-word; }

/* 一般提示条（非危险） */
.notebar {
  background: var(--track);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  color: var(--ink-2);
  font-size: 12.5px;
  margin-bottom: 16px;
}

/* ───────────── 表格 ───────────── */

.tablewrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.downlisted td { color: var(--ink-3); }
/* 金额与计数列：等宽右对齐 */
td.n, th.n {
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tfoot td {
  padding: 12px;
  font-weight: 700;
  border-top: 2px solid var(--border);
}
tr.day-head td {
  background: var(--track);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-2);
}

/* ───────────── 徽章 ───────────── */

.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--track);
  color: var(--ink-2);
}
.badge.green { background: #E6F0D8; color: #55703A; }
.badge.amber { background: #FBEBCF; color: #96682A; }
.badge.grey  { background: var(--track); color: var(--ink-3); }
.badge.red   { background: var(--danger-wash); color: var(--danger); }
.badge.accent { background: #FBE3D2; color: var(--accent-deep); }
.badge.role  { background: #4A4036; color: #FFFBF0; }

/* ───────────── 按钮 ───────────── */

.btn {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.btn:hover:not(:disabled) { background: var(--paper); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; }

.btn.sm { padding: 7px 15px; font-size: 12.5px; }

/* 橙色实心：狗友小店「通过并上线」——即时生效的动作 */
.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.accent:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }

/* 深色实心：机构新增狗「通过初审」——**刻意与上面不同**，它不会上墙 */
.btn.dark {
  background: #4A4036;
  border-color: #4A4036;
  color: #FFFBF0;
}
.btn.dark:hover:not(:disabled) { background: #382F27; }

/* 陶土红实心：只用于 07 屏那个真删除 */
.btn.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn.danger:hover:not(:disabled) { background: #98372A; }
/* 二次确认展开时，原按钮变成一个「已武装」的浅底态 */
.btn.danger.armed {
  background: #E8B4A8;
  border-color: #E8B4A8;
  color: #7E2C20;
}

.btn.ghost { background: transparent; }

.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ───────────── 待审队列的两种卡 ───────────── */

/* 🔴 两类提交**必须一眼看出不同**。
   长得一样会产生「我批了怎么没上墙」——那正是这里要防的那次困惑。
   区分手段刻意叠了四层：左侧色条、按钮颜色、通过后徽章颜色、
   以及机构那类**多出一整行**说明「不会自动上墙」。 */
.review-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  border-left: 6px solid var(--track);
  margin-bottom: 14px;
}
.review-card.kind-shop { border-left-color: var(--accent); }
.review-card.kind-adoption { border-left-color: #4A4036; }

.review-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.review-top .who { color: var(--ink-2); font-size: 12.5px; }
.review-top .when {
  color: var(--ink-3);
  font-size: 12.5px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.review-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.review-summary { color: var(--ink-2); font-size: 13.5px; margin-bottom: 8px; word-break: break-word; }

.review-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--ink-3);
  font-size: 12.5px;
  margin-bottom: 12px;
}

/* 机构新增狗那条「不会自动上墙」的小字 —— 琥珀底，与卡片其余部分分开 */
.gitnote {
  background: #FBEBCF;
  border-radius: 14px;
  padding: 10px 14px;
  color: #85602A;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.review-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.review-foot .spacer { flex: 1 1 auto; }

/* 退回理由的内联输入 */
.reject-box {
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.reject-box label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }

input[type="text"], input[type="password"], input[type="search"], textarea, select {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 13px;
  width: 100%;
}
textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }

.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filters input[type="search"] { max-width: 320px; }
.filters select { width: auto; min-width: 130px; }

/* 08 账号屏的过滤条：只有一个勾 + 一句计数，比数据面那三条窄得多。
   贴着表格上沿（表格自己已经在卡片里有内边距）⇒ 这里的 margin 比 .filters
   默认的 16px 小。 */
.accounts-filters { margin: 0 0 12px; }
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}
/* 复选框跟着本站的暖色走 —— 浏览器默认的那抹蓝在这套配色里格外扎眼。
   `accent-color` 一条就够，不必自绘（自绘会连带丢掉键盘焦点环）。 */
.filter-check input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent-deep);
  width: 15px;
  height: 15px;
}

/* ───────────── 爪印墙举报卡 ───────────── */

.report-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  border: 2px solid transparent;
}
/* 二次确认展开时整张卡描红 —— 让「正在准备删一张照片」在余光里也看得见 */
.report-card.confirming { border-color: var(--danger); }

.report-body { display: flex; gap: 18px; align-items: flex-start; }

.thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background: var(--track);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 照片已经不在墙上：灰色占位（不是坏图标，它不是故障） */
.thumb.gone { background: var(--track); color: var(--ink-3); }

.report-main { flex: 1 1 auto; min-width: 0; }
.report-line1 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.report-line1 .dog { font-weight: 800; font-size: 15px; word-break: break-word; }
.report-line1 .when {
  color: var(--ink-3);
  font-size: 12.5px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.report-reason { font-size: 14px; margin-bottom: 4px; word-break: break-word; }
.report-sub { color: var(--ink-3); font-size: 12.5px; word-break: break-word; }
.report-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* 内联二次确认（**不是 modal**：modal 会把上下文盖住，
   而这一步恰恰要求人看着那张照片和那条理由再决定） */
.confirm-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--danger-wash);
  border-radius: 16px;
  padding: 13px 16px;
  margin-top: 14px;
}
.confirm-strip .cs-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.confirm-strip .cs-body { flex: 1 1 auto; min-width: 0; }
.confirm-strip .cs-title { color: var(--danger); font-weight: 800; font-size: 13.5px; }
.confirm-strip .cs-sub { color: var(--ink-2); font-size: 12.5px; margin-top: 1px; }
.confirm-strip .cs-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.list-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.list-head h2 { font-size: 16px; }
.list-head .hint { color: var(--ink-3); font-size: 12.5px; }
.list-head .spacer { flex: 1 1 auto; }

/* ───────────── 空态 / 加载骨架 ───────────── */

.empty {
  background: var(--card);
  border-radius: var(--radius);
  padding: 46px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.empty .em { font-size: 26px; display: block; margin-bottom: 10px; }
.empty .t { font-weight: 800; font-size: 15px; }
.empty .s { color: var(--ink-3); font-size: 12.5px; margin-top: 5px; }

/* 骨架屏：静态占位块 + 极缓的呼吸。
   ⚠️ 不要在骨架上放数字或 0 —— 加载中的 0 会被当成真值读走。 */
.skeleton {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.sk-block {
  background: var(--track);
  border-radius: 12px;
  animation: breathe 1.6s ease-in-out infinite;
}
.sk-thumb { width: 84px; height: 84px; border-radius: 16px; flex: 0 0 auto; }
.sk-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.sk-line { height: 12px; }
.sk-line.w40 { width: 40%; }
.sk-line.w70 { width: 70%; }
.sk-line.w25 { width: 25%; }
.sk-stat { height: 158px; border-radius: var(--radius); }

@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

@media (prefers-reduced-motion: reduce) {
  .sk-block, .icon-btn.spinning { animation: none; }
}

.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.loading-inline .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--track);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

/* 🔴 `.report-frame`（嵌 `/adminhub/report` 那页的 iframe 样式）**已删除**：
   那条路由本身已随读侧迁往 data.pawtrail.wang 而于主仓 D178 从服务端删掉，
   本仓也早已没有任何标记用这个类 —— 留着就是指向一个 404 的死样式。 */

/* ───────────── 令牌门 ───────────── */

.gate-wrap {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gate {
  background: var(--card);
  border-radius: 28px;
  padding: 40px 38px;
  box-shadow: var(--shadow-lift);
  width: 100%;
  max-width: 470px;
}
.gate .mark { font-size: 30px; margin-bottom: 12px; }
.gate h1 { font-size: 21px; margin-bottom: 8px; }
.gate .explain { color: var(--ink-2); font-size: 13px; line-height: 1.65; margin-bottom: 22px; }
.gate label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.gate .btn { width: 100%; margin-top: 14px; padding: 13px; }
.gate .err {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 18px;
  word-break: break-word;
}
/* （`.gate .keep` 是那个「在本标签页内记住」勾选框的样式，随接口令牌门一并删除。） */

/* 顶栏上的「换令牌」 */
.who-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 8px 7px 15px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* 全局错误条 */
.errbar {
  background: var(--danger-wash);
  border: 1px solid rgba(180, 66, 48, 0.25);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-size: 13px;
  margin-bottom: 16px;
  word-break: break-word;
}

.section + .section { margin-top: 18px; }

/* ───────────── 08 账号与角色 ───────────── */

/* 🔴 **本屏颜色是唯一例外，不沿用本文件顶部 :root 的暖米色+蜜桃橙**——
 *   design/reference/rbac-00-design-baseline-v2.png 原话：「Admin Hub
 *   沿用的是暖米色底＋蜜桃橙那一套……账号管理台虽然挂在 Admin Hub 的
 *   标签栏里，视觉上按本基线走，不带暖色系过来」。本基线继承的是
 *   web/partner-hub/style.css 的中性灰 + 石墨青 #0E7490（与
 *   web/shared/rbac-login 同一套，见那份文件的 :root）。
 *   顶栏/标签栏保持 Admin Hub 现有暖色（那是共享 chrome，画布截图里
 *   出现的中性色 chrome 是画布自身的демо外壳，不是本屏要复刻的对象）；
 *   下面这些选择器只在 #view-accounts 内生效，不改本文件的全局 :root
 *   （改了会连累其余七个 tab 的暖色视觉）。 */
#view-accounts {
  --rbac-accent: #0E7490;
  --rbac-accent-d: #0A5A6E;
  --rbac-accent-l: #E8F1F3;
  --rbac-g-100: #F7F8F9;
  --rbac-g-150: #F1F3F5;
  --rbac-g-300: #D6DAE0;
  --rbac-g-550: #7A828C;
  --rbac-g-600: #5A6270;
  --rbac-ink: #16191D;
}
#view-accounts .btn.accent {
  background: var(--rbac-accent);
  border-color: var(--rbac-accent);
}
#view-accounts .btn.accent:hover:not(:disabled) {
  background: var(--rbac-accent-d);
  border-color: var(--rbac-accent-d);
}
/* 角色徽标：中性灰底深灰字，不是别的 tab 用的棕底奶油字 .badge.role。 */
#view-accounts .badge.role {
  background: var(--rbac-g-150);
  color: var(--rbac-g-600);
}
/* 「你」徽标：浅石墨青底，不是别的 tab 用的橙底 .badge.accent。 */
#view-accounts .badge.accent {
  background: var(--rbac-accent-l);
  color: var(--rbac-accent-d);
}
#view-accounts .field .label,
#view-accounts .role-check { color: var(--rbac-ink); }
#view-accounts .field .hint,
#view-accounts .role-check.locked,
#view-accounts .role-check.locked .hint { color: var(--rbac-g-550); }

/* 自我撤销管理员的确认按钮：设计基线明文「破坏性动作不用红底按钮，
   红色只出现在确认条与错误提示里」——.btn.danger 的实心陶土红是留给
   07 屏那个真删除的（见本文件该规则的注释），这里不能借用。改成深色
   实心（--rbac-ink），红色只保留在确认条文字与感叹号图标上，与其余
   确认条（取消/确认）的视觉语言一致。 */
#view-accounts .self-revoke-confirm-btn {
  background: var(--rbac-ink);
  border-color: var(--rbac-ink);
  color: #fff;
}
#view-accounts .self-revoke-confirm-btn:hover:not(:disabled) {
  background: #000;
  border-color: #000;
}
#view-accounts .self-revoke-confirm-btn:disabled {
  background: var(--rbac-g-300);
  border-color: var(--rbac-g-300);
  color: var(--rbac-g-550);
}

/* 邀请面板 / 通用表单字段（本文件此前没有独立的 .field/.label，
   全靠 filters 里的裸 select/input——这一屏第一次需要「标签在上、
   输入在下」的竖排字段，补一套最小实现，颜色沿用既有输入框样式）。 */
.field { margin-bottom: 14px; }
.field .label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.field .hint { display: block; margin-top: 5px; color: var(--ink-3); font-size: 11.5px; }

/* 行内角色勾选组：邀请面板与行内角色编辑器共用同一套样式。 */
.role-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 14px 4px;
}
.role-check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.role-check input { width: auto; margin-top: 2px; }
/* 置灰态：系统仅剩这一名管理员，admin 勾不可取消 —— 与本文件危险操作
   的其他置灰态（.btn:disabled）视觉语言保持一致，浅色 + 不可点。 */
.role-check.locked { color: var(--ink-3); cursor: not-allowed; }
.role-check.locked .hint { color: var(--ink-3); font-size: 11.5px; font-weight: 400; margin-left: 2px; }

.role-editor-row td { background: var(--paper); padding: 4px 12px 16px; }

.self-revoke-input { max-width: 260px; margin-top: 10px; }

/* ── 合作方绑定标识（scopeId）───────────────────────────────────────────
   partner 是本台账里唯一一个「勾选还不够、还要填一个值」的角色，所以它的
   勾选框底下会长出一个输入框。样式沿用本文件既有的裸 input 规则（第 700
   行那条 input[type="text"]），这里只管排布，不重新定义边框/圆角/字号。 */
.partner-scope-field {
  display: block;
  margin-top: 8px;
  /* 输入框挂在 <label class="role-check"> 里面，label 是 flex 且整体可点——
     不隔断的话点输入框会被 label 转发成「切换勾选」，输入框永远聚焦不上。 */
  cursor: auto;
}
.partner-scope-field input[type="text"] { max-width: 300px; }

/* 类型选择那一排。标识由代码生成 ⇒ 这里只有「选哪一类」这一件事，
   没有输入框、没有可见前缀。 */
.partner-scope-field .scope-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.partner-scope-field .hint {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
}
/* 已绑定态：只读灰底，与可编辑态在视觉上必须一眼分得开——否则管理员会
   以为能直接改（本轮不支持改绑，见 renderPartnerScopeCell 的注释）。 */
.partner-scope-field.bound input[type="text"] {
  background: var(--rbac-g-150, #F1F3F5);
  color: var(--rbac-g-550, #7A828C);
  cursor: not-allowed;
}
#view-accounts .partner-scope-field .hint { color: var(--rbac-g-550); }

/* 琥珀提示条：「勾了但还没生效」。用警示黄而不是红——这不是错误，
   是一个未完成的步骤（红色在本屏留给真正的破坏性动作，见上方
   .self-revoke-confirm-btn 的注释）。 */
.partner-scope-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 4px 0;
  padding: 10px 12px;
  border: 1px solid #F0D9A8;
  border-radius: 8px;
  background: #FDF6E7;
}
.partner-scope-notice .psn-body {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7A5A18;
}
.partner-scope-notice .btn { flex: 0 0 auto; }