/* 千秋 · v0.2 —— 移动端优先样式（§29；视觉规范 v1.1 §3） */

/* ============================================================
   设计变量（UI 设计文档 v1.1 §3.1/§3.4/§3.5）
   颜色：宣纸米白底 + 赭石主色 + 黛蓝次强调
   ============================================================ */
:root {
  /* ---- 颜色（§3.1） ---- */
  --color-bg: #F7F4EF;            /* 主背景 · 宣纸米白 */
  --color-card: #FFFFFF;          /* 卡片背景 · 干净留白 */
  --color-text: #2B2B2B;          /* 主文字 · 深灰非纯黑 */
  --color-text-secondary: #6B6B6B;/* 次要文字 */
  --color-primary: #8C5A3C;       /* 主强调 · 赭石 */
  --color-secondary: #4A6B8A;     /* 次强调 · 黛蓝（链接/选中） */
  --color-danger: #A64B4B;        /* 危险 · 放生/注销 */
  --color-success: #5A7D5A;       /* 成功/完成 */
  --color-border: #D8D0C5;        /* 边框/分割线 · 柔和 */
  --color-pedigree-bg: #F2EDE6;   /* 谱系底色 */

  /* 派生浅色（同色系 8%-12% 透明度，用于标签底/悬停态） */
  --color-primary-soft: rgba(140, 90, 60, 0.10);
  --color-secondary-soft: rgba(74, 107, 138, 0.10);
  --color-success-soft: rgba(90, 125, 90, 0.12);
  --color-danger-soft: rgba(166, 75, 75, 0.12);
  --color-warn: #B97F24;          /* 提醒（离线条/剩余时间），v0.1 保留 */
  --color-warn-soft: rgba(185, 127, 36, 0.12);

  /* ---- 字号（§3.2） ---- */
  --font-size-title: 20px;        /* 页面标题 18-20px */
  --font-size-section: 16px;      /* 区块标题 */
  --font-size-body: 14px;         /* 正文 */
  --font-size-caption: 12px;      /* 辅助说明 */
  --font-size-button: 15px;       /* 按钮文字 14-16px */

  /* ---- 间距（§3.4：页边距 16 / 卡内 12-16 / 列表项 8-12） ---- */
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;

  /* ---- 圆角（§3.4：卡片 8px / 按钮 6px） ---- */
  --radius-card: 8px;
  --radius-button: 6px;

  /* ---- 兼容别名：v0.1 变量名继续可用，值统一切到 v0.2 色板 ---- */
  --bg: var(--color-bg);
  --card: var(--color-card);
  --ink: var(--color-text);
  --ink-2: var(--color-text-secondary);
  --line: var(--color-border);
  --primary: var(--color-primary);
  --primary-ink: #FFFFFF;
  --danger: var(--color-danger);
  --ok: var(--color-success);
  --warn: var(--color-warn);
  --radius: var(--radius-card);
  /* §29.2：点击区域最小 44px */
  --tap: 44px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font: var(--font-size-body)/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}
/* 底部导航占位：主体不被导航遮住 */
body.with-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* ---- 离线提示条 ---- */
.offline-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-warn); color: #fff;
  text-align: center; font-size: 13px;
  padding: 6px 12px; min-height: 28px;
}

/* ---- 主体 ---- */
.app-main { max-width: 560px; margin: 0 auto; padding: var(--spacing-md) var(--spacing-md) 24px; }

/* ---- 底部导航（§29.3 / v1.1 §5.7） ---- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; text-decoration: none; color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}
.nav-item .nav-icon { width: 24px; height: 24px; line-height: 1; }
.nav-item .nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-item.active { color: var(--color-primary); font-weight: 600; }
/* v0.6 §1：底部导航第 3 项「未知」占位——灰色问号、点击不响应、永不高亮 */
.nav-item.nav-placeholder {
  color: var(--color-text-secondary);
  opacity: 0.45;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
/* hidden 属性防御：display:flex 会覆盖 UA 的 [hidden]{display:none}（登录页/退出后必须真隐藏） */
.bottom-nav[hidden] { display: none; }

/* ---- 通用控件：无 hover 依赖（§29.5），全部用 active 反馈 ---- */
button, .btn {
  min-height: var(--tap); min-width: 44px;
  border: none; border-radius: var(--radius-button);
  background: var(--color-primary); color: var(--primary-ink);
  font-size: var(--font-size-button); font-weight: 600; padding: 8px 16px; margin: 4px 0;
  cursor: pointer; transition: opacity 0.1s;
}
button:active, .btn:active { opacity: 0.75; }
button:disabled, .btn.disabled { background: var(--color-border); color: var(--color-card); }
button.ghost { background: var(--color-primary-soft); color: var(--color-primary); }
button.danger { background: var(--color-danger); }
button.small { min-height: 36px; padding: 4px 12px; font-size: 13px; }
input, select {
  min-height: var(--tap); width: 100%;
  border: 1px solid var(--color-border); border-radius: var(--radius-button);
  background: var(--color-card); color: var(--color-text);
  font-size: 16px; /* ≥16px 防 iOS 聚焦自动放大 */
  padding: 10px 12px; margin: 4px 0 12px;
}
.field-label { font-size: 13px; color: var(--color-text-secondary); margin-top: 8px; display: block; }

/* ---- 卡片 ---- */
.card {
  background: var(--color-card); border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  padding: 14px; margin: 8px 0;
  box-shadow: 0 1px 2px rgba(90, 70, 50, 0.06);
}
.card h3 { margin: 0 0 6px; font-size: var(--font-size-section); }
.section-title {
  font-size: var(--font-size-body); color: var(--color-text-secondary); font-weight: 600;
  margin: 18px 4px 8px; display: flex; justify-content: space-between;
}
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1; }
.kv { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: var(--font-size-body); }
.kv .k { color: var(--color-text-secondary); flex-shrink: 0; }
.kv .v { text-align: right; word-break: break-all; }
.tag {
  display: inline-block; font-size: var(--font-size-caption); border-radius: 8px;
  padding: 2px 8px; background: var(--color-primary-soft); color: var(--color-primary); margin-right: 4px;
}
.tag.warn { background: var(--color-warn-soft); color: var(--color-warn); }
.tag.ok { background: var(--color-success-soft); color: var(--color-success); }
.tag.danger { background: var(--color-danger-soft); color: var(--color-danger); }
.muted { color: var(--color-text-secondary); font-size: 13px; }
.strike { text-decoration: line-through; opacity: 0.7; }

