/* Partner Hub · 合作方后台 —— 样式
 *
 * 参考设计稿：Claude Design 项目「Pawtrail Partner Hub」画布 0–11
 *   https://claude.ai/design/p/06afdffa-9239-4bfb-b95b-e6a30bfab5aa
 *   画布 0「设计系统」是本文件色板与元件几何的**唯一真源**，下面每个 token
 *   都逐字取自那张画布，不是「按感觉调近似值」。
 *
 * 🔴 这套色板与 App / 官网的奶油白+蜜桃橙**刻意不同**，不要"统一"过来。
 *   App 是给养狗人看的产品，暖色是它的品牌；本页是给合作方（店家、救助机构）
 *   用的**内部工具**，一天要在上面填十几遍表。工具的底色应当退到背景里，
 *   让内容与状态成为唯一有颜色的东西 —— 所以是中性灰阶 + 单一强调色。
 *   把蜜桃橙搬进来会让「强调色」与「品牌色」混为一谈，届时状态标识（四色）
 *   与品牌橙会在同一屏里抢视线。
 *
 * 对照表（左 = 本文件 token，右 = 画布 0 的字面值）：
 *   --w        #FFFFFF   纯白（卡片、输入框、主表格底）
 *   --g-50     #FBFBFC   表头 / 侧边栏底（比 --g-100 再浅半档）
 *   --g-100    #F7F8F9   次级底、hover
 *   --g-150    #F1F3F5   分段控件底、骨架块
 *   --g-200    #E4E7EA   分隔线、页面底色
 *   --g-300    #D6DAE0   输入框描边、卡片外框
 *   --g-400    #B4BAC2   未选中的单选圈
 *   --g-500    #8A9099   最弱文字、LABEL
 *   --g-550    #7A828C   辅助说明文字
 *   --g-600    #5A6270   次级正文
 *   --ink      #16191D   正文
 *   --accent   #0E7490   石墨青（唯一强调色）
 *   --accent-d #0A5A6E   按下 / 已选文字
 *   --accent-l #E8F1F3   强调色浅底
 *   --accent-b #B8D6DD   强调色描边
 *
 * 🔴 状态四色**只表示条目在审核流程里的位置**（画布 0 原话）。任何业务属性 ——
 *   尤其是宠物友好标签 —— 一律不得借用它们。宠物友好标签是**平级枚举**，
 *   六个选项共用同一底色、同一描边、同一字重、同一字号；系统里不存在
 *   「选项自带的颜色」。见本文件 `.enum-opt` 一节，那里再写一遍理由。
 *
 * 桌面工具，1440 内容宽；1280 以下侧边栏收成 52px 图标条（画布 10）。
 */

:root {
  --w: #FFFFFF;
  --g-50: #FBFBFC;
  --g-100: #F7F8F9;
  --g-150: #F1F3F5;
  --g-200: #E4E7EA;
  --g-300: #D6DAE0;
  --g-400: #B4BAC2;
  --g-500: #8A9099;
  --g-550: #7A828C;
  --g-600: #5A6270;
  --ink: #16191D;

  --accent: #0E7490;
  --accent-d: #0A5A6E;
  --accent-l: #E8F1F3;
  --accent-b: #B8D6DD;

  /* 状态四色：底 / 字 / 描边 / 点。仅用于审核状态。 */
  --pending-bg: #FDF4E3;  --pending-fg: #96620B;  --pending-bd: #EFDCB4;  --pending-dot: #C8891A;
  --approved-bg: #EAF4EE; --approved-fg: #1B6B3D; --approved-bd: #C2E0CD; --approved-dot: #2A8A52;
  --rejected-bg: #FCEDEB; --rejected-fg: #A3271C; --rejected-bd: #F0CDC8; --rejected-dot: #C2402F;
  --withdrawn-bg: #F1F3F5;--withdrawn-fg: #5A6270;--withdrawn-bd: #DDE1E6; --withdrawn-dot: #8A9099;

  --radius: 7px;
  --radius-sm: 5px;
  --sidebar-w: 224px;
  --sidebar-narrow: 52px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--g-200);
  color: var(--ink);
  font-family: 'Public Sans', 'Noto Sans SC', -apple-system, 'PingFang SC', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 数字等宽：列表里的计数、倒计时、上传百分比不能跳。 */
.num { font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-d); text-decoration: underline; }

[hidden] { display: none !important; }

