/* SnapTracker：方块 + 粗体。每层只显示这一层需要的内容。 */

#v-tracker { max-width: 820px; margin: auto; }

.tk-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-size: 14px; font-weight: 700; color: var(--dim); transition: color .15s; }
.tk-back .icon { width: 17px; height: 17px; }
.tk-back:active { color: var(--ink); }
@media (hover: hover) { .tk-back:hover { color: var(--ink); } }

.tk-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.tk-top > div { flex: 1; min-width: 0; }
.tk-top h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.028em; line-height: 1.1;
  overflow-wrap: anywhere; }
.tk-add { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s var(--e), opacity .14s; }
.tk-add .icon { width: 20px; height: 20px; stroke-width: 2.5; }
.tk-add:active { transform: scale(.88); }
@media (hover: hover) { .tk-add:hover { opacity: .84; } }
/* 顶栏的笼卡小缩略图：点开看原图。42px 和编辑钮同高，不再横在内容中间占一大块 */
.tk-thumb { flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--card); align-self: center; }
.tk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-thumb:active { transform: scale(.92); }
/* 「选择」文字钮：进批量模式的入口。比圆形图标钮矮一点、素一点，不抢新建的位置 */
.tk-sel { flex: none; height: 34px; padding: 0 15px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--ink);
  font: 700 13.5px/1 var(--f); align-self: center;
  transition: transform .14s var(--e), border-color .15s; }
.tk-sel:active { transform: scale(.94); }
@media (hover: hover) { .tk-sel:hover { border-color: var(--dim2); } }
.tk-sub { margin: 7px 0 0; font-size: 13.5px; font-weight: 600; color: var(--dim); }
.tk-top .tk-top-acts { flex: none; display: flex; gap: 10px; align-items: center; }

/* 搜索：编号/笼号/位置 直接过滤方块；命中的动物在下面摆成可点的条。
   输入时后台轮询停手（tracker.js 里挡着），打出的字不会被重画冲掉。 */
.tk-search { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px;
  padding: 0 4px 0 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--dim); }
.tk-search .icon { flex: none; width: 17px; height: 17px; }
.tk-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 0;
  font: 600 15px/1.2 var(--f); color: var(--ink); outline: none; appearance: none; }
.tk-search input::placeholder { color: var(--dim2); }
.tk-search input::-webkit-search-cancel-button { display: none; }
#tkQClear { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--dim); display: flex; align-items: center; justify-content: center; }
#tkQClear .icon { width: 15px; height: 15px; }
#tkQClear[hidden] { display: none; }
@media (hover: hover) { #tkQClear:hover { background: var(--soft2); color: var(--ink); } }

.tk-hits { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.tk-hits[hidden] { display: none; }
.tk-hit { display: flex; align-items: baseline; gap: 7px; padding: 8px 13px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); text-decoration: none; }
.tk-hit b { font-size: 14px; font-weight: 800; }
.tk-hit small { font-size: 11.5px; font-weight: 600; color: var(--dim); }
@media (hover: hover) { .tk-hit:hover { border-color: var(--blue); } }
.tk-hit:active { transform: scale(.96); }
.tk-hits-more { align-self: center; font-size: 12px; font-weight: 600; color: var(--dim); }

/* 被搜索滤掉的方块直接收起来 */
.tile.q-off { display: none; }

.tk-h2 { margin: 32px 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.tk-empty { margin: 56px 0; text-align: center; font-size: 15px; font-weight: 600;
  line-height: 2; color: var(--dim2); }
.acts-center { display: flex; justify-content: center; margin: -30px 0 48px; }
.tk-more-note { margin: 14px 0 0; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--dim); }
/* 事实格里的链接（动物页「笼位」）：像普通文字，带一点蓝示意能点 */
.fact-link { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--dim2); }
@media (hover: hover) { .fact-link:hover { color: var(--blue); border-bottom-color: var(--blue); } }

/* 方块：笼位与动物都用同一种块 */
/* 方块：左上角是名字，中间是数量，底部一行圆点＝这一笼有几只。
   今天有待办的笼子描一圈蓝边，过期描琥珀边 —— 不用点进去就知道哪一笼该动了。 */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1; padding: 15px 16px 14px; border-radius: 20px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); overflow: hidden;
  transition: transform .14s var(--e), border-color .18s, background .18s; }
.tile:active { transform: scale(.965); }
@media (hover: hover) { .tile:hover { border-color: var(--dim2); background: var(--soft); } }
.tile.due { border-color: var(--blue); }
.tile.late { border-color: var(--amber); }

.tile-head { display: flex; align-items: flex-start; gap: 8px; }
.tile-name { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-flag { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--blue); color: var(--card); font: 800 11.5px/20px var(--f); font-style: normal;
  text-align: center; }
.tile.late .tile-flag { background: var(--amber); }
.tile-mark { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--soft2); color: var(--dim);
  font: 700 10.5px/1.5 var(--f); font-style: normal; }

.tile-mid { display: flex; align-items: baseline; gap: 4px; }
.tile-n { font-size: 40px; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.tile-mid small { font-size: 12.5px; font-weight: 700; color: var(--dim); }

/* 占位圆点：一只一个 */
.pips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 8px; }
.pip { width: 8px; height: 8px; border-radius: 3px; background: var(--blue); opacity: .85; }
.pip.off { background: var(--dim2); opacity: .5; }
.pip-more { font: 700 10.5px/1 var(--f); font-style: normal; color: var(--dim); margin-left: 2px; }

/* 动物块：编号 / 基因型（最多两行） / 最近体重 */
/* 笼位方块上的笼卡缩略图：纯展示的记号，点按还是落在整面链接上 */
.tile-card {
  position: absolute; right: 9px; bottom: 9px; z-index: 1;
  width: 38px; height: 27px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  pointer-events: none;
  box-shadow: var(--matte-sh, 0 1px 2px rgb(0 0 0 / 8%));
}
.tile-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 有卡的一笼：称重那行给缩略图让位，不然字会压到图底下 */
.tile.has-card .tile-weigh { padding-right: 44px; }