/* ---- 列表卡片 ---- */
/* 批 A1.4：卡片缩小 —— 高度对齐「加入日期」行（约 44px）：
   min-height 64→44、padding 12×14→6×10、margin 8→6、name 16→14px、sub 11px */
.person-card {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 6px 10px; margin: 6px 0; min-height: 44px;
  text-decoration: none; color: var(--color-text);
}
.person-card:active { background: var(--color-primary-soft); }
.person-card .name { font-weight: 600; font-size: 14px; }
.person-card .sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 1px; }
.person-card .right { text-align: right; flex-shrink: 0; font-size: 12px; color: var(--color-text-secondary); }

/* ---- 候选池网格 ---- */
.candidate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.candidate {
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 12px; text-align: center;
}
.candidate .species { font-weight: 600; margin: 2px 0 6px; }
.candidate .slot { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
/* 领养所卡片：品种名白名单标题（§13），长品种名省略号截断（v1.1 §5.10） */
.candidate .adopt-name {
  font-weight: 600; margin: 2px 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 谱系页（§29.4：横向滚动 + sticky 标尺 + 绝对定位） ---- */
.pedigree-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--color-pedigree-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  position: relative;
}
.pedigree-canvas { position: relative; }
.pedigree-ruler {
  position: sticky; left: 0; z-index: 5;
  width: 64px; flex-shrink: 0;
  background: rgba(247, 244, 239, 0.95);
  border-right: 1px solid var(--color-border);
  pointer-events: none;
}
.pedigree-ruler .ruler-cell {
  position: absolute; left: 0; width: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-caption); color: var(--color-text-secondary); font-weight: 600;
  border-bottom: 1px dashed var(--color-border);
}
.pedigree-node {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--color-card); border: 1.5px solid var(--color-border); border-radius: 10px;
  padding: 6px 8px; text-align: center; font-size: var(--font-size-caption); line-height: 1.35;
  box-shadow: 0 1px 3px rgba(90, 70, 50, 0.08);
}
.pedigree-node.is-root { border-color: var(--color-primary); border-width: 2px; }
.pedigree-node.stray .node-name { text-decoration: line-through; opacity: 0.7; }
.pedigree-node.duplicate { border-style: double; border-width: 4px; }
.pedigree-node .node-name { font-weight: 600; word-break: break-all; }
.pedigree-node .node-sub { color: var(--color-text-secondary); font-size: 11px; }
.pedigree-node .node-color { color: var(--color-warn); }

/* ---- Toast / 错误卡 ---- */
.toast-root {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 90; width: max-content; max-width: 90vw;
}
.toast {
  background: rgba(43, 43, 43, 0.94); color: #fff;
  border-radius: 10px; padding: 10px 16px; font-size: var(--font-size-body);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.toast.error { background: rgba(166, 75, 75, 0.96); }
.error-box { text-align: center; padding: 28px 16px; }
.error-box .msg { color: var(--color-text-secondary); margin-bottom: 12px; }
.loading { text-align: center; color: var(--color-text-secondary); padding: 32px 0; }

/* ---- 登录页 ---- */
.auth-title { text-align: center; font-size: 24px; margin: 32px 0 4px; color: var(--color-primary); }
.auth-sub { text-align: center; color: var(--color-text-secondary); margin-bottom: 24px; }
.tab-switch { display: flex; gap: 8px; margin-bottom: 8px; }
.tab-switch button { flex: 1; background: var(--color-primary-soft); color: var(--color-text-secondary); }
.tab-switch button.active { background: var(--color-primary); color: var(--primary-ink); }

/* ---- 第二批页面（领养所 / 交换所 / 我的订单 / 交换记录 / 流浪页 / 更多） ---- */

/* 个体信息条：订单条目、快照条目共用（不换行 + 横向滚动，避免挤压卡片高度） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip {
  font-size: var(--font-size-caption); line-height: 1.4; border-radius: 8px;
  background: var(--color-primary-soft); color: var(--color-text-secondary); padding: 3px 8px;
  word-break: break-all;
}

/* 多选个体行（创建订单 / 提交报价） */
.pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.pick-row:last-of-type { border-bottom: none; }
/* 覆盖全局 input 的 100% 宽与 44px 高（勾选框不需要大点击区） */
.pick-row input[type='checkbox'] {
  flex: 0 0 auto; width: 22px; min-width: 22px; height: 22px; min-height: 22px;
  margin: 0; padding: 0;
}
/* v0.6 R4：单选框同样要脱离全局 input{width:100%} 口径（繁育页 / 驿站选择器） */
.pick-row input[type='radio'] {
  flex: 0 0 auto; width: 22px; min-width: 22px; height: 22px; min-height: 22px;
  margin: 0; padding: 0;
}
.pick-main { flex: 1; display: flex; flex-direction: column; }
.pick-main .name { font-weight: 600; font-size: var(--font-size-body); }
.pick-main .sub { font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-top: 2px; }
.pick-row .right { flex-shrink: 0; font-size: var(--font-size-caption); }

/* 报价列表 */
.offers-box { border-top: 1px dashed var(--color-border); margin-top: 10px; padding-top: 8px; }
.offer { border-left: 3px solid var(--color-border); padding-left: 10px; margin: 10px 0; }
.offer .row { margin-top: 4px; }

/* 成交快照条目 */
.swap-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--color-border);
}
.swap-item:last-of-type { border-bottom: none; }
.swap-item .name { font-weight: 600; }
.swap-item .sub { font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-top: 2px; }