/* ═══════════════ 按钮（画布 0：高 30 · 圆角 5 · 无"删除"样式）═══════════════
 *
 * 🔴 这里**没有** .btn.danger / .btn.destructive。不是漏写：界面内不存在删除动作，
 *    下架只改状态（画布 3 原话：「确认按钮不做成红色破坏性按钮 —— 下架是可逆的
 *    状态变更」）。红色破坏性按钮一旦存在，下一个人做「下架」时会顺手用它，
 *    于是一个可逆动作被画成了不可逆的样子。
 */
.btn {
  height: 30px;
  padding: 0 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.btn:hover:not(:disabled) { background: var(--accent-d); border-color: var(--accent-d); }

.btn.secondary {
  border-color: var(--g-300);
  background: var(--w);
  color: var(--ink);
}
.btn.secondary:hover:not(:disabled) { background: var(--g-100); border-color: var(--g-300); }

.btn.text {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  padding: 0 7px;
}
.btn.text:hover:not(:disabled) { background: var(--accent-l); border-color: transparent; color: var(--accent-d); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.block { width: 100%; }

/* ═══════════════ 表单元件（画布 0）═══════════════ */

.field { display: flex; flex-direction: column; gap: 5px; }
.field > .label {
  font-size: 12px;
  color: var(--g-600);
  display: flex;
  align-items: center;
  gap: 4px;
}
.field > .label .req { color: #C2402F; }
.field .hint { font-size: 11px; color: var(--g-550); line-height: 1.6; }
.field .err { font-size: 11px; color: #A3271C; line-height: 1.6; }

input[type="text"], input[type="password"], input[type="tel"], input[type="url"],
input[type="time"], select, textarea {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--g-300);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  background: var(--w);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
textarea { height: auto; padding: 8px 9px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.14);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--g-100);
  color: var(--g-550);
  cursor: not-allowed;
}
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: #C2402F;
  box-shadow: 0 0 0 3px rgba(194, 64, 47, 0.12);
}
::placeholder { color: var(--g-500); }

.counter { font-size: 11px; color: var(--g-550); }
.counter.over { color: #A3271C; }

/* ═══════════════ 平级枚举（宠物友好标签）═══════════════
 *
 * 🔴 **只有两种外观：未选、已选**（画布 0 原话）。
 *
 * 六个 policy 取值共用这一个类，没有 .enum-opt.good / .warn / .limited 之类的变体，
 * 也没有 :nth-child 着色。这不是"还没做完"，这是本设计最核心的一条约束：
 *
 *   报的是店家的规矩，不是给店打分（画布 7）。
 *
 * 一旦给「可以带狗进店」配绿、给「店内不可入」配红，平台就在一个灰色地带上
 * 替商家站了队：一家只有露台的咖啡馆并不比一家全店开放的差，它只是店小。
 * 颜色、星级、排序、图标强调 —— 画布 7「设计上不做的四件事」逐条点名禁止。
 *
 * ⚠️ 未来若有人要求「把最友好的标绿」，那是产品口径变更，必须先改画布 7，
 *    不是在这里加一个 class。
 */
.enum-group { display: flex; flex-wrap: wrap; gap: 8px; }

.enum-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--w);
  border: 1px solid var(--g-300);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.enum-opt:hover { background: var(--g-100); }
.enum-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

/* 指示器：单选圆点 / 多选方块。形状区分单选与多选，颜色一视同仁。 */
.enum-opt .mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--g-400);
  background: #fff;
  flex: none;
  transition: border 0.1s ease;
}
.enum-group.multi .enum-opt .mark { border-radius: 3px; }

.enum-opt.on {
  background: var(--accent-l);
  border-color: var(--accent);
  color: var(--accent-d);
  font-weight: 500;
}
.enum-opt.on .mark { border: 3.5px solid var(--accent); }
.enum-group.multi .enum-opt.on .mark {
  border: 1px solid var(--accent);
  background: var(--accent);
  position: relative;
}
.enum-group.multi .enum-opt.on .mark::after {
  content: '';
  position: absolute;
  left: 3px; top: 0.5px;
  width: 3px; height: 6.5px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.enum-opt.locked { cursor: not-allowed; opacity: 0.75; }
.enum-opt.locked:hover { background: var(--w); }
.enum-opt.on.locked:hover { background: var(--accent-l); }

/* ═══════════════ 状态标识（四色，仅审核状态）═══════════════ */

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.status .dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }

.status.pending   { background: var(--pending-bg);   color: var(--pending-fg);   border-color: var(--pending-bd); }
.status.pending .dot   { background: var(--pending-dot); }
.status.approved  { background: var(--approved-bg);  color: var(--approved-fg);  border-color: var(--approved-bd); }
.status.approved .dot  { background: var(--approved-dot); }
.status.rejected  { background: var(--rejected-bg);  color: var(--rejected-fg);  border-color: var(--rejected-bd); }
.status.rejected .dot  { background: var(--rejected-dot); }
.status.withdrawn { background: var(--withdrawn-bg); color: var(--withdrawn-fg); border-color: var(--withdrawn-bd); }
.status.withdrawn .dot { background: var(--withdrawn-dot); }

/* ═══════════════ 登录页（画布 1）═══════════════ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--g-200);
}
.auth-wrap { display: flex; gap: 48px; align-items: center; max-width: 900px; width: 100%; }

.auth-intro { flex: 1; min-width: 0; }
.auth-intro .mark {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.auth-intro .mark .logo {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.auth-intro .mark .name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.auth-intro .mark .sub { font-size: 12px; color: var(--g-550); }
.auth-intro p { font-size: 13px; color: var(--g-600); line-height: 1.75; margin: 0 0 10px; max-width: 420px; }
.auth-intro .internal {
  display: inline-block; margin-top: 8px;
  font-size: 11px; color: var(--g-550);
  background: var(--g-100); border: 1px solid var(--g-200);
  border-radius: 4px; padding: 4px 9px;
}

.auth-card {
  width: 340px; flex: none;
  background: var(--w);
  border: 1px solid var(--g-300);
  border-radius: 8px;
  padding: 26px 24px;
}
.auth-card h1 { font-size: 17px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.auth-card .lede { font-size: 12px; color: var(--g-550); margin: 0 0 20px; }
.auth-card .field + .field { margin-top: 14px; }
.auth-card .btn.block { margin-top: 20px; }

/* 🔴 账号发放说明。**这块是硬性内容**，不是装饰：
 *    画布 1 明写「页面上不存在的两样东西：注册入口、自助重置口令」。
 *    删掉这段等于把用户留在一个没有出路的页面上 —— 他必须知道去哪儿要账号。 */
.auth-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--g-200);
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--g-600);
  line-height: 1.65;
}
.auth-note .i {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--g-150); color: var(--g-600);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 2px;
}
.auth-note .contact { display: block; margin-top: 3px; font-size: 11px; color: var(--g-550); }

/* ═══════════════ 全局提示条（登录页与表单底部共用）═══════════════ */

.notice {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid;
  margin-bottom: 16px;
}
.notice .icon {
  width: 15px; height: 15px; border-radius: 50%;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 1px; color: #fff;
}
/* 错误：口令错、提交失败。 */
.notice.error { background: var(--rejected-bg); border-color: var(--rejected-bd); color: var(--rejected-fg); }
.notice.error .icon { background: var(--rejected-dot); }
/* 中性：账号停用、上传中断。
 * 🔴 画布 10 指名要中性灰而不是红：停用多半是合作暂停或换人对接，
 *    不是错误，也不该读成惩罚。 */
.notice.neutral { background: var(--g-100); border-color: var(--g-200); color: var(--g-600); }
.notice.neutral .icon { background: var(--g-500); }
.notice.success { background: var(--approved-bg); border-color: var(--approved-bd); color: var(--approved-fg); }
.notice.success .icon { background: var(--approved-dot); }
.notice.warn { background: var(--pending-bg); border-color: var(--pending-bd); color: var(--pending-fg); }
.notice.warn .icon { background: var(--pending-dot); }
.notice .body { flex: 1; min-width: 0; }
.notice .t { font-weight: 600; }

/* ═══════════════ 角色选择页（画布 11）═══════════════ */