/* 笼位卡片：位置在笼号旁形成固定层次，无提醒时保持安静。 */
.cage-tile { aspect-ratio: auto; min-height: 190px; padding: 18px; border-radius: 16px;
  box-shadow: 0 3px 12px rgb(30 55 48 / 3%); border-top: 3px solid #9abdb6; }
.cage-tile .tile-name { font-size: 21px; }
.tile-location { font-size: 12px; color: var(--dim); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin: 5px 0 18px; }
.cage-tile .tile-mid { margin-top: auto; margin-bottom: 18px; }
.cage-tile .tile-n { font-size: 36px; font-weight: 700; }
.cage-tile .pips { border-top: 1px solid var(--line); padding-top: 12px; }
.cage-tile .pip { border-radius: 50%; width: 6px; height: 6px; background: #5b968c; }
.cg-reminder { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--soft); font-size: 13px; color: var(--dim); }
.cg-reminder .btn { font-size: 12px; padding: 8px 12px; }
.pick.weight-options button { padding: 9px 12px; min-height: 40px; }
.tk-search #tkQ { border: 0; box-shadow: none; border-radius: 0; }
.tk-search:focus-within { border-color: var(--blue); }

.tile-a { justify-content: flex-start; }
.tile-a .tile-name { font-size: 21px; }
.tile-sub { flex: 1; min-height: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 7px 0 6px; overflow-wrap: anywhere;
  font-size: 11.5px; font-weight: 700; line-height: 1.45; color: var(--blue-d); }
.tile-foot { flex: none; }
.tile-foot b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.off { opacity: .55; }

/* 待办入口 */
.tk-due-bar { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 17px 18px;
  border-radius: 18px; background: var(--blue-s); color: var(--blue-d); font-weight: 700; font-size: 14px;
  transition: opacity .15s; }
.tk-due-bar b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tk-due-bar span { flex: 1; min-width: 0; }
.tk-due-bar .icon { width: 18px; height: 18px; opacity: .65; }
.tk-due-bar:active { opacity: .8; }
@media (hover: hover) { .tk-due-bar:hover { opacity: .92; } }   /* 整条是个链接，桌面端给一点经过感 */
.tk-due-bar.late { background: var(--amber-s); color: var(--amber-d); }
.tk-due-bar.quiet { background: var(--soft); color: var(--dim); }
.tk-command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.tk-command-grid .tk-due-bar { margin-top: 0; min-height: 76px; }
.tk-movement-card { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 11px 15px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); }
.tk-movement-card > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tk-movement-card b { font-size: 14px; }
.tk-movement-card small { font-size: 11px; color: var(--dim); }
.tk-movement-card > .icon { width: 17px; height: 17px; color: var(--dim); }
.movement-mark { flex: none; width: 46px; height: 48px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border-radius: 14px; background: var(--soft); }
.movement-mark img { width: 36px; height: 25px; object-fit: contain; }
.movement-mark .icon { width: 17px; height: 17px; margin-top: -2px; color: var(--blue-d); }
.movement-hero { display: flex; align-items: center; gap: 17px; margin: 4px 0 24px; }
.movement-hero > div { flex: 1; min-width: 0; }
.movement-hero h1 { margin: 2px 0 3px; font-size: 34px; letter-spacing: -.03em; }
.movement-hero p { margin: 0; font-size: 12.5px; color: var(--dim); }
.movement-logo { flex: none; width: 82px; height: 82px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border-radius: 24px; background: var(--soft); }
.movement-logo img { width: 64px; height: 45px; object-fit: contain; }
.movement-logo .icon { width: 23px; height: 23px; margin-top: -7px; color: var(--blue-d); stroke-width: 2.4; }
.movement-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.movement-stats div { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 14px; background: var(--soft); }
.movement-stats b { font-size: 24px; letter-spacing: -.03em; }
.movement-stats span { font-size: 11.5px; font-weight: 700; color: var(--dim); }
.movement-filters { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 10px; padding: 1px; }
.movement-filters button { flex: none; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--dim); font-size: 12px; font-weight: 700; }
.movement-filters button.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.movement-list { display: grid; }
.movement-row { display: flex; align-items: flex-start; gap: 11px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.movement-kind { flex: none; min-width: 43px; padding: 5px 8px; border-radius: 999px; text-align: center;
  background: var(--blue-s); color: var(--blue-d); font-size: 11px; font-weight: 800; }
.movement-kind.exit { background: var(--amber-s); color: var(--amber-d); }
.movement-kind.transfer { background: var(--soft2); color: var(--dim); }
.movement-body { min-width: 0; flex: 1; display: grid; gap: 4px; }
.movement-body > span { display: flex; justify-content: space-between; gap: 10px; }
.movement-body a { color: var(--ink); font-size: 14px; font-weight: 800; }
.movement-body time { color: var(--dim); font-size: 11px; font-weight: 700; }
.movement-body b { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }
.movement-body b .icon { flex: none; width: 13px; height: 13px; color: var(--dim2); }
.movement-body small { color: var(--dim); font-size: 11.5px; line-height: 1.5; }
.movement-pick { max-height: 250px; overflow-y: auto; padding: 2px; }
.movement-pick button { display: grid; gap: 2px; text-align: left; }
.movement-pick button b { font-size: 13px; }
.movement-pick button small { font-size: 10.5px; color: var(--dim); }

/* 次要动作：朴素文字按钮，不跟主操作抢位置 */
.tk-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
/* 按钮里的图标统一收小一档、跟文字基线对齐 —— 19px 的默认尺寸在按钮里太大 */
.tk-more button, .pickbar button, .acts .btn, .tk-sel { display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; }
.tk-more button .icon, .pickbar button .icon, .acts .btn .icon, .tk-sel .icon,
.cg-main-acts .btn .icon, .tk-fold button .icon { width: 15px; height: 15px; }
.tk-more button { padding: 10px 15px; border-radius: 12px; background: transparent; color: var(--dim);
  border: 1px solid var(--line); font-size: 13.5px; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s, transform .12s var(--e); }
@media (hover: hover) { .tk-more button:hover { background: var(--soft); color: var(--ink); border-color: var(--dim2); } }
.tk-more button:active { background: var(--soft); color: var(--ink); transform: scale(.97); }
.tk-more button.danger { color: var(--red); }

/* 批量操作条吸在底栏上方：选了笼子不用滚回页底才够得着按钮。
   bottom 是底栏（--bar + 下巴）再加一点气隙，桌面端那条浮动底栏也让开了。 */
.tk-more.bulk { position: sticky; z-index: 30;
  bottom: calc(var(--bar) + 34px + env(safe-area-inset-bottom, 0px));
  padding: 9px; margin-top: 18px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgb(0 0 0 / 16%); }
.tk-more.bulk button { background: var(--soft); color: var(--ink); border-color: transparent; }
.tk-more.bulk button:disabled { opacity: .45; }
@media (hover: hover) { .tk-more.bulk button:hover { background: var(--soft2); } }

/* 资料表 */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px 12px; margin: 22px 0 26px; }
.facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; font-weight: 700; color: var(--dim); margin-bottom: 3px; }
.facts dd { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.trace-card { margin: 26px 0; padding: 20px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); box-shadow: 0 8px 30px rgb(22 40 52 / 5%); }
.trace-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trace-head h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.02em; }
.trace-kicker { font-size: 10px; font-weight: 800; letter-spacing: .13em; color: var(--blue-d); }
.trace-intro { margin: 9px 0 16px; color: var(--dim); font-size: 12.5px; line-height: 1.65; }
.trace-list { position: relative; display: grid; }
.trace-list::before { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 1px; background: var(--line); }
.trace-row { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; }
.trace-icon { z-index: 1; flex: none; width: 35px; height: 35px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--soft); color: var(--blue-d); }
.trace-icon .icon { width: 16px; height: 16px; }
.trace-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.trace-main small { font-size: 11px; font-weight: 700; color: var(--dim); }
.trace-main b { font-size: 14px; overflow-wrap: anywhere; }
.trace-main span, .trace-main a { font-size: 12px; color: var(--dim); line-height: 1.5; overflow-wrap: anywhere; }
.trace-main a { color: var(--blue-d); font-weight: 700; justify-self: start; }
.trace-edit { flex: none; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: var(--dim); }
.trace-edit .icon { width: 14px; height: 14px; }
.trace-empty { margin: 20px 0 4px; text-align: center; font-size: 13px; color: var(--dim); }
.event-places { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* 待办列表 */
.tk-due { display: flex; flex-direction: column; }
.tk-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tk-row:last-child { border-bottom: 0; }
.tk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tk-row-main b { font-weight: 700; overflow-wrap: anywhere; }
.tk-row-main small { font-size: 12px; font-weight: 600; color: var(--dim); }
/* 待办正文是到那只动物的链接 —— 看着跟普通行一样，点了就进档案 */
a.tk-row-main { color: var(--ink); text-decoration: none; border-radius: 10px; }
@media (hover: hover) { a.tk-row-main:hover b { color: var(--blue); } }
.tk-when { flex: none; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: var(--soft); color: var(--dim); }
.tk-when.today { background: var(--blue-s); color: var(--blue-d); }
.tk-when.late { background: var(--red-s); color: var(--red); }
.tk-tick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .12s var(--e); }
.tk-tick .icon { width: 16px; height: 16px; }
.tk-tick:active { background: var(--green-s); color: var(--green); transform: scale(.88); }