/* 更多页菜单 */
.menu-grid { display: grid; gap: 8px; margin-top: 12px; }
.menu-link {
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 12px 14px; text-decoration: none; color: var(--color-text);
}
.menu-link:active { background: var(--color-primary-soft); }
/* 批 A1.3：tab 切换按钮 —— 复用 menu-link 卡片观感，重置 button 默认样式 */
button.menu-link { font: inherit; cursor: pointer; }
button.menu-link:disabled { opacity: 0.55; cursor: default; }
.menu-icon { font-size: 22px; flex-shrink: 0; }
/* 内联 SVG 图标（icons.js）：继承父级字号与 currentColor，随主题色变化 */
.menu-icon svg, .card-mark svg, .fav-btn svg, .star-big svg, .icon svg, svg.icon {
  width: 1em; height: 1em; vertical-align: middle; display: inline-block;
  flex-shrink: 0;
}
.menu-text { flex: 1; display: flex; flex-direction: column; }
.menu-text .name { font-weight: 600; }
.menu-text .sub { font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-top: 2px; }
.menu-arrow { color: var(--color-text-secondary); font-size: 20px; flex-shrink: 0; }

/* ---- 第三批页面（百科 / 成就 / 统计 / 收藏 / 分组 / 每周挑战 / 账户设置） ---- */

/* 进度条（图鉴完成度 / 挑战进度） */
.bar {
  height: 8px; border-radius: 4px; background: var(--color-pedigree-bg);
  overflow: hidden; margin: 8px 0 6px;
}
.bar > span { display: block; height: 100%; background: var(--color-primary); border-radius: 4px; }

/* 图鉴：品种行 + 5 状态格 */
.breed-row { padding: 8px 0; border-bottom: 1px dashed var(--color-border); }
.breed-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.breed-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.breed-head .name { font-weight: 600; font-size: var(--font-size-body); }
.breed-head .right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.state-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; }
.state-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 52px; padding: 4px 2px; text-align: center;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-pedigree-bg); color: var(--color-text-secondary); font-size: 11px; line-height: 1.25;
}
.state-cell .state-icon { font-size: 13px; }
.state-cell.lit {
  background: var(--color-success-soft); border-color: rgba(90, 125, 90, 0.35);
  color: var(--color-success); font-weight: 600;
}

/* 见闻增强（v0.6 §2 项 8）：仅遇见的条目 —— 整行灰显 / 半透明，
   与「已点亮」的彩色格区分（观看不解锁任何状态格，5 格恒为「？」） */
.breed-row.seen-only .state-cell { opacity: 0.45; }
.breed-row.seen-only .breed-head .name { color: var(--color-text-secondary); font-weight: 500; }
.breed-row.seen-only .seal-fantasy { opacity: 0.5; }
/* 条目右侧计数：「拥有 N / 遇见 M」（拥有过）或「遇见 N」（仅遇见） */
.ency-count { font-size: 12px; }

/* 成就 / 挑战卡片：已达成高亮边框 */
.card.done { border-color: rgba(90, 125, 90, 0.35); }
.ach-mark { font-size: 15px; }

/* 星星总数 */
.star-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.star-big { font-size: 26px; font-weight: 700; color: var(--color-warn); }

/* 分组成员 / 详情页分组面板 */
.members-box { border-top: 1px dashed var(--color-border); margin-top: 10px; padding-top: 8px; }
.member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--color-border);
}
.member-row:last-of-type { border-bottom: none; }
.member-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  text-decoration: none; color: var(--color-text);
}
.member-main .name { font-weight: 600; font-size: var(--font-size-body); word-break: break-all; }
.member-main .sub { font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-top: 2px; }
.member-row button { flex-shrink: 0; margin: 0; }
button.ghost.small { background: var(--color-primary-soft); color: var(--color-primary); }

/* 备注输入框（复用 input 的视觉，独立写以免影响 checkbox 覆盖规则） */
textarea.note-input {
  width: 100%; min-height: 76px; resize: vertical;
  border: 1px solid var(--color-border); border-radius: var(--radius-button);
  background: var(--color-card); color: var(--color-text);
  font: inherit; font-size: 16px; /* ≥16px 防 iOS 聚焦自动放大 */
  padding: 10px 12px; margin: 4px 0 8px;
}