.pick-page { min-height: 100vh; background: var(--g-200); }
.pick-top {
  height: var(--topbar-h);
  background: var(--w);
  border-bottom: 1px solid var(--g-200);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
}
.pick-top .logo {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.pick-top .name { font-size: 13px; font-weight: 600; }
.pick-top .spacer { flex: 1; }
.pick-top .who { font-size: 12px; color: var(--g-550); }

.pick-body { max-width: 760px; margin: 0 auto; padding: 56px 24px; }
.pick-body h1 { font-size: 19px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.pick-body .lede { font-size: 12px; color: var(--g-550); margin: 0 0 28px; }
.pick-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.pick-card {
  background: var(--w);
  border: 1px solid var(--g-300);
  border-radius: 8px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.pick-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1); }
.pick-card .badge {
  width: 34px; height: 34px; border-radius: var(--radius);
  background: var(--accent-l); color: var(--accent-d);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pick-card .role { font-size: 15px; font-weight: 600; }
.pick-card .scope { font-size: 12px; color: var(--g-600); }
.pick-card .desc { font-size: 12px; color: var(--g-550); line-height: 1.65; flex: 1; }
.pick-card .go { color: var(--accent); font-size: 12px; font-weight: 600; }

/* ═══════════════ 工作区骨架（画布 2 / 5 / 9）═══════════════ */

.app { display: flex; min-height: 100vh; background: var(--w); }

.sidebar {
  width: var(--sidebar-w);
  background: var(--g-50);
  border-right: 1px solid var(--g-200);
  display: flex; flex-direction: column; flex: none;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  height: var(--topbar-h);
  padding: 0 16px;
  display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--g-200);
  flex: none;
}
.sidebar .brand .logo {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sidebar .brand .name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }

.sidebar nav { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar .group {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: #A0A6AE; padding: 0 8px 7px;
}
.sidebar .group + .group { margin-top: 14px; }
.sidebar .navitem {
  height: 30px;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--g-600);
  cursor: pointer; border: none; background: none; font-family: inherit;
  width: 100%; text-align: left;
}
.sidebar .navitem:hover { background: var(--g-150); color: var(--ink); }
.sidebar .navitem.on { background: var(--accent-l); color: var(--accent-d); font-weight: 600; }
.sidebar .navitem .ico { width: 15px; text-align: center; flex: none; font-size: 13px; }
.sidebar .navitem .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .navitem .count {
  font-size: 11px; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.sidebar .foot { padding: 12px 10px; border-top: 1px solid var(--g-200); flex: none; }
.sidebar .foot a { display: block; font-size: 12px; color: var(--g-550); padding: 3px 8px; }
.sidebar .foot a:hover { color: var(--accent); text-decoration: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--g-200);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  flex: none;
  background: var(--w);
  position: sticky; top: 0; z-index: 20;
}
.topbar .crumb { font-size: 13px; color: var(--g-600); display: flex; align-items: center; gap: 7px; }
.topbar .crumb .sep { color: var(--g-400); }
.topbar .crumb .cur { color: var(--ink); font-weight: 600; }
.topbar .spacer { flex: 1; }
.hamburger { display: none; }

/* 账号菜单 */
.acct { position: relative; }
.acct .trigger {
  height: 30px; padding: 0 9px;
  border: 1px solid var(--g-300); border-radius: var(--radius-sm);
  background: var(--w); font: inherit; font-size: 12px;
  display: flex; align-items: center; gap: 7px; cursor: pointer;
}
.acct .trigger:hover { background: var(--g-100); }
.acct .trigger .av {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--accent-l); color: var(--accent-d);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.acct .menu {
  position: absolute; right: 0; top: 36px;
  width: 232px;
  background: var(--w);
  border: 1px solid var(--g-300);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(22, 25, 29, 0.1);
  padding: 6px;
  z-index: 40;
}
.acct .menu .head { padding: 8px 9px 10px; border-bottom: 1px solid var(--g-200); margin-bottom: 6px; }
.acct .menu .head .n { font-size: 13px; font-weight: 600; }
.acct .menu .head .r { font-size: 11px; color: var(--g-550); margin-top: 1px; }
.acct .menu button {
  width: 100%; text-align: left;
  height: 30px; padding: 0 9px;
  border: none; background: none; font: inherit; font-size: 12.5px;
  color: var(--g-600); border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.acct .menu button:hover { background: var(--g-100); color: var(--ink); }
.acct .menu .tip {
  font-size: 11px; color: var(--g-550); line-height: 1.55;
  padding: 8px 9px 4px; border-top: 1px solid var(--g-200); margin-top: 6px;
}

.content { padding: 22px 24px 64px; flex: 1; }
.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.page-head .sub { font-size: 12px; color: var(--g-550); margin-top: 2px; }
.page-head .spacer { flex: 1; }

/* ═══════════════ 卡片 / 分区 ═══════════════ */

.card {
  background: var(--w);
  border: 1px solid var(--g-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card > .hd {
  padding: 14px 16px;
  border-bottom: 1px solid var(--g-200);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card > .hd h2 { font-size: 15px; font-weight: 600; margin: 0; }
.card > .hd .sub { font-size: 12px; color: var(--g-550); }
.card > .hd .spacer { flex: 1; }
.card > .bd { padding: 16px; }

.section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--g-500); margin-bottom: 10px;
}

/* ═══════════════ 筛选分段控件 ═══════════════ */

.filters { display: flex; gap: 4px; flex-wrap: wrap; background: var(--g-150); padding: 3px; border-radius: 6px; }
.filters button {
  height: 26px; padding: 0 11px;
  border: none; background: none; font: inherit; font-size: 12px;
  color: var(--g-600); border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.filters button:hover { color: var(--ink); }
.filters button.on { background: var(--w); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 25, 29, 0.08); }

/* 窄屏用的下拉替代（画布 10） */
.filter-select { display: none; width: auto; min-width: 130px; }

/* ═══════════════ 列表 ═══════════════ */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  gap: 14px;
  padding: 0 16px;
  align-items: center;
  border-bottom: 1px solid var(--g-200);
  min-height: 52px;
}
.row:last-child { border-bottom: none; }
.row.head {
  height: 36px; min-height: 36px;
  background: var(--g-50);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--g-550);
}
.row.body:hover { background: var(--g-50); }
.row .right { text-align: right; }
.row .nm { font-size: 13px; font-weight: 500; }
.row .meta { font-size: 11px; color: var(--g-550); margin-top: 1px; }
.row .thumb {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--g-150); border: 1px solid var(--g-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--g-400); flex: none;
}
.row .sub2 { display: none; }