/* 指标图 */
.tchart { width: 100%; overflow-x: auto; }
.tchart svg { display: block; }
.chart-line, .chart-dot { transform-box: fill-box; transform-origin: center; }
.chart-area { transform-box: view-box; }
.chart-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--dim); background: var(--soft);
  transition: background .15s, color .15s, transform .12s var(--e); }
@media (hover: hover) { .chart-key:hover { background: var(--soft2); color: var(--ink); } }
.chart-key:active { transform: scale(.95); }
.chart-key.on { background: var(--ink); color: var(--bg); }
.chart-swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.chart-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%;
  padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.chart-colors-for { font-size: 12px; font-weight: 800; color: var(--ink); margin-right: 2px; }
.chart-color { display: inline-flex; align-items: center; padding: 4px; border-radius: 8px;
  border: 1.5px solid transparent; transition: border-color .15s; }
/* :focus-visible 和 :hover 分开写 —— 裸 :hover 在触屏上会粘住 */
.chart-color:focus-visible { border-color: var(--line); }
@media (hover: hover) { .chart-color:hover { border-color: var(--line); } }
.chart-color.reset { padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--dim); }
.chart-empty { text-align: center; padding: 40px 10px; font-weight: 600; }
.metric-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 10px; }
.metric-tabs button { padding: 8px 15px; border-radius: 999px; background: var(--soft); color: var(--dim);
  font-size: 13.5px; font-weight: 700; transition: background .15s, color .15s, transform .12s var(--e); }
.metric-tabs button:active { transform: scale(.95); }
@media (hover: hover) { .metric-tabs button:not(.on):hover { background: var(--soft2); color: var(--ink); } }
.metric-tabs button.on { background: var(--ink); color: var(--bg); }

/* 选项式录入 */
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.pick.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.pick button { padding: 10px 15px; border-radius: 11px; background: var(--soft); color: var(--ink);
  font-size: 14px; font-weight: 700; border: 1.5px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s var(--e); }
.pick button:active { transform: scale(.97); }
@media (hover: hover) { .pick button:not(.on):hover { background: var(--soft2); } }
.pick button.on { background: var(--blue-s); border-color: var(--blue); color: var(--blue-d); }
.fieldset { margin: 16px 0; }
.fieldset > label.hint { display: block; font-size: 13px; font-weight: 700; color: var(--dim); margin-bottom: 2px; }
/* 称重行：编号 | 输入框 | 变化量。
   统一改成 grid：polish.css 里同名 .wrow 的 grid 写法特异度更低、一直被这里的
   flex 盖着没生效；这里用同一套列宽，两边说的才是同一种布局。 */