/* ============================================================
   v0.2 新增：启动页（§6.8）
   ============================================================ */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-bg);
  transition: opacity 0.45s ease;
}
.splash.leaving { opacity: 0; pointer-events: none; }
.splash .splash-cicada {
  width: 64px; height: 64px; color: var(--color-primary);
  /* 破土：自土线下方升起 + 展翅 */
  animation: splash-rise 1.2s ease-out both;
}
.splash .splash-title {
  font-size: 44px; font-weight: 700; letter-spacing: 0.35em; text-indent: 0.35em;
  color: var(--color-primary); margin: 18px 0 0;
  animation: splash-fade 1s ease-out 0.4s both;
}
.splash .splash-tagline {
  position: absolute; bottom: 48px;
  font-size: var(--font-size-caption); color: var(--color-text-secondary); letter-spacing: 0.2em;
  animation: splash-fade 1s ease-out 0.7s both;
}
.splash .splash-soil {
  position: absolute; bottom: 0; left: 0; right: 0; height: 56px; color: var(--color-border);
  animation: splash-fade 0.8s ease-out both;
}
@keyframes splash-rise {
  0%   { transform: translateY(26px) scale(0.82); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes splash-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .splash .splash-cicada, .splash .splash-title, .splash .splash-tagline, .splash .splash-soil {
    animation: none;
  }
}

/* ============================================================
   v0.2 新增：骨架屏（§5.9）
   灰色占位块 + 流光；形状与真实内容一致，加载完成后无缝切换
   ============================================================ */
.skeleton {
  position: relative; overflow: hidden;
  background: #E9E2D6; border-radius: 6px;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}
/* 行占位：默认一行文字高度 */
.skeleton-line { height: 14px; margin: 6px 0; }
.skeleton-line.title { height: 18px; width: 40%; }
.skeleton-line.short { width: 60%; }
/* 卡片占位：复用卡片外观，内部请放 skeleton-line */
.skeleton-card {
  border-radius: var(--radius-card); border: 1px solid var(--color-border);
  background: var(--color-card); padding: 14px; margin: 8px 0;
}
/* 列表占位容器：子项自动撑起卡片区 */
.skeleton-list .skeleton-card { min-height: 64px; }

/* ============================================================
   v0.2 新增：空状态（§5.9）
   插画 120×120 居中 + 文案；插画文件见 assets/illustrations/
   ============================================================ */
.empty-state {
  text-align: center; padding: 36px var(--spacing-lg) 28px;
}
.empty-state .empty-illo {
  width: 120px; height: 120px; display: block; margin: 0 auto 12px;
}
.empty-state .empty-text {
  margin: 0; font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: 1.6;
}

/* ============================================================
   C2.1 新增：谱录 / 寻迹 / 详情页（母版 §19）
   ============================================================ */

/* ---- 谱录顶部状态条（积分 / 星星 / 照护槽） ---- */
.top-status {
  display: flex; gap: 8px; margin: 8px 0 4px;
}
.top-status .ts-cell {
  flex: 1; background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 8px 10px; text-align: center;
  font-size: var(--font-size-caption); color: var(--color-text-secondary);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-status .ts-cell b {
  display: block; font-size: var(--font-size-section); color: var(--color-text); font-weight: 600;
}

/* ---- 搜索框（谱录 §19.1） ---- */
.search-box { margin: 8px 0; }
.search-box input {
  margin: 0; background: var(--color-bg); border-color: var(--color-border);
}

/* ---- 批 A1.3：成体 tab 分页控件（《 ‹ 输入 › 》） ---- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 14px 4px 20px;
}
.pg-btn {
  min-width: 38px; height: 36px; padding: 0 10px;
  font: inherit; color: var(--color-text); cursor: pointer;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 8px;
}
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-btn:not(:disabled):active { background: var(--color-primary-soft); }
.pg-info { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-body); color: var(--color-text-secondary); }
.pg-input {
  width: 52px; height: 36px; text-align: center; padding: 0 6px; margin: 0;
  background: var(--color-bg); border-color: var(--color-border);
}

/* ---- 批 A1.4：谱录操作行（图标按钮 40×40 + 常驻搜索框）+ 筛选弹窗 ---- */
.action-row { display: flex; align-items: center; gap: 8px; margin: 8px 4px; }
.action-icon {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 20px; color: var(--color-text); cursor: pointer; text-decoration: none;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 10px;
}
.action-icon:active { background: var(--color-primary-soft); }
.action-search {
  flex: 1; min-width: 0; height: 40px; margin: 0;   /* 占剩余宽度，375px 不换行 */
  background: var(--color-bg); border-color: var(--color-border);
}
/* 筛选弹窗：每组一标题 + 一排选项按钮（复用 .modal-mask/.modal） */
.filter-group { margin: 10px 0; }
.filter-group .fg-title { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 6px; }
.filter-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-btn {
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 999px;
}
.opt-btn.on {
  background: var(--color-primary-soft); color: var(--color-primary);
  border-color: var(--color-primary); font-weight: 600;
}

/* ---- 批 A1.5：分组下拉（🗂 → 全部 / ─── / 分组列表）---- */
.group-wrap { position: relative; flex: 0 0 40px; }
/* 🗂 有分组生效时高亮（赭石描边 + 主色），无分组时与其它图标一致 */
.action-icon.on {
  border-color: var(--color-primary); color: var(--color-primary);
  background: var(--color-primary-soft);
}
/* 点击外部关闭：全屏透明遮罩，层级在菜单之下 */
.popover-mask { position: fixed; inset: 0; z-index: 40; background: transparent; }
.group-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 41;
  min-width: 170px; max-height: 260px; overflow-y: auto; padding: 4px;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 6px 18px rgba(43, 43, 43, 0.14);
}
.group-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px; margin: 0;
  font: inherit; font-size: 13px; color: var(--color-text);
  background: none; border: none; border-radius: 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-item.on { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.group-item.muted { color: var(--color-text-secondary); cursor: default; }
.group-sep { height: 1px; margin: 4px 6px; background: var(--color-border); }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.modal-actions button { margin: 0; }

/* ---- 成长进度条（蛋 12h / 幼体 72h，赭石填充） ---- */
.progress {
  height: 6px; border-radius: 3px; background: var(--color-border);
  overflow: hidden; margin-top: 8px;
}
.progress .progress-fill {
  height: 100%; border-radius: 3px; background: var(--color-primary);
  transition: width 0.3s ease;
}

/* ---- 性别符号（§4.5：蛋 "---"，无性 "◯"） ---- */
.sex-symbol { font-weight: 600; }
.sex-symbol.male { color: var(--color-secondary); }
.sex-symbol.female { color: var(--color-danger); }

/* ---- 卡片长名截断（§6 移动端规范） ---- */
.person-card .name {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.person-card > div:first-child { min-width: 0; }

/* ---- 收藏按钮 ♡/♥（详情标题行右侧） ---- */
.fav-btn {
  background: none; border: none; padding: 4px 6px; margin: 0;
  font-size: 22px; line-height: 1; min-height: 44px; min-width: 44px;
  color: var(--color-text-secondary); vertical-align: middle;
}
.fav-btn.faved { color: var(--color-primary); }

/* ---- 卡片组织状态标记 ♥ / 🗂N / 📝（§19 列表字段 · 批次 B） ----
   三种标记「有才显示」，故这里不用 :empty 之类的兜底；整块由 JS 决定是否渲染。 */
.card-marks {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px;
}
.card-mark {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 1.5; padding: 1px 7px; border-radius: 999px;
  background: var(--color-primary-soft); color: var(--color-primary);
}
.card-mark.fav { font-size: 13px; padding: 0 6px; }   /* ♥ 用赭石色，稍大以便一眼看到 */
.card-mark.note { background: var(--color-secondary-soft); color: var(--color-secondary); }

/* ---- 弹窗（改名 / 通用确认，§4.4） ---- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(43, 43, 43, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 60; padding: var(--spacing-lg);
}
.modal {
  background: var(--color-card); border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  width: 100%; max-width: 340px; padding: 16px;
  box-shadow: 0 8px 24px rgba(90, 70, 50, 0.18);
  max-height: 80vh; overflow-y: auto; /* 内含多选列表（迁徙建单/报价）时不超出视口 */
}
.modal h3 { margin: 0 0 10px; }
.modal .field-error {
  font-size: var(--font-size-caption); color: var(--color-danger); min-height: 18px; margin: -6px 0 6px;
}

/* ---- 草稿箱（E5.1，§34.7）：diff 预览 ---- */
.draft-diff {
  margin: 10px 0; padding: 10px; border-radius: var(--radius-card);
  background: var(--color-bg); border: 1px solid var(--color-border);
}
.draft-diff ul { margin: 6px 0 0; padding-left: 18px; }
.draft-diff .diff-line { font-size: var(--font-size-caption); line-height: 1.7; word-break: break-all; }

/* ---- 领取结果卡（寻迹 §5.3） ---- */
.claim-card { border-color: var(--color-primary); }
.claim-card .countdown { font-variant-numeric: tabular-nums; }

/* ---- 详情页标题行 ---- */
.detail-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.detail-title-row h3 {
  margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.detail-sub { margin-top: 2px; }
.detail-actions { display: flex; flex-direction: column; gap: 2px; }

/* ============================================================
   C2.4：余藏九页通用组件（Tab / 筛选 / 数字卡 / 双栏记录 / 标语）
   ============================================================ */
/* Tab 切换（我的订单） */
.tabs { display: flex; gap: 8px; margin: 8px 4px; }
.tabs button {
  flex: 1; min-height: 44px;
  background: var(--color-card); color: var(--color-text); border-color: var(--color-border);
}
.tabs button.active {
  background: var(--color-primary); color: var(--color-card);
  border-color: var(--color-primary); font-weight: 600;
}

/* 筛选 chip 行（成就 全部/已完成/未完成） */
.filter-row { display: flex; gap: 8px; margin: 8px 4px; flex-wrap: wrap; }
.filter-row .chip { cursor: pointer; min-height: 36px; }
.filter-row .chip.active {
  border-color: var(--color-primary); color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* 三张数字卡（统计 §5.15） */
.stat-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 4px;
}
.stat-card {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: 14px 6px; text-align: center;
}
.stat-card .num { font-size: 26px; font-weight: 700; color: var(--color-primary); }
.stat-card .label {
  font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-top: 4px;
}

/* 交换记录双栏：我提供 ⇄ 我获得（§5.10） */
.record-duo {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
  align-items: start; margin: 8px 0;
}
.record-duo .duo-arrow { color: var(--color-primary); font-weight: 700; padding-top: 2px; }
.duo-col { min-width: 0; }
.duo-col .duo-title {
  font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-bottom: 4px;
}
.duo-item { padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.duo-item:last-of-type { border-bottom: none; }
.duo-item .name { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.duo-item .sub {
  font-size: var(--font-size-caption); color: var(--color-text-secondary); margin-top: 2px;
}

/* 流浪页顶部标语（§5.18：#6B6B6B 12px 居中 → 次要文字变量） */
.slogan {
  text-align: center; font-size: var(--font-size-caption);
  color: var(--color-text-secondary); margin: 10px 4px;
}

/* 长文本截断（卡片内长昵称/品种名） */
.truncate { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 菜单占位项（余藏 · 溯古 v0.3） */
.menu-link.disabled { opacity: 0.55; pointer-events: none; }
.menu-link .menu-soon {
  font-size: var(--font-size-caption); color: var(--color-warn); flex-shrink: 0;
}

/* ============================================================
   v0.6 C3-B —— 寻迹「远方的发现」/ 驿站 / 信物记录 / §5.7 弹窗
   ============================================================ */

/* 远方的发现：两张入口卡横排（窄屏堆叠），赭石边框与现有卡片同风格 */
.discovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
@media (max-width: 340px) { .discovery-grid { grid-template-columns: 1fr; } }
.discovery-card {
  display: block; text-decoration: none;
  background: var(--color-card); border: 1px solid var(--color-primary);
  border-radius: var(--radius-card); padding: 12px;
}
.discovery-card:active { background: var(--color-primary-soft); }
.discovery-card .d-icon { font-size: 20px; }
.discovery-card .d-name { font-weight: 600; margin: 4px 0 2px; }
.discovery-card .d-sub { font-size: var(--font-size-caption); color: var(--color-text-secondary); }

/* ============================================================
   v0.6 批次 G：五行地名卡片（寻迹页）
   规格：米白底 + 赭石边框；两字地名 + 水墨意象图；**不加五行符号**。
   折叠时两列网格；展开后整卡占满一行，卡内列出该地的 3 个候选。
   ============================================================ */
.place-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm); margin: var(--spacing-md) 4px;
}
@media (max-width: 340px) { .place-grid { grid-template-columns: 1fr; } }

.place-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  grid-column: span 1;
  background: var(--color-bg);                 /* 卡片背景米白 */
  border: 1px solid var(--color-primary);      /* 边框赭石色 */
  border-radius: var(--radius-card);
  padding: 10px 12px;
  min-height: var(--tap);                      /* §29.2 点击区域 ≥44px */
  cursor: pointer;
  color: var(--color-text);
}
.place-card:active { background: var(--color-primary-soft); }
/* 展开态：整卡占满一行，背景提亮到纸白以突出内容 */
.place-card.open {
  grid-column: 1 / -1;
  background: var(--color-card);
  box-shadow: 0 1px 4px rgba(140, 90, 60, 0.10);
}
.place-card .place-icon { width: 32px; height: 32px; flex: 0 0 32px; display: block; }
.place-card .place-meta { flex: 1 1 auto; min-width: 0; }
.place-card .place-name {
  font-size: var(--font-size-section); font-weight: 600; letter-spacing: 2px; line-height: 1.2;
}
.place-card .place-sub { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.place-card .place-arrow {
  flex: 0 0 auto; font-size: var(--font-size-caption); color: var(--color-primary);
}

/* 展开内容：占满卡片整行，候选逐行列出（品种名可省略号截断） */
.place-candidates {
  flex: 0 0 100%;
  margin-top: var(--spacing-sm); padding-top: var(--spacing-sm);
  border-top: 1px dashed var(--color-border);
  display: flex; flex-direction: column; gap: var(--spacing-sm);
}
.place-candidates .place-empty {
  font-size: var(--font-size-caption); color: var(--color-text-secondary); padding: 4px 2px;
}
.place-row { display: flex; align-items: center; gap: var(--spacing-sm); }
.place-row .tag { flex: 0 0 auto; }
.place-row .p-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.place-row button { flex: 0 0 auto; }

/* 驿站叙事（§5.6）：逐行淡入 */
.station-narrative { margin: 8px 4px 12px; }
.station-narrative .line {
  font-size: var(--font-size-body); color: var(--color-text);
  margin: 6px 0; opacity: 0; transform: translateY(4px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.station-narrative .line.show { opacity: 1; transform: none; }

/* §5.7 提示弹窗：米白底、赭石边框、圆角 8px，遮罩半透明点击可关 */
.q-modal-mask {
  position: fixed; inset: 0; background: rgba(43, 43, 43, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 90;
}
.q-modal {
  background: var(--color-bg); border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-card); padding: 24px 20px 16px;
  width: min(78vw, 300px); text-align: center;
}
.q-modal .q-msg { font-size: 16px; line-height: 1.6; margin-bottom: 16px; }
.q-modal button { min-width: 96px; }


/* ---- v0.6 R2：谱录页顶部「加入日期 + 三项统计摘要」（统计页并入谱录页） ---- */
.join-banner {
  margin: 8px 4px 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-soft, #6b5d4f);
  background: var(--paper-soft, #f7f2ea);
  border: 1px solid var(--line-soft, #e5dccd);
  border-radius: 8px;
}
.join-banner b { color: var(--ink, #3d3227); margin-left: 2px; }
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 4px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  background: var(--paper-soft, #f7f2ea);
  border: 1px solid var(--line-soft, #e5dccd);
  border-radius: 8px;
  text-align: center;
}
.stat-card b {
  font-size: 20px;
  line-height: 1.2;
  color: var(--accent, #8c5a3c);
}
.stat-card span {
  font-size: 11px;
  color: var(--ink-soft, #6b5d4f);
}

/* ============================================================================
   后台管理（千秋 v0.6 批次 E1，§34）
   —— 比前台更简洁：纯色纸面，无背景图案；复用全局 CSS 变量。
   ============================================================================ */
body.admin-page-open { background: var(--color-bg); }

.admin-page { min-height: 100vh; display: flex; flex-direction: column; }

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card);
}
.admin-back {
  color: var(--color-secondary);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.admin-title { font-weight: 600; flex: 1; text-align: center; }
.admin-role {
  font-size: 12px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.admin-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
}
.admin-side {
  width: 92px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-card);
  padding: 6px 0;
}
.admin-side-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 12px;
  border-left: 3px solid transparent;
}
.admin-side-item .icon { font-size: 18px; line-height: 1; }
.admin-side-item.active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
}
.admin-main {
  flex: 1;
  min-width: 0;
  padding: 12px;
}
.admin-main-title { margin: 0 0 10px; }

.admin-card { margin-bottom: 10px; }
.admin-module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.admin-module-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
}
.admin-module-card .icon { font-size: 20px; line-height: 1.2; }
.admin-module-card .name { font-weight: 600; font-size: 14px; }
.admin-module-card .sub {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.admin-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.admin-placeholder { text-align: center; padding: 32px 12px; }
.admin-placeholder .icon { font-size: 32px; margin-bottom: 8px; }
.admin-placeholder .msg { font-weight: 600; margin-bottom: 4px; }
.admin-placeholder .sub { font-size: 12px; color: var(--color-text-secondary); }

/* ============================================================================
   后台 · 人员管理（千秋 v0.6 批次 E2，#/admin/users，§34.1）
   —— 复用全局 .card/.chip/.modal/.tag；只补本页特有块。
   ============================================================================ */
.admin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 2px 4px 8px;
}
.user-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.user-row:last-child { border-bottom: none; padding-bottom: 4px; }
.user-row .line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-row .line1 .uname { font-weight: 600; }
.user-row .line2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--font-size-caption); color: var(--color-text-secondary);
}
.user-row .line3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-row .line3 button { margin: 0; flex: none; } /* flex 压缩会把中文按钮挤成两行 */
.user-row .line-hint { font-size: 11px; color: var(--color-text-secondary); }
.link-btn {
  background: none; border: none; padding: 0; margin: 0;
  min-height: auto; min-width: auto; white-space: nowrap;
  color: var(--color-secondary); font-size: var(--font-size-caption); font-weight: 600;
  text-decoration: underline;
}
.role-badge {
  display: inline-block; font-size: var(--font-size-caption); font-weight: 600;
  padding: 2px 8px; border-radius: 8px;
  background: var(--color-secondary-soft); color: var(--color-secondary);
}
.role-badge.superadmin { background: var(--color-danger-soft); color: var(--color-danger); }
.role-badge.content_editor { background: var(--color-primary-soft); color: var(--color-primary); }
.role-badge.species_manager { background: var(--color-success-soft); color: var(--color-success); }
.role-badge.viewer { background: var(--color-warn-soft); color: var(--color-warn); }
.perm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.perm-chips .chip {
  font-size: 11px; padding: 2px 8px; border-radius: 8px;
  background: var(--color-primary-soft); color: var(--color-primary);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.perm-chips .chip.extra { background: var(--color-success-soft); color: var(--color-success); }

/* ============================================================================
   繁育页（千秋 v0.6 批次 R4，§9 / §18）
   —— 复用全局变量与 .card/.pick-row/.chips；只补本页特有的三小块。
   ============================================================================ */
.breeding-person {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
  font-size: var(--font-size-body);
}
.breeding-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.breeding-rate {
  font-size: var(--font-size-section);
  color: var(--color-primary);
  font-weight: 600;
  margin: 4px 0;
}
/* 选中的候选 B（station.js 也用 .picked，此处补齐高亮） */
.pick-row.picked {
  background: var(--color-primary-soft);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}
.pick-row .name.node-color { font-weight: 600; }

/* ============================================================================
   后台 · 品种配置 + 培育时间（千秋 v0.6 批次 E3，#/admin/species、#/admin/lifecycle，§34.2/§34.3）
   —— 复用 .card/.chip/.modal/.tag/.pick-row/.link-btn；只补本页特有块。
   ============================================================================ */
.species-filters { flex-direction: column; align-items: stretch; gap: 6px; }
.species-filters .search-input { margin: 0; }
.species-filters .filter-row { display: flex; gap: 6px; }
.species-filters .filter-row .chip { cursor: pointer; min-height: 32px; }

.species-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 0; border-bottom: 1px solid var(--color-border);
}
.species-row:last-child { border-bottom: none; padding-bottom: 4px; }
.species-row .line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.species-row .line1 .sname { font-weight: 600; }
.species-row .line2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--font-size-caption); color: var(--color-text-secondary);
}
.species-row .line3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.species-row .line3 button { margin: 0; flex: none; }
.species-row .line-hint { font-size: 11px; color: var(--color-text-secondary); }
.kv-inline { white-space: nowrap; }

/* 分类学折叠网格（8 级 + 品种名单独展示） */
.tax-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  padding: 8px 10px;
  background: var(--color-primary-soft);
  border-radius: 8px;
}
.tax-cell { display: flex; gap: 6px; font-size: var(--font-size-caption); min-width: 0; }
.tax-key { color: var(--color-text-secondary); flex: none; }
.tax-val { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Available 开关行 */
.avail-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-caption); color: var(--color-text-secondary);
  min-height: 36px;
}
.avail-switch input { width: auto; min-height: auto; margin: 0; }

/* 二次确认差异表 */
.diff {
  margin: 10px 0;
  padding: 8px 10px;
  background: var(--color-bg);
  border-radius: 8px;
}
.diff-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--font-size-caption); padding: 3px 0;
}
.diff-key { color: var(--color-text-secondary); flex: none; min-width: 56px; }
.diff-before { color: var(--color-danger); text-decoration: line-through; }
.diff-arrow { color: var(--color-text-secondary); }
.diff-after { color: var(--color-success); font-weight: 600; }

/* 版本历史 */
.history-list { max-height: 46vh; overflow-y: auto; margin: 8px 0; }
.history-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 0; border-bottom: 1px solid var(--color-border);
}
.history-row:last-child { border-bottom: none; }
.history-row.current { background: var(--color-primary-soft); border-radius: 8px; padding: 8px 10px; }
.history-row .line1 { display: flex; align-items: center; gap: 8px; }
.history-row .line1 .ver { font-weight: 600; }
.history-row .line2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--font-size-caption); color: var(--color-text-secondary);
}
.history-row .line3 { display: flex; gap: 8px; }
.history-row .line3 button { margin: 0; flex: none; }

