:root {
  --bg: #f3f4f6;
  --card: #ffffff;
  --ink: #1f2430;
  --muted: #8a909c;
  --line: #e6e8ec;
  --brand: #2f6df0;
  --brand-ink: #ffffff;
  --danger: #e5484d;
  --ok: #16a34a;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, sans-serif;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.app-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

.tabbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.tab {
  flex: 1;
  border: none;
  background: none;
  padding: 13px 0;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  font-family: inherit;
}
.tab.active {
  color: var(--brand);
  font-weight: 600;
}
.tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand);
}

.content {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 14px 40px;
}
/* 整页编辑（如修改分类）：放开宽度限制，分类树可用整页宽度 */
.content.wide { max-width: none; }
/* 分类树居中显示；内容超宽时退化为靠左可横向滚动（safe center 不裁剪左侧） */
.content.wide .mindmap { display: flex; justify-content: safe center; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.card-title {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 15px;
}

/* ---- 表单 ---- */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.field-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.inp {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  outline: none;
}
.inp:focus { border-color: var(--brand); }
.inp.inp-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.12);
}
textarea.area { resize: vertical; min-height: 64px; }
select.inp { appearance: none; background-image: none; }

.field-body { /* 包住输入+提示，便于右对齐表单横向布局 */ }

/* 右对齐标签表单：标签 | 输入。用列间距统一拉开各行（含分类/名字/功能说明） */
.form-right { display: flex; flex-direction: column; gap: 18px; }
.form-right .field { display: flex; gap: 12px; align-items: flex-start; }
.form-right .field-label {
  width: 4.5em;
  min-width: 4.5em;
  text-align: right;
  margin-bottom: 0;
  padding-top: 11px;
  line-height: 1.2;
}
.form-right .field-body { flex: 1; min-width: 0; }

/* 添加物品页顶部：搜索已有物品 */
.add-search { margin-bottom: 14px; }
.search-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* 搜索结果浮层：盖在下方内容之上，避免把下面的分区顶开导致跳动 */
.search-box { position: relative; }
.search-box > .search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin-top: 0;
  z-index: 20;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.search-box > .search-results:empty { display: none; }
/* 弹窗内：搜索结果不做浮层，正常排版让弹窗按内容自适应高度并整体滚动 */
.modal .search-box > .search-results {
  position: static;
  box-shadow: none;
  border: none;
  border-radius: 0;
  max-height: none;
  padding: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
}
.search-item:hover { border-color: var(--brand); }
.search-item-name { font-weight: 600; font-size: 14px; }
.search-item-path { font-size: 12px; color: var(--muted); margin-top: 2px; }
.search-item-note { font-size: 12px; color: var(--muted); margin-top: 3px; }
.search-item.disabled { opacity: 0.55; cursor: default; }
.search-item.disabled:hover { border-color: var(--line); }
.search-empty { color: var(--muted); font-size: 13px; padding: 8px 2px; }