.f.wrow { display: grid; grid-template-columns: minmax(58px, auto) 1fr minmax(96px, auto); align-items: center; gap: 10px; }
.f.wrow span { min-width: 62px; font-weight: 800; }
.f.wrow input { min-width: 0; }

/* 干预方案 */
.scheme-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 18px; }
.scheme-card { text-align: left; padding: 14px 15px; border-radius: 14px; background: var(--soft);
  border: 1.5px solid transparent; color: var(--ink); transition: border-color .15s, background .15s, transform .12s var(--e); }
.scheme-card:active { transform: scale(.98); }
@media (hover: hover) { .scheme-card:not(.on):hover { border-color: var(--dim2); } }
.scheme-card.on { border-color: var(--blue); background: var(--blue-s); }
.scheme-card b { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
.scheme-card small { display: block; font-size: 12px; font-weight: 600; line-height: 1.55; color: var(--dim); }
.scheme-card .sp { margin-top: 4px; color: var(--blue-d); font-weight: 700; }
.step-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.step-row:last-child { border-bottom: 0; }
.step-day { flex: none; font-weight: 800; font-size: 13px; color: var(--blue-d); min-width: 78px; }
.step-main { flex: 1; min-width: 0; }
.step-main b { font-weight: 700; }
.step-main small { display: block; font-size: 12px; font-weight: 600; color: var(--dim); margin-top: 2px; overflow-wrap: anywhere; }
.caution { margin-top: 14px; padding: 12px 15px; border-radius: 12px; background: var(--amber-s);
  color: var(--amber-d); font-size: 13px; font-weight: 600; line-height: 1.7; }
.intervention-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.intervention-head h2 { flex: 1; min-width: 0; margin: 0; }
.scheme-import { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--soft); color: var(--ink);
  font: 700 12px/1 var(--f); }
.scheme-import .icon { width: 17px; height: 17px; }
.scheme-import:active { transform: scale(.96); }
.intervention-source { display: flex; gap: 9px; align-items: baseline; margin: 0 0 14px; padding: 11px 13px;
  border-radius: 12px; background: var(--blue-s); color: var(--blue-d); }
.intervention-source b { flex: none; font-size: 13px; }
.intervention-source span { min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.45; }
.intervention-basics { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(150px, .7fr); gap: 10px; }
.intervention-step-head, .scheme-library-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 19px 0 9px; }
.intervention-step-head > div, .scheme-library-head > div { display: grid; gap: 2px; }
.intervention-step-head b, .scheme-library-head b { font-size: 14px; }
.intervention-step-head small, .scheme-library-head small { font-size: 11.5px; color: var(--dim); }
.intervention-step { display: grid; gap: 8px; margin: 8px 0; padding: 12px 13px 13px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.intervention-step .f { margin: 0; }
.intervention-step-top { display: flex; align-items: center; justify-content: space-between; }
.intervention-step-top span { font-size: 12px; font-weight: 800; color: var(--blue-d); }
.intervention-step-top button { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: var(--dim); }
.intervention-step-top button .icon { width: 14px; height: 14px; }
.intervention-step-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(115px, .55fr); gap: 8px; }
.template-save { display: flex; align-items: center; gap: 10px; margin: 15px 0 2px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.template-save input { width: 18px; height: 18px; flex: none; }
.template-save span { display: grid; gap: 2px; }
.template-save b { font-size: 13px; }
.template-save small { font-size: 11.5px; color: var(--dim); }
.scheme-library[hidden], #mdComposer[hidden] { display: none; }
.scheme-library .scheme-list { max-height: min(58vh, 560px); overflow-y: auto; padding: 2px; }

@media (max-width: 760px) {
  .tk-top h1 { font-size: 28px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
  .tile { padding: 13px 13px 12px; border-radius: 17px; }
  .tile-name { font-size: 17px; }
  .tile-a .tile-name { font-size: 18px; }
  .tile-n { font-size: 34px; }
  .tile-foot b { font-size: 15px; }
  .intervention-basics, .intervention-step-grid, .event-places { grid-template-columns: 1fr; }
  .scheme-import span { display: none; }
  .trace-card { padding: 16px; border-radius: 17px; }
  .tk-command-grid { grid-template-columns: 1fr; }
  .movement-logo { width: 68px; height: 68px; border-radius: 20px; }
  .movement-logo img { width: 54px; height: 39px; }
  .movement-hero h1 { font-size: 28px; }
}

/* 笼卡「这几处没把握」（7.0）
   识别时模型自己点名的字段摆在这里，点一行就去改那一项。
   用琥珀色不用红色 —— 这不是错误，是「看一眼」。红色会让人以为出了故障。 */
.tk-check {
  display: grid; gap: 6px; padding: 11px 13px; margin: 10px 0;
  border: 1px solid var(--amber); border-radius: 12px; background: var(--amber-s);
}
.tk-check-h {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--amber-d);
}
.tk-check-h .icon { width: 16px; height: 16px; }
.tk-check-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; cursor: pointer; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink);
}
.tk-check-row b { flex: none; font-weight: 600; }
.tk-check-row span { flex: 1; min-width: 0; color: var(--dim);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-check-row .icon { flex: none; width: 15px; height: 15px; color: var(--dim2); }
@media (hover: hover) { .tk-check-row:hover { border-color: var(--amber-d); } }
.tk-check-n { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.tk-check-opts { display: flex; flex-wrap: wrap; gap: 6px; }

/* 就地扫码的取景框 */
.scanview { border-radius: 14px; overflow: hidden; background: #0b0d0e; }
.scanview video { display: block; width: 100%; max-height: 46vh; object-fit: cover; }

/* 扫码导入的预览表：.cardtable 是为 99mm 印刷卡排的毫米字号，
   屏幕上得换回 px，不然小得没法看。 */
.cardtable.scanlist { font-size: 13px; margin: 12px 0; }
.cardtable.scanlist th, .cardtable.scanlist td { padding: 6px 10px 6px 0; white-space: normal; }

/* 笼位里的称重 / 干预：两个写着字的按钮，不再是意义不明的「+」 */
.cg-main-acts { display: flex; gap: 10px; margin: 6px 0 12px; }
.cg-main-acts .btn { flex: 1; justify-content: center; font-size: 15px; padding: 11px 14px; }
.cg-main-acts .icon { width: 17px; height: 17px; }

/* 这一笼的待办：干预排出来的给药、换水，勾掉就算做了 */
.cg-todos { display: grid; gap: 6px; margin: 0 0 12px; }
.cg-todo {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card);
}
.cg-todo input { width: 18px; height: 18px; flex: none; }
.cg-todo span { display: grid; gap: 1px; min-width: 0; flex: 1; }
.cg-todo b { font-size: 14px; font-weight: 600; }
.cg-todo small { font-size: 12px; color: var(--dim); }
/* 编号是到那只动物的链接：整行可勾，点编号则进档案 */
.cg-todo a { color: var(--blue); text-decoration: none; font-weight: 700; }
.cg-todo.late a { color: var(--red); }
.cg-todo.today { border-color: var(--amber); }
.cg-todo.late { border-color: var(--red); }
.cg-todo.late small { color: var(--red); }

/* 7.5.4 · 所有动物目录 + 出入登记重排。小字统一抬到 13.5px 以上，
   只在徽标/打印密度必须的位置保留小字号。 */
.tk-command-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-movement-card > span:nth-child(2) span { color: var(--dim); font-size: 13.5px; font-weight: 600; }
.animal-tools { margin: -4px 0 18px; padding: 14px; border: 1px solid var(--line);
  border-radius: 20px; background: var(--card); box-shadow: 0 10px 28px rgb(24 44 56 / 5%); }
.animal-search { margin: 0 0 12px; }
.animal-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wheel-field { display: grid; gap: 5px; min-width: 0; }
.wheel-field > span { font-size: 13.5px; font-weight: 750; color: var(--dim); }
.wheel-field select { width: 100%; min-height: 44px; margin: 0; padding: 9px 32px 9px 12px;
  border: 1px solid var(--line); border-radius: 12px; background-color: var(--soft);
  color: var(--ink); font-size: 14.5px; font-weight: 650; }
.wheel-field select:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-s); outline: none; }
.animal-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.animal-result-head > b { font-size: 15px; }
.animal-active { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.animal-active button { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--soft); color: var(--dim); font-size: 13.5px; font-weight: 700; }
.animal-active button.reset { color: var(--red); }
.animal-list { display: grid; gap: 10px; }
.animal-row { display: grid; grid-template-columns: 64px minmax(118px, 1.15fr) minmax(0, 1.7fr) minmax(86px, auto) 18px;
  align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); color: var(--ink); box-shadow: 0 4px 16px rgb(20 38 48 / 4%);
  transition: transform .15s var(--e), border-color .16s, box-shadow .16s; }