.inline-confirm {
  margin-top: 8px; padding: 10px;
  border: 1px solid var(--color-warn);
  border-radius: 8px;
  background: var(--color-warn-soft);
  font-size: var(--font-size-caption);
}
.inline-confirm .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.inline-confirm .row button { margin: 0; }

/* ============================================================================
 * v0.6 E5.3 颜色权重配置（#/admin/colors、#/admin/color-presets）
 * —— 复用 .card/.modal/.species-row/.inline-confirm；只补本页特有块。
 * ========================================================================== */
.color-bar-actions { display: flex; align-items: center; gap: 8px; }
.color-bar-actions a { margin: 0; }

/* 当前生效权重卡片：左饼图 + 右说明 */
.color-effective .color-effective-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.color-effective .color-effective-head .sname { font-weight: 600; }
.color-effective-body {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px;
}
.color-effective-detail { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.color-effective-detail .muted { font-size: var(--font-size-caption); }
.color-pie { flex: none; }

/* 滑条区（12 色系） */
.color-modal { max-width: 460px; }
.color-sliders { margin: 10px 0; }
.color-sliders-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.color-slider-row {
  display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
.color-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1px solid var(--color-border);
}
.color-slider-name {
  flex: none; width: 88px; font-size: var(--font-size-caption);
}
.color-slider-name .muted { font-size: 10px; }
.color-range { flex: 1; min-width: 90px; margin: 0; accent-color: var(--color-primary); }
.color-weight-value {
  flex: none; width: 22px; text-align: right; font-weight: 600;
  font-size: var(--font-size-caption);
}
.color-preset-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0;
}
.color-preset-row button { margin: 0; flex: none; }
.color-preset-row .field-label { margin: 0; }