/* 列宽：狗列表 / 店铺列表各一套（画布 2 / 5） */
.rows.dogs .row { grid-template-columns: 52px 1.5fr 1.2fr 68px 108px 1fr 96px; }
.rows.shops .row { grid-template-columns: 1.6fr 92px 2fr 108px 100px 104px; }

.list-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--g-200);
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--g-550);
  background: var(--g-50);
}
.list-foot .spacer { flex: 1; }

/* 驳回摘要（画布 8：列表行里的驳回提示） */
.row .reject-line {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: var(--rejected-bg);
  border: 1px solid var(--rejected-bd);
  border-radius: var(--radius-sm);
  font-size: 11.5px; color: var(--rejected-fg);
  display: flex; gap: 8px; align-items: baseline;
}
.row.has-reject { padding-top: 12px; padding-bottom: 0; }
.row .reject-line .txt {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .reject-line a { color: var(--rejected-fg); font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* ═══════════════ 空状态 ═══════════════ */

.empty { padding: 56px 24px; text-align: center; }
.empty .mk {
  width: 34px; height: 34px; margin: 0 auto 12px;
  border-radius: var(--radius); background: var(--g-150);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--g-400);
}
.empty .t { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.empty .d { font-size: 12px; color: var(--g-550); max-width: 400px; margin: 0 auto 16px; line-height: 1.7; }

/* ═══════════════ 骨架态（画布 10）═══════════════
 * 表头与列宽先画出来，行内容用灰块占位，不用转圈图标 —— 列表结构不变，视线不跳。 */

.sk { background: var(--g-150); border-radius: 4px; height: 11px; animation: pulse 1.4s ease-in-out infinite; }
.sk.thumb { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.sk.w40 { width: 40%; } .sk.w60 { width: 60%; } .sk.w80 { width: 80%; } .sk.w100 { width: 100%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ═══════════════ 表单页 ═══════════════ */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-sec + .form-sec { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--g-200); }

.form-actions {
  position: sticky; bottom: 0;
  background: var(--w);
  border-top: 1px solid var(--g-200);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  z-index: 10;
}
.form-actions .spacer { flex: 1; }
.form-actions .note { font-size: 11px; color: var(--g-550); }

/* 标签来源（继承 / 自设）—— 画布 6 */
.source-opts { display: flex; flex-direction: column; gap: 8px; }
.source-opt {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 12px;
  border: 1px solid var(--g-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--w);
}
.source-opt:hover { background: var(--g-50); }
.source-opt.on { border-color: var(--accent); background: var(--accent-l); }
.source-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.source-opt .mark {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--g-400); background: #fff; flex: none; margin-top: 3px;
}
.source-opt.on .mark { border: 3.5px solid var(--accent); }
.source-opt .t { font-size: 13px; font-weight: 500; }
.source-opt.on .t { color: var(--accent-d); }
.source-opt .d { font-size: 11.5px; color: var(--g-550); line-height: 1.6; margin-top: 2px; }

/* 「这不是评级」说明块 —— 画布 6 / 7 的核心文案 */
.not-a-rating {
  display: flex; gap: 9px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-bottom: 14px;
}
.not-a-rating .i {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--g-500); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 2px;
}
.not-a-rating .t { font-size: 12.5px; font-weight: 600; }
.not-a-rating .d { font-size: 11.5px; color: var(--g-600); line-height: 1.7; margin-top: 3px; }

/* 照片位 —— 画布 3 */
.photos { display: flex; gap: 10px; flex-wrap: wrap; }
.photo {
  width: 108px; height: 84px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--g-300);
  background: var(--g-100);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-size: 11px; color: var(--g-550);
  position: relative; overflow: hidden;
}
.photo .tag {
  position: absolute; left: 5px; top: 5px;
  background: rgba(22, 25, 29, 0.72); color: #fff;
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
}
.photo.add { border-style: dashed; cursor: pointer; }
.photo.add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.photo.failed { border-color: var(--rejected-bd); background: var(--rejected-bg); }
.photo.interrupted { border-color: var(--g-300); background: var(--g-100); }
.photo .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--g-200); }
.photo .bar i { display: block; height: 100%; background: var(--accent); }