.animal-row > .icon { width: 16px; height: 16px; color: var(--dim2); }
@media (hover: hover) { .animal-row:hover { transform: translate3d(0, -2px, 0); border-color: var(--dim2);
  box-shadow: 0 12px 28px rgb(20 38 48 / 8%); } }
.animal-row:active { transform: scale(.985); }
.animal-avatar { display: grid; place-items: center; width: 62px; height: 50px; border-radius: 15px;
  background: var(--soft); overflow: hidden; }
.animal-avatar .animal-art { width: 54px; height: 40px; margin: 0; }
.animal-primary { min-width: 0; display: grid; gap: 3px; }
.animal-primary b { font-size: 19px; font-weight: 800; letter-spacing: -.018em; overflow-wrap: anywhere; }
.animal-primary span { color: var(--blue-d); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.animal-facts { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.animal-facts span { padding: 5px 10px; border-radius: 999px; background: var(--soft);
  color: var(--dim); font-size: 13.5px; font-weight: 700; }
.animal-facts .animal-status { background: var(--blue-s); color: var(--blue-d); }
.animal-side { display: grid; justify-items: end; gap: 2px; text-align: right; }
.animal-side b { font-size: 17px; letter-spacing: -.02em; }
.animal-side span { color: var(--dim); font-size: 13.5px; font-weight: 700; }
.animal-empty { display: grid; justify-items: center; gap: 8px; margin: 42px 0;
  padding: 34px 20px; border: 1px dashed var(--line); border-radius: 20px;
  background: var(--card); text-align: center; }
.animal-empty b { font-size: 17px; }
.animal-empty span { color: var(--dim); font-size: 14.5px; }

/* 出入登记：先动物、再类型、最后时间地点。选择区原生滚动，不做滚轮劫持。 */
.mv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 4px 0 18px; }
.mv-steps > span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px;
  border-radius: 999px; background: var(--soft); color: var(--dim); font-size: 13.5px; font-weight: 750; }
.mv-steps > span b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--card); color: var(--dim); font-size: 12.5px; }
.mv-steps > span.on { background: var(--blue-s); color: var(--blue-d); }
.mv-steps > span.on b { background: var(--blue); color: #fff; }
.mv-step { margin: 0 0 20px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.mv-step-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.mv-step-head > b { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 14px; }
.mv-step-head div { min-width: 0; display: grid; gap: 2px; }
.mv-step-head strong { font-size: 16px; }
.mv-step-head span { color: var(--dim); font-size: 13.5px; font-weight: 600; }
.mv-search { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--soft); color: var(--dim); }
.mv-search .icon { width: 17px; height: 17px; }
.mv-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 0;
  font-size: 15px; outline: none; }
.mv-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mv-pick-head { display: flex; align-items: center; gap: 8px; margin: 13px 0 8px; }
.mv-pick-head b { font-size: 14.5px; }
.mv-pick-head > span { flex: 1; color: var(--dim); font-size: 13.5px; font-weight: 650; }
.mv-pick-head button { padding: 6px 10px; border-radius: 999px; background: var(--soft);
  color: var(--dim); font-size: 13.5px; font-weight: 750; }