/* 预设管理 */
.preset-locked { font-size: var(--font-size-caption); }

/* ============================================================================
 * v0.6 E6 审计日志（#/admin/audit）+ 系统工具（#/admin/system）
 * ========================================================================== */

/* 审计筛选区：两列栅格（标签 + 控件） */
.audit-filters {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
}
.audit-filters .field-label { margin: 0; }
.audit-filters select,
.audit-filters input { min-height: 32px; margin: 0; }
.audit-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.audit-filter-actions button { margin: 0; }

/* 审计表格 */
.audit-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-caption); }
.audit-table th {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary); font-weight: 600; white-space: nowrap;
}
.audit-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.audit-table tr:last-child td { border-bottom: none; }
.audit-table .audit-time,
.audit-table .audit-admin,
.audit-table .audit-target { white-space: nowrap; }
.audit-table .audit-action code {
  font-size: 11px; background: var(--color-bg);
  padding: 1px 5px; border-radius: 4px;
}
.audit-table .audit-summary {
  max-width: 380px; overflow-wrap: anywhere; color: var(--color-text-secondary);
}
.audit-table button { margin: 0; flex: none; }

/* 分页条 */
.audit-pager { justify-content: center; gap: 10px; }
.audit-pager button { margin: 0; }
.audit-page-info { min-width: 96px; text-align: center; }