/* 级联分类：一行内横向排列（类似选地址） */
.cat-cascade { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.cat-cascade .cat-sel { flex: 1 1 84px; min-width: 0; padding-left: 8px; padding-right: 8px; }
.cat-cascade .cat-sel-wrap { position: relative; flex: 1 1 84px; min-width: 0; display: flex; }
.cat-sel-wrap .cat-sel { flex: 1; }
.cat-clear {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #c3c7cf;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
.cat-clear:hover { background: #aab0ba; }
.cat-add {
  flex: 0 0 auto;
  align-self: stretch;
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}
.cat-nochild { align-self: center; color: var(--muted); font-size: 13px; padding: 0 6px; }

.inline {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inline .inp { flex: 1; min-width: 0; }

.locked-box {
  background: #f6f7f9;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-all;
}

.rec-link {
  color: var(--brand, #4a6cf7);
  text-decoration: underline;
}

.avg-tag {
  white-space: nowrap;
  font-size: 12px;
  color: var(--brand);
  background: #eaf1ff;
  padding: 6px 10px;
  border-radius: 8px;
}

.photo-box {
  width: 100%;
  min-height: 120px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: #fafbfc;
}
.photo-preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
}
.photo-empty {
  color: var(--muted);
  padding: 24px;
}

/* 多图：可编辑网格（添加/删除/拖动） + 只读画廊 */
.photo-grid, .photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.photo-cell {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: grab;
  background: #fafbfc;
}
.photo-cell.dragging { opacity: 0.5; }
.photo-cell.drop-target { outline: 2px solid var(--brand); outline-offset: -2px; }
.photo-cell .photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.photo-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
}
.photo-add {
  width: 84px;
  height: 84px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  background: #fafbfc;
  font-size: 12px;
  padding: 4px;
}
/* 只读画廊的缩略图（无删除/拖动） */
.photo-gallery .photo-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}

/* 收入：多个使用物品行（物品 / 获取日期 / 数量 同一行）*/
.sale-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sale-item-row { display: flex; gap: 8px; align-items: center; }
.sale-item-fields { flex: 1; min-width: 0; display: flex; gap: 6px; }
.si-item-wrap {
  position: relative;
  flex: 0 0 160px;
  width: 160px;
  min-width: 160px;
}
.si-item-wrap .si-item {
  width: 100%;
  color: transparent;
}
.si-item-wrap .si-item:focus {
  color: transparent;
}
.si-item-wrap .si-item option {
  color: var(--ink);
}
.si-item-display {
  position: absolute;
  left: 13px;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  color: var(--ink);
}
.si-item-display.placeholder { color: var(--muted); }
.si-date { flex: 1.4; min-width: 0; }
.si-qty { flex: 0 0 56px; width: 56px; min-width: 0; }
.stock-warning {
  display: none;
  margin: -2px 0 8px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.35;
}

/* 收支页顶部两个添加按钮 */
.entry-addbar { display: flex; gap: 10px; margin-bottom: 14px; }
.entry-addbar .btn { flex: 1; }

/* 收入页汇总条 + 添加按钮 */
.income-summary { display: flex; gap: 12px; align-items: center; }
.income-search { margin-bottom: 12px; }
.income-addbar { margin-bottom: 14px; }
.income-list-head { margin-bottom: 8px; }
.income-list-title {
  font-weight: 600;
  margin-right: 6px;
}

/* 收入表单：费用方式 + 品牌/费用/单号尽量放在同一行 */
.fee-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.fee-method {
  flex: 0 0 120px;
  width: auto;
}
.fee-extra {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
}
.fee-extra .inp {
  min-width: 0;
  width: auto;
}
.fe-brand { flex: 1.1; }
.fe-cost { flex: 0.8; }
.fe-no { flex: 1.1; }

/* 保存修改前的「修改前 → 修改后」对比表 */
.diff-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 4px;
}
.diff-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.diff-label {
  flex: 0 0 5em;
  font-size: 15px;
  color: var(--muted);
}
.diff-vals { flex: 1; min-width: 0; font-size: 16px; }
.diff-before { color: var(--muted); word-break: break-all; }
.diff-arrow { margin: 0 6px; color: var(--muted); }
.diff-after { color: var(--ink); font-weight: 600; word-break: break-all; }

.lower-block.disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* 数量 / 单价 / 邮费：一行三列；每列为「标签左 + 输入框右」 */
.form-right .field.tri-row { display: block; }
.tri-grid { display: flex; gap: 10px; }
.tri-cell { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.tri-label {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 0;
  white-space: nowrap;
}
.tri-cell .inp { flex: 1; min-width: 0; width: auto; }
.tri-cell.disabled { opacity: 0.45; pointer-events: none; }

/* ---- 按钮 ---- */
.btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
.btn.small { padding: 9px 12px; font-size: 13px; white-space: nowrap; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn.ghost { background: #fff; color: var(--muted); }
.btn.block { width: 100%; margin-top: 8px; }
.btn-col { display: flex; flex-direction: column; gap: 10px; }
.row-end { display: flex; justify-content: flex-end; gap: 10px; }
.settings-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.settings-switch input {
  width: 20px;
  height: 20px;
}
.settings-cat-edit { margin-top: 10px; }

.icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--muted);
}
.icon-btn.danger { color: var(--danger); }
.icon-btn:hover { background: #f1f2f4; }

/* ---- 仓库：分类树 ---- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin: 2px 2px 12px;
}
.crumb-link { color: var(--brand); cursor: pointer; }
.crumb-cur { color: var(--ink); font-weight: 600; }
.crumb-sep { color: var(--muted); }

.cat-list { display: flex; flex-direction: column; gap: 10px; }
.cat-row[draggable="true"], .item-card[draggable="true"], .item-wrap[draggable="true"] { cursor: grab; }
.dragging { opacity: 0.4; }
/* 拖动排序：被拖项抬起的样式（跟随指针，其它项平滑让位） */
.drag-active {
  cursor: grabbing;
  position: relative;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  background: var(--card);
  opacity: 0.98;
}
.cat-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cat-row-main { flex: 1; min-width: 0; padding: 13px 14px; cursor: pointer; }
.cat-row-name {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.cat-row-name .chev {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  font-size: 28px;
  line-height: 1;
}
.cat-row-path { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cat-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--muted);
}
.cat-row-actions {
  display: flex;
  align-items: center;
  padding-right: 6px;
  border-left: 1px solid var(--line);
}

/* 仓库分页行（物品 / 分类）+ 右侧添加 */
.wh-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.seg { display: inline-flex; background: #eceef1; border-radius: 10px; padding: 3px; }
.seg-btn {
  border: none;
  background: none;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.seg-btn.active {
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.seg-btn { padding: 7px 12px; white-space: nowrap; }

/* 全部分类预览：思维导图（从左到右的树） */
.mindmap { overflow-x: auto; padding: 6px 2px; }
.mm-root { margin-bottom: 18px; }
.mm-root:last-child { margin-bottom: 0; }
.mm-branch { display: flex; align-items: center; }
.mm-node {
  flex: 0 0 auto;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 11px;
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.mm-name { font-weight: 600; font-size: 13px; }
.mm-stat { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* 物品节点（挂在分类下）：区别于分类节点；可点击加入/移出「物品」显示列表 */
.mm-node.mm-item { background: #f7f9ff; border-color: #d8e2ff; cursor: pointer; }
.mm-node.mm-item .mm-name { font-weight: 500; color: var(--brand); }
/* 可点击的节点（预览里点击加入/移出显示列表）；已显示=实心蓝色背景，醒目 */
.mm-node.mm-clickable { cursor: pointer; }
.mm-node.shown { background: var(--brand); border-color: var(--brand); }
.mm-node.shown .mm-name { color: #fff; }
.mm-node.shown .mm-stat { color: rgba(255, 255, 255, 0.85); }
.mm-node.focused { outline: 2px solid #0b82ff; outline-offset: 3px; }
.mm-kids { display: flex; flex-direction: column; margin-left: 26px; }
/* 父节点 → 主干（横向短线） */
.mm-node.has-kids::after { content: ''; position: absolute; right: -13px; top: 50%; width: 13px; border-top: 2px solid var(--line); }
/* 每个子节点：自己画一段竖线(::before) + 一段横线到节点(::after)，避免主干出头 */
.mm-kids > .mm-branch { position: relative; padding: 6px 0; }
.mm-kids > .mm-branch::before { content: ''; position: absolute; left: -13px; top: 0; bottom: 0; border-left: 2px solid var(--line); }
.mm-kids > .mm-branch:first-child::before { top: 50%; }
.mm-kids > .mm-branch:last-child::before { bottom: 50%; }
.mm-kids > .mm-branch:only-child::before { display: none; }
.mm-kids > .mm-branch::after { content: ''; position: absolute; left: -13px; top: 50%; width: 13px; border-top: 2px solid var(--line); }

/* 修改分类：树形编辑器 */
.pick-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.pick-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}
.pick-item:hover { border-color: var(--brand); }
/* 选择大类：pill 平铺 */
.pick-pills { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.pick-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
}
.pick-pill:hover { border-color: var(--brand); color: var(--brand); }
.pick-pill.active { background: rgba(47, 109, 240, 0.1); border-color: var(--brand); color: var(--brand); }

/* 表单里的「输入框 + 候选 pill」单选控件：未选中文字灰色，选中浅蓝淡显 */
.field-pills { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.field-pills .pick-pill { color: var(--muted); border-radius: 10px; }
.field-pills .pick-pill:hover { color: var(--brand); }
.field-pills .pick-pill.active { background: rgba(47, 109, 240, 0.1); color: var(--brand); }
.tree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.mm-node.mm-edit { display: flex; align-items: center; gap: 8px; cursor: grab; }
.mm-edit .mm-ops { display: flex; gap: 0; }
.mm-edit .mm-ops .icon-btn { padding: 2px 5px; font-size: 13px; }
.mm-node.dragging { opacity: 0.4; }
.mm-node.drop-target { outline: 2px dashed var(--brand); outline-offset: 2px; background: var(--brand-weak, #eef2ff); }
/* 悬浮在分类上时显示该分类下的物品 */
.cat-tip {
  position: fixed;
  z-index: 1000;
  display: none;
  max-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-size: 12px;
  pointer-events: none;
}
/* 显示分类树形图时：放开尺寸，让思维导图完整展示 */
.cat-tip.tree { max-width: none; max-height: none; overflow: visible; padding: 8px; }
.cat-tip.tree .mindmap { overflow: visible; padding: 0; }
.cat-tip-title { font-weight: 600; margin-bottom: 4px; }
.cat-tip-item { padding: 2px 0; color: var(--ink); }
.cat-tip-item + .cat-tip-item { border-top: 1px solid var(--line); }
.cat-tip-item-name { color: var(--ink); }
.cat-tip-item-stat { color: var(--muted); font-size: 11px; margin-top: 1px; }
.cat-tip-empty, .cat-tip-more { color: var(--muted); }
.cat-tip-more { margin-top: 3px; }
.cat-edit-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* 整页子页面（如修改分类）：顶部返回栏 */
.subpage-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.subpage-head .card-title { margin: 0; }
.subpage-head .head-cat { margin-left: auto; color: var(--muted); }
.subpage-head .head-cat:empty { display: none; }
.search-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* 全部物品页：日期/价格/分类（横排）+ 总价格 汇总区 */
.summary { margin-bottom: 12px; }
.summary-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.summary-total { margin-left: auto; font-weight: 600; font-size: 14px; }

/* 多选分类的已选 chip */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eaf1ff;
  color: var(--brand);
  border-radius: 8px;
  padding: 4px 4px 4px 9px;
  font-size: 12px;
}
.chip-x { border: none; background: none; color: var(--brand); cursor: pointer; font-size: 12px; padding: 0 2px; }
/* 与「预览全部」按钮(.btn.small)视觉统一 */
.date-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.date-btn:hover { border-color: var(--brand); }

/* ---- 仓库列表 ---- */
.toolbar { margin-bottom: 12px; }
.cat-head {
  font-size: 13px;
  color: var(--muted);
  margin: 16px 4px 8px;
  font-weight: 600;
}
.item-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef0f3;
}
.thumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}
.item-info { flex: 1; min-width: 0; }
.item-name { font-weight: 600; margin-bottom: 2px; }
.item-desc {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--ink);
}
.pill {
  background: #eaf6ee;
  color: var(--ok);
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 12px;
}
.pill.zero { background: #f1f2f4; color: var(--muted); }
.chevron { color: var(--muted); font-size: 32px; line-height: 1; flex-shrink: 0; padding: 0 6px; transition: transform 0.15s; }
.item-card .chevron { margin-right: 2px; }
.item-card.expanded .chevron {
  margin-right: 2px;
  transform: rotate(90deg);
}
.item-remove-x {
  display: none;
  position: absolute;
  top: -7px;
  right: -7px;
  width: 19px;
  height: 19px;
  border: 1px solid #ffd5d8;
  border-radius: 999px;
  background: #fff;
  color: var(--danger);
  font-size: 14px;
  line-height: 15px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
}
.item-card.expanded .item-remove-x { display: block; }
.search-display-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* 物品卡片下展开的获取记录面板：展开时卡片+下拉合成一个深色边框整体 */
.item-wrap { margin-bottom: 10px; }
.item-wrap > .item-card { margin-bottom: 0; }
.item-records {
  display: none;
  background: #fafbfc;
  border: 1px solid #b6bcc6;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 4px 12px;
}
.item-records.open { display: block; }
.item-records .rec-row:last-child { border-bottom: none; }
.item-records .rec-row.rec-click { cursor: pointer; border-radius: 8px; }
.item-records .rec-row.rec-click:hover { background: #eef2f9; }
.item-card.expanded {
  box-shadow: none;
  border: 1px solid #b6bcc6;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ---- 明细 ---- */
.detail-cat { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.detail-head { display: flex; gap: 12px; margin-bottom: 12px; }
.detail-photo {
  width: 80px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.rec-list { border-top: 1px solid var(--line); }
.rec-row {
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.rec-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  background: #f1f2f4;
  color: var(--ink);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 12px;
  white-space: nowrap;
}
.tag.total { background: #eaf1ff; color: var(--brand); font-weight: 600; }
.tag-delete {
  border: 0;
  color: var(--danger);
  cursor: pointer;
  font: inherit;
}
.tag-delete:hover { background: #fff1f2; }

/* 物品修改弹窗内的分区 */
.edit-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.edit-block:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---- 管理行 ---- */
.manage-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.manage-name { font-size: 15px; }

/* 渠道管理：pill 标签列表 */
.chan-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chan-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eaf1ff;
  color: var(--brand);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
}
.chan-pill-name { font-weight: 600; cursor: pointer; }
.chan-pill-btn { border: none; background: none; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 1px; color: var(--brand); }
.chan-pill-btn.danger { color: var(--danger); }
.chan-pill.default { background: #f1f2f4; color: var(--muted); font-weight: 600; cursor: default; }
.chan-pill.add { cursor: pointer; background: #fff; border: 1px dashed var(--brand); }

/* ---- 通用 ---- */
.muted { color: var(--muted); font-size: 13px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.loading { text-align: center; color: var(--muted); padding: 40px 0; }
.about { text-align: center; color: var(--muted); font-size: 12px; margin-top: 20px; }

/* ---- toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(31, 36, 48, 0.94);
  color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  transition: all 0.25s;
  z-index: 100;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- 弹窗 ---- */
/* 顶部对齐：弹窗内容增减时位置固定，输入时下方冒出结果不会让输入框跳动 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 50;
  padding: 4vh 10px;
  overflow-y: auto;
}
.modal {
  background: var(--card);
  width: 100%;
  max-width: 640px;
  border-radius: 16px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.2s ease;
}
/* 含思维导图的弹窗（预览全部物品/分类、限制分类）：按内容弹性伸缩，封顶后横向滚动 */
.modal:has(.mindmap) {
  width: fit-content;
  max-width: min(1100px, 94vw);
  min-width: min(420px, 94vw);
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 16px; flex-shrink: 0; }
.modal-head-cat {
  margin-left: auto;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 标题栏右上角的操作按钮（如限定分类的「所有分类/确定」） */
.modal-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.modal-body { padding: 16px; overflow-y: auto; }
.confirm-msg { margin: 0 0 16px; line-height: 1.5; }