.mv-pick-head button:disabled { opacity: .45; }
.movement-pick { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.movement-pick button { min-height: 58px; align-content: center; }
.movement-pick button span { display: block; margin-top: 3px; color: var(--dim); font-size: 13px;
  font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movement-pick button.on span { color: var(--blue-d); }
.mv-empty { margin: 8px 0 0; color: var(--dim); font-size: 14px; }

/* 可读性兜底：Tracker 不再用 10–12px 的说明小字；数字角标仍可紧凑。 */
#v-tracker small, #v-tracker .tk-sub, #v-tracker .trace-intro, #v-tracker .facts dt,
#v-tracker .trace-kicker, #v-tracker .tile-sub, #v-tracker .tile-location,
#v-tracker .tk-hit small, #v-tracker .tk-hits-more, #v-tracker .movement-body time,
#v-tracker .movement-body b, #v-tracker .movement-kind, #v-tracker .movement-filters button,
#v-tracker .tk-when, #v-tracker .fieldset > label.hint, #v-tracker .intervention-source span,
#v-tracker .intervention-step-top span, #v-tracker .template-save small {
  font-size: 13.5px;
}
#v-tracker .tile-flag, #v-tracker .tile-mark, #v-tracker .pip-more { font-size: 12.5px; }
#v-tracker .trace-main span, #v-tracker .trace-main a, #v-tracker .trace-empty { font-size: 13.5px; }

@media (max-width: 900px) {
  .tk-command-grid.three, .animal-filter-grid { grid-template-columns: 1fr 1fr; }
  .animal-row { grid-template-columns: 58px minmax(0, 1fr) 18px; }
  .animal-facts, .animal-side { grid-column: 2; justify-items: start; text-align: left; }
  .animal-row > .icon { grid-column: 3; grid-row: 1 / span 3; }
}
@media (max-width: 620px) {
  .tk-command-grid.three, .animal-filter-grid, .mv-filter-grid, .mv-steps { grid-template-columns: 1fr; }
  .animal-tools { padding: 12px; border-radius: 17px; }
  .animal-row { padding: 13px; gap: 11px; }
  .animal-avatar { width: 54px; height: 44px; }
  .animal-avatar .animal-art { width: 48px; height: 36px; }
  .animal-primary b { font-size: 17px; }
  .mv-step { padding: 13px; }
}

/* ---------------------------------------------------------------- 9.9 扫码、动物 ID、跨账号转移 */
.scanview { position: relative; }
.scan-frame { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.scan-frame i { width: 62%; aspect-ratio: 1; border-radius: 18px; box-shadow: 0 0 0 999px rgba(9, 11, 22, .35); border: 2px solid rgba(255, 255, 255, .9);
  animation: scanPulse 1.6s ease-in-out infinite; }
@keyframes scanPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.97); } }
.scan-id { display: flex; gap: 8px; margin: 6px 0 2px; }
.scan-id input { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font: inherit; font-size: 14px; color: var(--ink); }
.scan-id .btn .icon { width: 15px; height: 15px; }

.xf-idchip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.xf-idchip .icon { width: 14px; height: 14px; color: var(--dim); }
.xf-idchip code, .xf-gid, .xf-qr code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .03em; }
.xf-qr { display: grid; justify-items: center; gap: 8px; padding: 8px 0; }
.xf-qr img { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; border-radius: 12px; padding: 8px; box-sizing: content-box; }
.xf-qr code { font-size: 15px; font-weight: 700; }

.xf { display: grid; gap: 14px; }
.xf-head { display: grid; gap: 4px; }
.xf-head h1 { margin: 0; }
.xf-from { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--blue-s); color: var(--blue-d); font-size: 13px; }
.xf-from .icon { width: 15px; height: 15px; }
.xf-bar { display: flex; align-items: center; gap: 10px; }
.xf-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.xf-n { margin-left: auto; font-size: 13px; color: var(--dim); }
.xf-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.xf-list li { border-top: 1px solid var(--line); }
.xf-list li:first-child { border-top: 0; }
.xf-list label { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.xf-list input[type="checkbox"], .xf-all input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.xf-list img { flex: none; width: 46px; height: auto; }
.xf-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.xf-main b { font-size: 15px; }
.xf-main b em { font-style: normal; color: var(--dim); font-weight: 600; margin-left: 4px; }
.xf-main small { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-gid { color: var(--dim2); }
.xf-list li.busy { opacity: .6; }
.xf-wait { flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--amber-s); color: var(--amber-d); }
.xf-form { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.xf-form select, .xf-form input { height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: inherit; color: var(--ink); }
.xf-form .btn { justify-self: start; }
.xf-form .btn .icon { width: 15px; height: 15px; }
.xf-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: var(--dim); }
.xf-empty > .icon { width: 30px; height: 30px; }
.xf-ok { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; }
.xf-ok .icon { width: 17px; height: 17px; color: var(--green); }

/* 小鼠从一个笼跳到另一个笼 */
.xf-anim { position: relative; display: grid; grid-template-columns: 88px 1fr 88px; align-items: end; gap: 6px; height: 110px; padding: 6px 4px 0; }
.xf-cage { height: 58px; border-radius: 12px 12px 6px 6px; border: 2px solid var(--line); background: linear-gradient(180deg, transparent 0 55%, var(--soft) 55%);
  display: grid; place-items: end center; padding-bottom: 4px; }
.xf-cage b { font-size: 11px; font-weight: 700; color: var(--dim); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-cage.to { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.xf-track { position: relative; height: 100%; }
.xf-mouse { position: absolute; left: -70px; bottom: 30px; width: 42px; height: auto; opacity: 0; animation: xfHop 1.5s cubic-bezier(.35, .1, .35, 1) forwards; }
@keyframes xfHop {
  0% { opacity: 0; transform: translate(0, 0) scale(.9); }
  10% { opacity: 1; }
  35% { transform: translate(calc(40% + 30px), -46px) rotate(-8deg); }
  70% { transform: translate(calc(80% + 60px), -10px) rotate(6deg); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(100% + 120px), 4px) scale(.85); }
}
.xf-track .xf-mouse { left: 0; }
.xf-track { container-type: inline-size; }
@keyframes xfHop2 { 0% { opacity: 0; transform: translate(-70px, 0) scale(.9); } 12% { opacity: 1; }
  40% { transform: translate(28cqw, -48px) rotate(-8deg); } 72% { transform: translate(62cqw, -8px) rotate(6deg); } 90% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(100cqw + 30px), 4px) scale(.85); } }