/* 详情弹窗 */
.audit-modal { max-width: 560px; }
.audit-detail-meta { font-size: var(--font-size-caption); color: var(--color-text-secondary); }
.audit-diff-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-caption); margin-bottom: 8px; }
.audit-diff-table th,
.audit-diff-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--color-border); }
.audit-diff-table tr.changed td { background: var(--color-warn-soft); }
.audit-diff-table .before { color: var(--color-danger); }
.audit-diff-table .after { color: var(--color-success); }
.audit-snapshots { display: flex; gap: 10px; flex-wrap: wrap; }
.audit-snapshots > div { flex: 1; min-width: 200px; }
.audit-snapshots pre {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px;
  padding: 8px; margin: 4px 0 0; max-height: 40vh; overflow: auto;
  font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* 系统工具 */
.system-clock .kv { display: flex; gap: 8px; padding: 3px 0; }
.system-clock .kv .k { color: var(--color-text-secondary); flex: none; min-width: 72px; }
.system-clock .kv .v { font-weight: 600; }
.system-presets { display: flex; gap: 8px; margin-bottom: 8px; }
.system-presets button { flex: 1; margin: 0; }
.system-reset { width: 100%; margin: 0; }
.system-modal { max-width: 380px; }
.system-disabled .msg { color: var(--color-warn); font-weight: 600; }

/* ============================================================================
   v0.3-F6a 见闻页（图鉴适配）—— 品种描述需求 v0.5 §3~§5 / 见闻需求 v0.6 §2
   ============================================================================ */

/* 见多识广：艺术字，尺寸略大于其他文字，固定顶部随页滚动（v0.5 §3.6） */
.art-title {
  font-size: 22px; font-weight: 700; letter-spacing: 2px;
  color: var(--color-primary); margin: 0 0 6px;
}

/* 顶部工具行：切换下拉 + 搜索框（v0.5 §3.1 / v0.6 §2.2） */
.ency-toolbar { display: flex; gap: 8px; }
.ency-toolbar .ency-filter,
.ency-toolbar .ency-search {
  min-height: 38px; width: auto; flex: 1;
  margin: 0; padding: 6px 10px; font-size: 14px;
}
.ency-toolbar .ency-filter { flex: 0 0 auto; }

/* 「异」字印章：幻想生物条目，品种名左上角，16px 赭石细线圆圈（v0.5 §3.4）。
   篆体字体待设计提供，暂以常规「异」字占位。 */
.seal-fantasy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-right: 4px;
  border: 1px solid var(--color-primary); border-radius: 50%;
  color: var(--color-primary); font-size: 11px; line-height: 1;
  transform: translateY(-2px);
}