.upload-err {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--radius-sm);
  font-size: 11.5px; line-height: 1.6; border: 1px solid;
  margin-top: 10px;
}
.upload-err .body { flex: 1; min-width: 0; }
.upload-err .t { font-weight: 600; }
.upload-err .acts { display: flex; gap: 6px; margin-top: 7px; }
.upload-err.bad { background: var(--rejected-bg); border-color: var(--rejected-bd); color: var(--rejected-fg); }
.upload-err.neutral { background: var(--g-100); border-color: var(--g-200); color: var(--g-600); }

/* ═══════════════ 审核中的锁定态（画布 10）═══════════════ */

.locked-banner {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--pending-bg);
  border: 1px solid var(--pending-bd);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-bottom: 16px;
}
.locked-banner .i {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--pending-dot); color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 2px;
}
.locked-banner .t { font-size: 12.5px; font-weight: 600; color: var(--pending-fg); }
.locked-banner .d { font-size: 11.5px; color: var(--pending-fg); opacity: 0.92; line-height: 1.65; margin-top: 2px; }

/* ═══════════════ 驳回理由（画布 8）═══════════════ */

.reject-box {
  background: var(--rejected-bg);
  border: 1px solid var(--rejected-bd);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  margin-bottom: 16px;
}
.reject-box .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.reject-box .hd .i {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--rejected-dot); color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.reject-box .hd .t { font-size: 13px; font-weight: 600; color: var(--rejected-fg); }
.reject-box .hd .when { font-size: 11px; color: var(--rejected-fg); opacity: 0.8; }
.reject-box .lb { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--rejected-fg); opacity: 0.75; margin-bottom: 3px; }
.reject-box .why {
  font-size: 12.5px; color: var(--rejected-fg); line-height: 1.75;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 4px; padding: 9px 10px;
  white-space: pre-wrap; word-break: break-word;
}

/* 历史时间线（画布 3 / 8：堆叠、不折叠、不覆盖） */
.timeline { display: flex; flex-direction: column; }
.tl {
  display: flex; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--g-200);
}
.tl:last-child { border-bottom: none; }
.tl .rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 9px; }
.tl .rail .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-400); margin-top: 5px; flex: none; }
.tl.reject .rail .dot { background: var(--rejected-dot); }
.tl.submit .rail .dot { background: var(--pending-dot); }
.tl.approve .rail .dot { background: var(--approved-dot); }
.tl .bd { flex: 1; min-width: 0; }
.tl .t { font-size: 12.5px; font-weight: 600; }
.tl .when { font-size: 11px; color: var(--g-550); margin-top: 1px; }
.tl .d { font-size: 12px; color: var(--g-600); line-height: 1.65; margin-top: 4px; }
.tl .fields { font-size: 11px; color: var(--g-550); margin-top: 4px; }