@supports (width: 1cqw) { .xf-track .xf-mouse { animation-name: xfHop2; } }

.xf-bar-wrap:empty { display: none; }
.xf-bar-wrap { display: grid; gap: 8px; margin: 0 0 14px; }
.xf-req { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); background: var(--amber-s); }
.xf-req-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--card); color: var(--amber-d); }
.xf-req-ic .icon { width: 19px; height: 19px; }
.xf-req-main { display: grid; gap: 2px; min-width: 0; }
.xf-req-main b { font-size: 14.5px; }
.xf-req-main small { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-req-acts { display: flex; gap: 6px; }
.xf-req-acts .btn .icon { width: 14px; height: 14px; }
.xf-req-anim { grid-column: 1 / -1; }
.xf-req-anim:empty { display: none; }
.xf-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--dim); }
.xf-out > b { color: var(--ink); font-size: 13px; }
.xf-o { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--soft); }
.xf-o em { font-style: normal; font-weight: 700; }
.xf-o.s-accepted em { color: var(--green); }
.xf-o.s-rejected em { color: var(--amber-d); }
@media (max-width: 560px) {
  .xf-req { grid-template-columns: auto minmax(0, 1fr); }
  .xf-req-acts { grid-column: 1 / -1; justify-content: flex-end; }
}
.xf-badge { position: absolute; top: 2px; right: 22%; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #e8505b; color: #fff;
  font-style: normal; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.bar a { position: relative; }
.xf-note { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--amber-s); color: var(--amber-d);
  text-decoration: none; font-size: 14px; font-weight: 600; }
.xf-note .icon { width: 16px; height: 16px; }
.xf-note .icon:last-child { margin-left: auto; }
.fx-reduced .xf-mouse, .fx-reduced .scan-frame i { animation-duration: .01s; }
@media (prefers-reduced-motion: reduce) { .scan-frame i { animation: none; } }

/* ---------------------------------------------------------------- 9.9.1 转移卡片、转移记录、转让 */
.xf-card { position: relative; display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.xf-card.s-pending { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.xf-bar-wrap .xf-card.s-pending { background: color-mix(in srgb, var(--amber-s) 55%, var(--card)); }
.xf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xf-dir { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--dim); letter-spacing: .02em; }
.xf-dir .icon { width: 14px; height: 14px; }
.xf-card.d-in .xf-dir { color: var(--blue); }
.xf-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--dim); }
.xf-pill.s-pending { background: var(--amber-s); color: var(--amber-d); }
.xf-pill.s-accepted { background: var(--green-s); color: var(--green); }
.xf-card-h { margin: 0; font-size: 15.5px; line-height: 1.45; }
.xf-mice { display: flex; align-items: flex-end; gap: 2px; min-height: 28px; }
.xf-mice img { width: 34px; height: auto; margin-right: -6px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08)); }
.xf-mice em { margin-left: 10px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--dim); }
.xf-card-sub { margin: 0; font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-card-note { margin: 0; font-size: 13px; color: var(--ink); }
.xf-steps { display: flex; list-style: none; margin: 2px 0 0; padding: 0; gap: 0; }
.xf-steps li { position: relative; flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; font-size: 12px; color: var(--dim2); }
.xf-steps li i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.xf-steps li em { grid-column: 2; font-style: normal; font-size: 11px; color: var(--dim2); font-variant-numeric: tabular-nums; }
.xf-steps li.on { color: var(--ink); }
.xf-steps li.on i { background: var(--blue); }
.xf-steps.s-accepted li:last-child i { background: var(--green); }
.xf-steps.s-rejected li:last-child i, .xf-steps.s-cancelled li:last-child i { background: var(--dim2); }
.xf-steps li.now i { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-s); animation: cfPulse 1.4s ease-in-out infinite; }
.xf-steps li.now span { color: var(--amber-d); font-weight: 650; }
.xf-card-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.xf-card-acts select { flex: 1 1 160px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; }
.xf-card-acts .btn .icon { width: 14px; height: 14px; }
.xf-card-anim:empty { display: none; }
.xf-card.is-done .xf-card-acts { display: none; }
.xf-line { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.xf-line .icon { width: 16px; height: 16px; color: var(--dim); }
.xf-line span { flex: 1; }
.xf-tabs { display: flex; gap: 6px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: var(--soft); }
.xf-tabs button { flex: 1; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--dim); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.xf-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(9, 11, 22, .08); }
.xf-tabs i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 11px; line-height: 18px; }
.xf-cards { display: grid; gap: 10px; }
.xf-cards .xf-empty p { margin: 0; }
.xf-partners { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.xf-list-sm { max-height: 36vh; overflow: auto; margin: 6px 0 12px; }
.xf-list-sm label { padding: 8px 12px; }
.xf-list-sm img { width: 36px; }
#ofAnim .xf-anim { margin: 6px 0 4px; }
@keyframes cfPulse { 50% { opacity: .5; } }
/* 对话页是一整屏定高的布局：多一条横幅就把输入框挤到底栏下面。那里靠「笼位」上的红点提醒就够了 */
main:has(#v-chat:not([hidden])) #xferNote { display: none; }
.tk-more-btn { font-size: 20px; font-weight: 700; line-height: 1; }

/* ================================================================ 9.9.4 笼位 / 小鼠：每个按钮都写字，一眼看懂 */

/* 顶栏的字按钮：图标 + 两个字的小胶囊（主按钮实心，其余描边），「⋯」是唯一只有图标的 */
.tk-pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: transform .15s, background .15s, border-color .15s; }
.tk-pill .icon { width: 17px; height: 17px; }
.tk-pill.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tk-pill.icon { width: 38px; padding: 0; justify-content: center; }
.tk-pill:active { transform: scale(.94); }
@media (hover: hover) { .tk-pill:not(.primary):hover { border-color: var(--dim2); } }
.tk-top .tk-top-acts { gap: 8px; }

/* 笼位 ⇄ 小鼠：iOS 式分段开关，白色滑块在两格之间滑 */
.seg-ctl { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: -8px 0 16px; padding: 3px; border-radius: 13px; background: var(--soft2); }
.seg-ctl a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 10px;
  color: var(--dim); text-decoration: none; font-size: 15px; font-weight: 650; transition: color .25s; }