/* 描述解锁（方案 A）：状态格淡出 / 描述淡入，过渡 150ms（v0.5 §4.1/§4.2） */
@keyframes ency-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ency-fade-out { from { opacity: 1; } to { opacity: 0; } }
.desc-fade-in { animation: ency-fade-in 150ms ease-out both; }
.desc-fade-out { animation: ency-fade-out 150ms ease-in both; }
.ency-desc { padding: 6px 2px 2px; }
.ency-desc-text { margin: 0 0 4px; line-height: 1.6; }
.ency-desc-toggle {
  background: none; border: none; padding: 0;
  color: var(--color-primary); font-size: 13px; cursor: pointer;
}
.ency-desc-source { margin: 2px 0 0; color: var(--color-primary); font-size: 13px; }
.ency-desc-date { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 13px; }

/* 锚点高亮：详情页小图标跳入时目标条目高亮（v0.5 §5 / v0.6 §2.10；
   F6b 修正②：由 1.6s 匀速淡出改为 3s「常驻 70% 再淡出」——
   原曲线开头即衰减，截图窗口内颜色已近透明，肉眼也难看清） */
@keyframes ency-flash {
  0% { background: var(--color-primary-soft); }
  70% { background: var(--color-primary-soft); }
  100% { background: transparent; }
}
.breed-row.entry-flash { animation: ency-flash 3s ease-out 1; border-radius: 6px; }

/* 详情页「查看见闻」小图标（v0.5 §5：不显示描述全文，仅入口） */
.ency-link { margin-left: 6px; font-size: 14px; text-decoration: none; color: inherit; }
.ency-link:active { opacity: 0.7; }

/* ============================================================================
 * v0.6 descriptions 后台模块（#/admin/descriptions）
 *   复用 .card/.modal/.species-row/.inline-confirm/.note-input/.chip；
 *   只补本页特有块：字数计数、差异确认、版本行、导入预览与错误框。
 * ========================================================================== */

/* 列表行：描述预览限两行，避免长描述把行撑高 */
.desc-row .desc-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-row .desc-version { font-size: var(--font-size-caption); }

/* 编辑弹窗：描述文本域与实时字数 */
.desc-modal { max-height: 86vh; overflow-y: auto; }
.desc-textarea { min-height: 120px; }
.desc-counter {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  text-align: right;
}
.desc-counter.over { color: var(--color-danger, #c0392b); font-weight: 600; }

/* 提交前二次确认（原值 → 新值） */
.desc-diff {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-primary-soft);
}
.desc-diff-title {
  font-size: var(--font-size-caption);
  font-weight: 600;
  margin-bottom: 6px;
}
.desc-diff-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: var(--font-size-caption);
  margin: 4px 0;
  flex-wrap: wrap;
}
.desc-diff-tag { color: var(--color-text-secondary); flex: none; }
.desc-diff-old { text-decoration: line-through; opacity: 0.75; word-break: break-all; }
.desc-diff-new { font-weight: 600; word-break: break-all; }

/* 版本历史行 */
.desc-ver-row {
  border-bottom: 1px solid var(--color-border);
  padding: 8px 0;
  font-size: var(--font-size-caption);
}
.desc-ver-row:last-of-type { border-bottom: none; }
.desc-ver-row .line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.desc-ver-row.current { background: var(--color-primary-soft); border-radius: 6px; padding-left: 8px; }
.desc-ver-row button { margin: 6px 0 0; }

/* 导入预览与错误报告框 */
.desc-preview-box,
.desc-err-box {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
}
.desc-err-box { background: var(--color-primary-soft); }
.desc-prev-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 3px 0; }
.desc-prev-text { color: var(--color-text-secondary); word-break: break-all; }
.desc-err-line { font-size: var(--font-size-caption); margin: 3px 0; word-break: break-all; }
.desc-file { font-size: var(--font-size-caption); }