/* ═══════════════ 对话框（下架二次确认 / 切回继承确认）═══════════════ */

.scrim {
  position: fixed; inset: 0;
  background: rgba(22, 25, 29, 0.4);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 100;
}
.dialog {
  background: var(--w);
  border-radius: 8px;
  width: 420px; max-width: 100%;
  padding: 22px;
  box-shadow: 0 12px 40px rgba(22, 25, 29, 0.2);
}
.dialog h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.dialog p { font-size: 12.5px; color: var(--g-600); line-height: 1.7; margin: 0 0 8px; }
.dialog .stress { font-size: 12px; color: var(--g-550); }
.dialog .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ═══════════════ 出错重试态（画布 10）═══════════════ */

.retry { padding: 48px 24px; text-align: center; }
.retry .i {
  width: 34px; height: 34px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--rejected-bg);
  color: var(--rejected-dot); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.retry .t { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.retry .d { font-size: 12px; color: var(--g-550); max-width: 420px; margin: 0 auto 16px; line-height: 1.7; }
.retry .acts { display: flex; gap: 8px; justify-content: center; }
.retry .req { font-size: 11px; color: var(--g-500); margin-top: 14px; font-variant-numeric: tabular-nums; }

/* 「这个页面不属于你的账号」提示页（画布 9）—— 保留侧边栏，给一条出路 */
.notfound { padding: 72px 24px; text-align: center; }
.notfound .mk {
  width: 34px; height: 34px; margin: 0 auto 12px;
  border-radius: var(--radius); background: var(--g-150);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--g-400);
}
.notfound .t { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.notfound .d { font-size: 12px; color: var(--g-550); max-width: 430px; margin: 0 auto 16px; line-height: 1.7; }
.notfound .acts { display: flex; gap: 8px; justify-content: center; }

/* 轻提示条（草稿已保存 / 已提交），4 秒自动收起 */
.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-size: 12.5px;
  padding: 9px 15px; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(22, 25, 29, 0.24);
  z-index: 200;
  display: flex; align-items: center; gap: 8px;
}
.toast.ok .m { color: #7FD8A4; font-weight: 700; }

/* ═══════════════ 窄屏 1280（画布 10）═══════════════
 * 侧边栏收成 52px 图标条；「性别·年龄段」「最近更新」并入名字下方第二行；
 * 🔴 状态列、操作列在任何宽度下都不折叠（画布 10 原话）。 */

@media (max-width: 1280px) {
  .sidebar { width: var(--sidebar-narrow); }
  .sidebar .brand { padding: 0; justify-content: center; }
  .sidebar .brand .name { display: none; }
  .sidebar nav { padding: 12px 6px; }
  .sidebar .group { display: none; }
  .sidebar .navitem { justify-content: center; padding: 0; }
  .sidebar .navitem .txt, .sidebar .navitem .count { display: none; }
  .sidebar .foot { display: none; }

  /* ☰ 临时展开成浮层 */
  .sidebar.open {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: 60;
    box-shadow: 0 0 40px rgba(22, 25, 29, 0.22);
  }
  .sidebar.open .brand { padding: 0 16px; justify-content: flex-start; }
  .sidebar.open .brand .name,
  .sidebar.open .group,
  .sidebar.open .navitem .txt,
  .sidebar.open .navitem .count,
  .sidebar.open .foot { display: block; }
  .sidebar.open .navitem { justify-content: flex-start; padding: 0 9px; }
  .sidebar.open .navitem .txt { display: block; }
  .sidebar.open nav { padding: 14px 10px; }

  .hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border: 1px solid var(--g-300); border-radius: var(--radius-sm);
    background: var(--w); cursor: pointer; font-size: 14px; color: var(--g-600);
  }
  .hamburger:hover { background: var(--g-100); }

  .filters { display: none; }
  .filter-select { display: block; }

  .rows.dogs .row { grid-template-columns: 44px 1fr 62px 100px 92px; }
  .rows.shops .row { grid-template-columns: 1fr 100px 96px; }
  .rows .row .c-hide { display: none; }
  .row .sub2 { display: block; font-size: 11px; color: var(--g-550); margin-top: 2px; }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-wrap { flex-direction: column; gap: 28px; }
  .auth-intro { text-align: center; }
  .auth-intro p { margin-left: auto; margin-right: auto; }
}