.seg-ctl a .icon { width: 17px; height: 17px; }
.seg-ctl a em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--dim2); font-variant-numeric: tabular-nums; }
.seg-ctl a.on { color: var(--ink); }
.seg-ctl a.on em { color: var(--dim); }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 10px; background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .04); transition: transform .32s var(--fx-spring, cubic-bezier(.3, 1.2, .5, 1)); }
.seg-ctl[data-on="animals"] .seg-thumb { transform: translateX(100%); }
[data-theme="dark"] .seg-ctl { background: var(--soft); }
[data-theme="dark"] .seg-thumb { background: var(--soft2); }

/* 动作格：一排等宽按钮，上面圆图标、下面两三个字（照支付宝 / iOS 通讯录卡片） */
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin: 0 0 18px; }
.qa button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 2px 9px; border: 0; border-radius: 16px;
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, background .15s; }
.qa .qa-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--ink); transition: background .2s, color .2s; }
.qa .qa-ic .icon { width: 20px; height: 20px; }
.qa b { font-size: 13px; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qa button.main .qa-ic { background: var(--ink); color: var(--bg); }
.qa button.set .qa-ic { background: var(--blue-s); color: var(--blue); }
.qa button:active { transform: scale(.94); }
@media (hover: hover) { .qa button:hover .qa-ic { background: var(--soft2); } .qa button.main:hover .qa-ic { background: var(--ink); } }

/* ♂ ♀ */
.sx { font-style: normal; font-weight: 700; font-size: .92em; }
.sx-m { color: #2f6fe4; }
.sx-f { color: #d6457a; }
[data-theme="dark"] .sx-m { color: #8db3ff; }
[data-theme="dark"] .sx-f { color: #f08fb1; }

/* 空的时候：一个图标、一句话、一个按钮 */
.tk-zero { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--dim); }
.tk-zero > .icon { width: 34px; height: 34px; color: var(--dim2); margin-bottom: 4px; }
.tk-zero b { font-size: 16px; color: var(--ink); }
.tk-zero span { font-size: 14px; }
.tk-zero .btn { margin-top: 8px; }

/* 小鼠页：筛选胶囊（点开是系统选择器）、卡片 / 列表切换 */
.animal-tools .fchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 4px; padding: 0 16px 2px; }
.animal-tools .fchips::-webkit-scrollbar { display: none; }
.animal-tools .fchip { position: relative; flex: none; align-items: center; gap: 4px; height: 34px; padding: 0 12px 0 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.animal-tools .fchip .icon { width: 14px; height: 14px; color: var(--dim2); }
.animal-tools .fchip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.animal-tools .fchip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.animal-tools .fchip.on .icon { color: var(--bg); opacity: .7; }
.animal-tools .fchip.reset { padding: 0 14px; color: var(--dim); background: none; border-style: dashed; }
.animal-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 12px; }
.animal-result-head b { font-size: 14px; color: var(--dim); font-weight: 650; }
.vt { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--soft2); }
.vt button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  color: var(--dim); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .2s, color .2s; }
.vt button .icon { width: 15px; height: 15px; }
.vt button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
[data-theme="dark"] .vt { background: var(--soft); }
[data-theme="dark"] .vt button.on { background: var(--soft2); }

/* 卡片视图：按笼分组，每只一张 */
.mgroup { margin: 0 0 18px; }
.mgroup h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; font-size: 15px; font-weight: 750; }
.mgroup h3 a { color: var(--ink); text-decoration: none; }
.mgroup h3 small { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mcard { position: relative; display: grid; justify-items: start; gap: 3px; padding: 10px 12px 12px; border-radius: 18px; background: var(--card);
  color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform .18s, box-shadow .18s; }
.mcard-art { justify-self: center; width: 100%; display: grid; place-items: center; height: 74px; margin-bottom: 4px; border-radius: 12px; background: var(--soft); }
.mcard-art .animal-art { width: 84px; height: 63px; }
.mcard-art img { width: 84px; height: 63px; object-fit: contain; }
.mcard-name { display: flex; align-items: baseline; gap: 6px; max-width: 100%; }
.mcard-name b { font-size: 16px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-geno { max-width: 100%; padding: 1px 8px; border-radius: 999px; background: var(--blue-s); color: var(--blue-d); font-size: 12px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard small { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.mcard-off { font-size: 12px; font-weight: 650; color: var(--dim); }
.mcard.off { opacity: .55; }
.mcard:active { transform: scale(.97); }
@media (hover: hover) { .mcard:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(0, 0, 0, .07); } }
@media (min-width: 761px) { .mgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.animal-row.off { opacity: .6; }
/* 卡片视图本身就是一张张卡，外面不再套一层框 */
#animalResults.is-grid { border: 0; background: none; padding: 0; box-shadow: none; overflow: visible; }
/* 深色模式：黑鼠放在深底上看不见 —— 给图垫一块浅色「相纸」（和标志一样不跟主题翻转） */
[data-theme="dark"] .mcard-art { background: linear-gradient(180deg, #eef0f4, #dfe3e9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mcard-art { background: linear-gradient(180deg, #eef0f4, #dfe3e9); } }