/* 地块库工作台 · 样式（从 insurance.html 抽出，2026-10-25 P2 拆分）
   改动请改这个文件；部署时 build-dist.js 会自动加 ?v=版本号 防缓存。 */

/* ═══ 与后台一致的莫兰迪绿主题 ═══ */
:root {
  --primary: #75855f;
  --primary-hover: #5d6c4a;
  --primary-soft: rgba(117,133,95,0.14);
  --primary-rgb: 117,133,95;
  --ok: #6b7d5e;
  --ok-soft: rgba(107,125,94,0.16);
  --bad: #a5605a;
  --bad-soft: rgba(165,96,90,0.14);
  --warn: #a5804f;
  --charcoal: #4a453f;
  --stone: #6f665c;
  --muted: #8d8479;
  --surface: rgba(255,255,255,0.74);
  --border: rgba(122,110,98,0.16);
  --border-soft: rgba(122,110,98,0.09);
  --shadow-md: 0 2px 10px rgba(96,85,74,0.07);
  --shadow-lg: 0 10px 32px rgba(96,85,74,0.11);
  --radius: 14px;
  --font-sans: 'Fira Sans','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font-mono: 'Fira Code','SF Mono',Consolas,monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background:
    radial-gradient(1100px 760px at 6% 2%,  #eeebe5 0%, rgba(238,235,229,0) 58%),
    radial-gradient(980px 700px at 98% 6%,  #decac3 0%, rgba(222,202,195,0) 54%),
    radial-gradient(1050px 760px at 4% 98%, #cdd0c3 0%, rgba(205,208,195,0) 56%),
    linear-gradient(162deg, #ece8e3 0%, #e4dfd8 46%, #dbddd4 100%);
  background-attachment: fixed;
  overflow: hidden;
  font-size: 13px;
}

/* ── 备案条（2026-11-05）──
   🔴 默认 display:none：huadikuai.cc 和 dikuaiku.cn 是两个备案主体，
     不能在任何一边都挂同一串号。body.has-beian 由 JS 按 hostname 加。
   🔴 高度要从 .workspace 的 100vh 里扣掉，否则 footer 会被 body 的 overflow:hidden 裁掉。 */
.beianbar { display: none; }

body.has-beian .beianbar {
  /* 🔴 必须 fixed + z-index 高于门禁（99998）：
     未登录时整屏是门禁遮罩，用普通文档流的话备案条会被压在最底下、根本看不见 ——
     而工信部检查访问首页时就要能看到备案号。fixed 只占底部 24px，不遮挡门禁卡片。
     .workspace 已经用 calc(100vh - 56px - 24px) 把这块让出来了，不会盖住表格。 */
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  height: 24px;
  font-size: 11px; line-height: 1; color: var(--stone);
  background: rgba(255,255,255,0.92);
  border-top: 1px solid var(--border-soft);
  backdrop-filter: blur(6px);
}
body.has-beian .workspace { height: calc(100vh - 56px - 24px); }
.beianbar a { color: inherit; text-decoration: none; }
.beianbar a:hover { color: var(--primary); text-decoration: underline; }

/* ── 顶栏 ── */
.topbar {
  height: 56px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(22px) saturate(118%);
  border-bottom: 1px solid var(--border-soft);
  /* 🔴 backdrop-filter 会创建**堆叠上下文** —— 顶栏里的下拉/浮层（上传菜单、云端批次）
     的 z-index 只在 topbar 内部生效，整个 topbar 会被后面的 .workspace 盖住 ⇒
     浮层看不见（表现：点「云端批次」弹出后立刻被右侧确权卡片遮住）。
     把 topbar 自己提到最上层，它内部所有浮层就跟着浮起来了。 */
  position: relative; z-index: 300;
}
.brand { font-size: 15px; font-weight: 700; letter-spacing: .2px; display: flex; align-items: baseline; min-width: 0; }
/* 副标题现在显示"镇 · 村"，村名可能很长 —— 限宽省略，别把顶栏按钮挤走 */
.brand small {
  font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 8px;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.66); color: var(--stone);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
  white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,0.92); border-color: var(--primary); color: var(--primary); }
.btn--primary {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb),0.22);
}
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--sm { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
/* 危险操作（清空数据）：平时低调，悬停才显红，避免误点 */
.btn--danger { color: var(--bad); border-color: rgba(165,96,90,0.42); }
.btn--danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ── 统计条 ── */
.stats { display: flex; gap: 8px; }
.stat {
  padding: 5px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.6); border: 1px solid var(--border-soft);
  font-size: 12px; color: var(--stone); line-height: 1.3;
}
.stat b { display: block; font-size: 15px; font-family: var(--font-mono); color: var(--charcoal); font-weight: 700; }
.stat--ok b { color: var(--ok); }
.stat--bad b { color: var(--bad); }

/* ── 汇总核对条（投保总量 vs 确权总量，用于分辨"口径问题"还是"关联问题"） ── */
.sum {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  padding: 8px 12px 9px; border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.26);
}
.sum__cell {
  padding: 5px 9px; border-radius: 8px; min-width: 0;
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--border-soft);
  font-size: 11px; color: var(--muted); line-height: 1.35;
}
.sum__cell b {
  display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sum__cell--ok b { color: var(--ok); }
.sum__cell--bad b { color: var(--bad); }
/* ── 左栏纯白（INSURANCE_LIST_WHITE_20261023）──
   改因：左栏原来是半透明毛玻璃 + backdrop-filter，黄/红状态底色叠在上面会"浑"，
   一眼看不出谁够谁不够。白底 + 不透明淡色，颜色才立得住。 */
.pane--list {
  background: #ffffff;
  backdrop-filter: none;
  border-color: #e8e4de;
}
.pane--list .pane__head { background: #ffffff; }
.pane--list thead th { background: #fbfaf8; }

/* ── 三栏工作区 ── */
.workspace {
  height: calc(100vh - 56px);
  display: grid;
  /* 左栏 360→440：投保清单现在有 7 列（投保人/被保险人/身份证/投保面积/确权面积/地块数/状态），
     360px 会把每列压到 50px 以内全看不清 */
  /* 左栏 450→520：差额并进状态后是 5 列，要给投保人/身份证留够宽度；
     右栏 560→420：属性表默认只留 3 列，用不了那么宽，让给地图 */
  /* 左栏 520 → 484 → 466：差额列、投保人列先后收窄，列宽预算 452 → 388，
     省下的宽度不留给左表 —— 全部让给中间地图（地图是主工作区）。 */
  /* 左右栏宽度改成变量：收起态只改变量，不用为「两档响应式 × 两种收起」写 8 条重复规则 */
  --w-list: 466px;
  --w-attr: 420px;
  grid-template-columns: var(--w-list) minmax(300px, 1fr) var(--w-attr);
  gap: 10px;
  padding: 10px;
}
/* 这份页面现在内嵌在主站侧边栏「地块库」里（iframe），可视宽度会比单独打开少约 300px。
   下面几档按 **iframe 自身视口** 算（媒体查询量的是 iframe 宽度），
   保证中间地图不被压到 300px 以下，同时左表不破 452px 的列宽预算。
   单独打开 /insurance.html 时同样生效，只是大屏下不会触发。 */
@media (max-width: 1300px) {
  .workspace { --w-list: 418px; --w-attr: 340px; }
}
@media (max-width: 1140px) {
  .workspace { --w-list: 386px; --w-attr: 300px; }
  /* 与上面的列宽预算保持一致（70+126+62+62+68=388）。
     🔴 这里原来还有一条 th:nth-child(1){width:80px} 的窄屏覆盖 ——
        基础值已经降到 70，再留着 80 会在窄屏把投保人列**加宽**，故删掉。 */
  #listBody table { min-width: 388px; }
}
.pane {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(118%);
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pane__head {
  display: flex; align-items: center; gap: 8px;
  /* 标题栏元素多（标题 / 计数 / 搜索框 / 3 个按钮），必须禁止压缩换行，
     否则窄栏下会挤成"投保清 / 单"这样两行 */
  flex-wrap: nowrap; min-width: 0;
  padding: 10px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.34);
}
.pane__title { font-size: 13px; font-weight: 600; flex: none; white-space: nowrap; }
.pane__meta { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); flex: none; white-space: nowrap; }
.pane__head .spacer { flex: 1; }
.pane__body { flex: 1; overflow: auto; min-height: 0; position: relative; }
#map { position: absolute; inset: 0; }

/* ── 表格 ── */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* 列多的表格给个最小宽度，超出时横向滚动，别把内容压成省略号 */
/* 5 列：投保人 / 身份证号 / 投保面积 / 确权面积 / 差额（状态直接由颜色表达） */
/* 列宽预算（合计 388）：
   - 差额列原 110 太宽（内容最长只有 "+37.53" / "未匹配"），白占四分之一宽度；
   - 投保人原 88 也富余（姓名字号 12.5px，4 个字约 50px，70-16 内边距还剩 54px 刚好）；
   table 是 width:100%，多余空间会按列宽比例再分配，所以改这里 = 改实际显示占比。 */
#listBody table { min-width: 388px; table-layout: fixed; }
#listBody thead th:nth-child(1) { width: 70px; }    /* 投保人（4 个字；更长的走 title） */
#listBody thead th:nth-child(2) { width: 126px; }   /* 身份证号（18 位，最宽的硬需求） */
#listBody thead th:nth-child(3) { width: 62px; }    /* 投保面积 */
#listBody thead th:nth-child(4) { width: 62px; }    /* 确权面积 */
#listBody thead th:nth-child(5) { width: 68px; }    /* 差额（+37.53 / 未匹配 / 无面积） */
/* 差额列兼状态：黄=确权够（显示多出来多少亩）/ 红=不足（显示差多少亩）/ 灰=未匹配
   为什么用黄不用绿：中间的影像底图是绿油油的农田，绿色高亮/绿色数字在上面根本不显眼。 */
#listBody td.st { font-weight: 700; font-size: 12px; }
/* 差额格：比整行再深一档，数字最跳 */
#listBody tbody tr.row--ok td.st--ok { color: #7a5200; background: #ffe08a; }
#listBody tbody tr.row--bad td.st--bad { color: #9c2f26; background: #ffc9c2; }
#listBody td.st--ok { color: #7a5200; background: #ffe08a; }
#listBody td.st--bad { color: #9c2f26; background: #ffc9c2; }
#listBody td.st--na { color: rgba(122, 110, 98, 0.5); font-weight: 500; font-size: 11.5px; background: none; }

/* 整行铺色：原来只有最后一格有色，得盯着才看得见；铺满整行扫一眼就是色块 */
#listBody tbody tr.row--ok   td { background: #fff6d9; }
#listBody tbody tr.row--bad  td { background: #ffe9e6; }
#listBody tbody tr.row--none td { background: #fafaf8; }
/* 悬停：在其行色上再压深一点（不能回落到全局的 primary 淡色，会把状态色盖掉） */
#listBody tbody tr.row--ok:hover   td { background: #fdeec4; }
#listBody tbody tr.row--bad:hover  td { background: #ffdcd7; }
#listBody tbody tr.row--none:hover td { background: #f1f0ed; }
/* 悬停时差额格保持最深 */
#listBody tbody tr.row--ok:hover  td.st--ok  { background: #ffd977; }
#listBody tbody tr.row--bad:hover td.st--bad { background: #ffbcb4; }
/* 左表全部居中：原来投保人/身份证左对齐、数字右对齐，混排看着乱 */
#listBody thead th, #listBody tbody td { text-align: center; }
#listBody td.num, #listBody th.num { text-align: center; }
/* 注：选中行的底色统一由下面 listRowFlash 那段控制（实色亮绿 #c3ea9d），
   所以黄/红状态格在选中时会一起变成亮绿 —— 这是刻意的，
   一行里只保留一种底色，才不会"黄底透绿"看不清。 */
/* 左表被地图点选联动高亮 —— 亮绿实色块（第一版用主色 34% 半透明，叠白底发灰，用户否掉了）。
   样式：实色亮绿底 + 四边等宽 2px 深绿外框 + 一次入场闪动。
   左右两栏（投保清单 / 确权属性）用完全相同的一套，视觉上才是一回事。
   🔴 这里必须 !important：左表还有 row--ok / row--bad / :hover 等多层状态色，
   不加高优先级就压不住，选中行会变成"黄底上透一点蓝"，比不选中还乱。 */
@keyframes listRowFlash {
  0%   { background: #8ed157; }   /* 起手是饱和绿，把眼睛拽过来 */
  100% { background: #c3ea9d; }   /* 落到亮绿 */
}
#listBody tbody tr.is-selected td,
#listBody tbody tr.is-selected:hover td,
#listBody tbody tr.is-selected td.st--ok,
#listBody tbody tr.is-selected td.st--bad {
  /* 🔴 不用半透明：主色 34% 叠在白底上会发灰（用户原话"看着像蓝灰色"）。
     直接用实色亮绿 —— 和"黄=够了 / 红=不足"两个状态色都拉得开。 */
  background: #c3ea9d !important;
  color: #24380f !important;
  font-weight: 700;
  /* 上下各 2px，左/右由首末列补上同样 2px —— 四边等宽，才不会"左边粗右边细" */
  border-top: 2px solid #4e8a1f !important;
  border-bottom: 2px solid #4e8a1f !important;
  animation: listRowFlash 0.6s ease-out;
}
/* 🔴 2px 上下边框比常规行多 3px（0→2 与 1→2），不抵消的话选中瞬间整张表会往下跳。
   基础是 padding 7px + border-bottom 1px = 15px；选中后 4px 边框，故内边距取 5 + 6。 */
#listBody tbody tr.is-selected td {
  padding-top: 5px !important;
  padding-bottom: 6px !important;
}
/* 左右两侧补齐同样的 2px；不再用内阴影色条（那样左边永远是 5px，跟右边不对称） */
#listBody tbody tr.is-selected td:first-child {
  border-left: 2px solid #4e8a1f !important;
  box-shadow: none !important;
}
#listBody tbody tr.is-selected td:last-child {
  border-right: 2px solid #4e8a1f !important;
  box-shadow: none !important;
}
#listBody tbody td { padding: 7px 8px; }
/* 差额格内容短（±37.53 / 未匹配），左右各收 3px，列才真能压到 68 以内 */
#listBody tbody td.st { padding-left: 5px; padding-right: 5px; }
#listBody tbody td:nth-child(2) { font-size: 11px !important; letter-spacing: -0.2px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(250,248,245,0.96);
  backdrop-filter: blur(8px);
  text-align: left; font-weight: 600; color: var(--stone);
  padding: 8px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
tbody td {
  padding: 7px 10px; border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
tbody tr:hover td { background: rgba(var(--primary-rgb),0.055); }
tbody tr.is-selected td { background: rgba(var(--primary-rgb),0.10); }
/* 右栏属性表：地图点中地块时的高亮要"一眼能落上去" —— 原来的 0.10 太淡，
   眼睛还停在地图上时根本找不到对应行。加粗底色 + 四周描边 + 左侧色条 + 一次闪动。 */
/* 右栏确权属性表：和左栏投保清单**用完全同一套高亮**（用户要求两边一致）。
   底色 #c3ea9d + 深绿字 + 四边等宽 2px 外框 + 同一个入场动画（复用 listRowFlash）。 */
#attrBody tbody tr.is-selected td,
#attrBody tbody tr.is-selected:hover td {
  background: #c3ea9d !important;
  color: #24380f !important;
  font-weight: 700;
  border-top: 2px solid #4e8a1f !important;
  border-bottom: 2px solid #4e8a1f !important;
  animation: listRowFlash 0.6s ease-out;
}
/* 同样抵消 3px：基础 padding 7px + border-bottom 1px，选中后 4px 边框 ⇒ 内边距 5 + 6 */
#attrBody tbody tr.is-selected td {
  padding-top: 5px !important;
  padding-bottom: 6px !important;
}
#attrBody tbody tr.is-selected td:first-child {
  border-left: 2px solid #4e8a1f !important;
  box-shadow: none !important;
}
#attrBody tbody tr.is-selected td:last-child {
  border-right: 2px solid #4e8a1f !important;
  box-shadow: none !important;
}

/* ── 认领条：点中地块后，指定「这块地现在归谁种」 ── */
/* ── 缺失编码提示条 ── */
.gapbar {
  display: none; align-items: center; gap: 8px;
  padding: 6px 12px; margin: 0;
  font-size: 11.5px; color: #8a6400;
  background: rgba(214, 158, 46, 0.16);
  border-bottom: 1px solid rgba(214, 158, 46, 0.36);
}
.gapbar b { font-weight: 700; }
.gapbar .spacer { flex: 1; }

/* ── 手绘提示条 ── */
/* 地图右上角工具条 —— 与主站 index.html 同款（毛玻璃圆角 + 图标按钮） */
.map-tools {
  /* 🔴 z-index 必须高于 Leaflet 内部层级（tile 200 / overlay 400 / marker 600 / popup 700 / control 1000），
     原来是 46 —— 元素明明在，却被地图瓦片整片盖住，看起来"没有按钮" */
  position: absolute; top: 10px; right: 10px; z-index: 1200;
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px; border-radius: 13px;
  /* 原来用毛玻璃浅底，叠在没加载瓦片的浅灰地图上几乎隐形（实测 rect 在，但看不见）
     ⇒ 改白底实色 + 描边，任何底图上都能读 */
  background: #ffffff;
  border: 1px solid rgba(122,110,98,0.20);
  box-shadow: 0 4px 16px rgba(96,85,74,0.18);
}
.map-tools__btn {
  width: 82px; height: 34px; padding: 0 9px; border: none; border-radius: 9px;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--charcoal); white-space: nowrap;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.map-tools__btn svg { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--primary); }
.map-tools__btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.map-tools__btn:hover svg { stroke: #fff; }
.map-tools__btn--active,
.map-tools__btn--active:hover {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: #fff; transform: none;
  box-shadow: 0 2px 8px rgba(117,133,95,0.36);
}
.map-tools__btn--active svg { stroke: #fff; }
.map-tools__btn--active svg circle { fill: #fff; }

/* 🔴 Leaflet 会给可交互的 SVG 路径加 tabindex（键盘可达），点一下浏览器就画一圈**焦点黑框**，
   截图里补画地块外那个黑色矩形框就是它 —— 地图上的地块不需要焦点环，直接去掉。
   （同时管住 svg 本身和 thumbnail 里的 path，避免换个渲染器又冒出来） */
#map .leaflet-interactive,
#map .leaflet-interactive:focus,
#map svg,
#map svg:focus,
#map svg path,
#map svg path:focus,
#map .leaflet-overlay-pane svg:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
/* 有些浏览器会把容器自身的 outline 也画出来 */
.leaflet-container { -webkit-tap-highlight-color: transparent; }
.leaflet-container:focus, .leaflet-container a:focus { outline: none !important; }

/* 绘制时标在多边形中心的面积（对齐主站：数字跟着形状走，不用去下方提示条找） */
.draw-area-label span {
  display: inline-block; padding: 2px 9px; border-radius: 7px;
  background: rgba(255,255,255,0.95); border: 1px solid rgba(15,155,142,0.55);
  color: #0b6f66; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(96,85,74,0.16);
}

/* ══════════ 绘制三件套（对齐主站 .drawtool / .drawhint / .drawact）══════════
   主站的做法：顶部**居中胶囊式**模式工具条 + 一条深色浮条提示 + 底部居中动作条。
   原来这里是"贴着左上角的一条"，既挡地图又和主站观感不一致。 */
.drawtool {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 1200; display: none; align-items: center; gap: 2px;
  padding: 4px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px);
  border: 1px solid #e2ddd6; box-shadow: 0 6px 20px rgba(96, 85, 74, 0.18);
  /* 7 个按钮在窄栏（三栏布局时中间只有 300~420px）一定放不下 ——
     允许换行居中，而不是被 .pane 的 overflow:hidden 裁掉一半。 */
  max-width: calc(100% - 20px); flex-wrap: wrap; justify-content: center;
}
.drawtool__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: #5b544c;
  font-family: inherit; font-size: 12.5px; line-height: 1.2;
}
.drawtool__btn:hover:not(:disabled) { background: rgba(var(--primary-rgb), 0.10); }
/* 当前模式：主站是实心绿 */
.drawtool__btn--on,
.drawtool__btn--on:hover:not(:disabled) { background: #0f9b8e; color: #fff; font-weight: 600; }
.drawtool__btn--danger { color: #c0392b; }
.drawtool__btn--danger:hover:not(:disabled) { background: rgba(192, 57, 43, 0.10); }
.drawtool__btn:disabled { color: #b7b0a8; cursor: not-allowed; }
.drawtool__sep { width: 1px; height: 18px; background: #e6e1da; margin: 0 3px; }

/* ── 补画地块的顶点手柄（拖动改边界）── */
.ep-handle {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid #0f9b8e;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
  cursor: grab;
}
.ep-handle:active { cursor: grabbing; }
.ep-edit__info {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #5b544c; padding: 0 4px 0 8px;
}
.ep-edit__info b { color: var(--charcoal); }
.ep-edit__area { color: #0b6f66; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 深色浮条提示（主站同款），放在工具条下方居中 */
.drawhint {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 1200; display: none; max-width: calc(100% - 32px);
  padding: 6px 14px; border-radius: 8px;
  background: rgba(43, 40, 36, 0.88); color: #fff;
  font-size: 12px; line-height: 1.45; text-align: center; white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* 底部动作条：取消 / 上一步 / 完成 */
.drawact {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1200; display: none; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
  border: 1px solid #e2ddd6; box-shadow: 0 8px 24px rgba(96, 85, 74, 0.20);
}
.drawact__btn {
  min-width: 68px; padding: 8px 16px; border-radius: 9px; cursor: pointer;
  border: 1px solid #e2ddd6; background: #faf7f3; color: #5b544c;
  font-family: inherit; font-size: 13px;
}
.drawact__btn:hover:not(:disabled) { background: #f2ede6; }
.drawact__btn:disabled { color: #bdb6ae; background: #f7f4f0; cursor: not-allowed; }
/* 「完成」用绿色实心 —— 和主站一致，一眼看到主操作 */
.drawact__btn--go {
  min-width: 84px; border-color: #0f9b8e; background: #0f9b8e; color: #fff; font-weight: 600;
}
.drawact__btn--go:hover:not(:disabled) { background: #0b7f74; border-color: #0b7f74; }
/* 面积明细：单独一整行，放在「输入框 + 认领按钮」上面。
   原来是个 nowrap 的小胶囊挤在标题行末尾，窄栏下会被挤出卡片、读不全，
   而它的用途恰恰是"点之前先看清要认多少亩"（2026-10-27 用户要求改到这里）。 */
.claim__extra {
  font-size: 11px; line-height: 1.62; padding: 5px 9px; border-radius: 8px;
  white-space: normal; word-break: break-word; text-align: center;
  background: rgba(15, 155, 142, 0.10); color: #0b6f66; font-weight: 500;
  border: 1px solid rgba(15, 155, 142, 0.18);
}

/* ── 备注（📝）──
   场景：保险公司的人不会画地块，用一句话写清「这块有 2 亩给李四、靠北」。
   颜色用灰紫，和「面积明细」的绿色、「分给谁」的橙色都区分开：
   它既不是记账数据、也不是面积数据，是单纯的文字说明。 */
.claim__note {
  font-size: 11px; line-height: 1.6; padding: 5px 9px; border-radius: 8px;
  background: rgba(107, 92, 148, 0.10); border: 1px solid rgba(107, 92, 148, 0.22);
  color: #574a78; cursor: pointer; white-space: pre-wrap; word-break: break-word;
}
.claim__note::before { content: '📝 '; }
.claim__note:hover { background: rgba(107, 92, 148, 0.16); }

.claim__notebox { display: flex; flex-direction: column; gap: 6px; }
.claim__notebox textarea {
  width: 100%; padding: 7px 9px; border-radius: 8px; resize: vertical;
  border: 1px solid rgba(107, 92, 148, 0.35); background: #fff;
  font-family: inherit; font-size: 12px; line-height: 1.6; color: var(--charcoal);
}
.claim__notebox textarea:focus {
  outline: none; border-color: #7b68a8; box-shadow: 0 0 0 2px rgba(107, 92, 148, 0.18);
}
.claim__notebox-foot { display: flex; align-items: center; gap: 6px; }
.claim__notecount { flex: 1; font-size: 10.5px; color: var(--muted); }

/* 图标按钮：emoji 当图标用，所以压一压行高、去掉左右多余内边距 */
.claim__iconbtn { padding: 0 6px; font-size: 13px; line-height: 1; }
.claim__iconbtn.is-on {
  background: rgba(107, 92, 148, 0.16);
  border-color: rgba(107, 92, 148, 0.45);
}

/* ── 认领按钮的悬停说明：自己画在**上方** ──
   🔴 原生 title 的气泡位置由浏览器决定、跟着鼠标往下弹，而认领条在最底部，
      等于永远贴在屏幕最下沿（2026-10-27 用户要求"改到认领框的上面"）。
      → 改用 data-tip + 伪元素，位置自己定，稳定朝上。 */
.claim [data-tip] { position: relative; }
.claim [data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); right: -4px;
  width: max-content; max-width: 252px;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(58, 48, 66, 0.96); color: #fff;
  font-size: 11.5px; line-height: 1.62; font-weight: 400;
  text-align: left; white-space: normal;
  box-shadow: 0 6px 18px rgba(40, 30, 50, 0.28);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none; z-index: 300;
}
.claim [data-tip]::before {
  content: ''; position: absolute; bottom: calc(100% + 3px); right: 14px;
  border: 5px solid transparent; border-top-color: rgba(58, 48, 66, 0.96);
  opacity: 0; visibility: hidden; transition: opacity .16s ease;
  pointer-events: none; z-index: 300;
}
.claim [data-tip]:hover::after { opacity: 1; visibility: visible; transform: translateY(0); }
.claim [data-tip]:hover::before { opacity: 1; visibility: visible; }
/* 触摸屏没有 hover，别让气泡残留 */
@media (hover: none) {
  .claim [data-tip]::after, .claim [data-tip]::before { display: none; }
}

/* ── 地图图例 ── */
/* ── 顶栏上传下拉 ── */
.btn-menu { position: relative; display: inline-flex; }
.btn-menu .caret { font-size: 10px; opacity: .72; margin-left: 5px; }
.btn-menu__drop {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 70;
  display: none; min-width: 210px; padding: 5px;
  background: rgba(252,250,247,0.99); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 26px rgba(96,85,74,0.16);
}
.btn-menu__drop.show { display: block; }
.btn-menu__drop > div {
  padding: 8px 10px; border-radius: 7px; cursor: pointer; line-height: 1.35;
}
.btn-menu__drop > div:hover { background: var(--primary-soft); }
.btn-menu__drop b { display: block; font-size: 12.5px; color: var(--charcoal); font-weight: 600; }
.btn-menu__drop em { display: block; font-size: 11px; color: var(--muted); font-style: normal; margin-top: 2px; }

/* ── 颜色说明（地图左上，避开 Leaflet 缩放按钮）── */
.legend-tip {
  /* 现在在卡片标题栏里，不再浮在地图上 ⇒ 去掉 absolute/left/top/z-index */
  display: none; align-items: center; gap: 5px; flex: none;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--stone); line-height: 1; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(96,85,74,0.10);
}
.legend-tip:hover { color: var(--charcoal); border-color: var(--border); }
.legend-tip__dot { display: inline-flex; gap: 2px; }
.legend-tip__dot i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }

.legend {
  position: absolute; left: 10px; top: 10px; z-index: 1170;
  display: flex; gap: 9px; flex-wrap: wrap;
  /* 右侧给「画地块」按钮让位（它固定在地图右上角，约 100px 宽） */
  max-width: calc(100% - 120px);
  padding: 7px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 14px rgba(96,85,74,0.12);
  font-size: 11px; color: var(--stone); line-height: 1;
}

/* ── 一键全屏：收起左右两栏，地图铺满 ── */
body.focus-map .workspace { grid-template-columns: 1fr; }
body.focus-map .workspace > .pane--list { display: none; }
body.focus-map .workspace > .pane:last-child { display: none; }

/* ── 左/右栏「收起」：只留关键列，把宽度让给地图（2026-11-04 用户要求）──
   13 寸笔记本上中间地图被 466 + 420 挤到 400px 出头，看地块形状很吃力。
   收起一侧多出 200px 左右给地图；和 focus-map（两栏全隐）是两回事 ——
   表格照常可滚动、可点选、可认领，只是不再显示次要列。
   状态由 js/ins-ui.js 写到 body 的 class + localStorage，刷新后保持。 */
body.list-collapsed .workspace { --w-list: 246px; }
body.attr-collapsed .workspace { --w-attr: 216px; }
/* 只留 3 列（姓名/投保面积/差额），不再撑 388px 的最小宽 */
body.list-collapsed #listBody table { min-width: 0; }
/* 收起后只剩第 1/3/5 列（第 2、4 列 display:none 后不再参与 fixed 布局），
   按百分比把 246px 分掉，否则残留 200px 固定宽会在右边留一道空白 */
body.list-collapsed #listBody thead th:nth-child(1) { width: 42%; }
body.list-collapsed #listBody thead th:nth-child(3) { width: 29%; }
body.list-collapsed #listBody thead th:nth-child(5) { width: 29%; }
body.list-collapsed #listBody th,
body.list-collapsed #listBody td { padding-left: 6px; padding-right: 6px; }
body.list-collapsed .pane--list [data-role="id"],
body.list-collapsed .pane--list [data-role="cad"] { display: none; }
/* 收起时辅助条（汇总/编码缺口/联动提示）在 246px 里会挤成一团，反而挡住表格 */
body.list-collapsed .pane--list .sum,
body.list-collapsed .pane--list .gapbar,
body.list-collapsed .pane--list .linkhint { display: none !important; }
/* 🔴 收起后栏头必须同步瘦身（2026-11-04 用户反馈"收起之后看不到恢复的按钮"）：
   246 / 216px 里再摆 标题+计数+搜索框+两三个按钮 必然溢出，
   而 .pane 是 overflow:hidden ⇒ 溢出部分直接被裁掉，连右端那个「展开」按钮自己都会被裁没。
   收起态只留 标题 + 展开按钮，搜索/导出/重算/显示列一律让位给表格 —— 要用就先展开。 */
body.list-collapsed .pane--list .pane__head,
body.attr-collapsed .pane--attr .pane__head { gap: 6px; padding: 8px 10px; }
body.list-collapsed .pane--list .pane__head .list-filter,
body.list-collapsed .pane--list .pane__head .pane__meta,
body.list-collapsed .pane--list .pane__head .btn { display: none; }
body.attr-collapsed .pane--attr .pane__head .list-filter,
body.attr-collapsed .pane--attr .pane__head .filter-hit,
body.attr-collapsed .pane--attr .pane__head .pane__meta,
body.attr-collapsed .pane--attr .pane__head .btn { display: none; }
/* 标题可以省，展开按钮不能省：钉在最右、禁止压缩 */
body.list-collapsed .pane--list .pane__head .pane__title,
body.attr-collapsed .pane--attr .pane__head .pane__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* 左栏按钮在栏头最右，用 auto 顶到右边；右栏按钮在标题左边（用户 11-04 要求），不能 auto */
body.list-collapsed .pane__head .pane__collapse { flex: none; margin-left: auto; }
body.attr-collapsed .pane__head .pane__collapse { flex: none; }
/* 右栏的收起按钮在标题**左边**（2026-11-04 用户要求，比挂在 420px 栏的最右端好够得着）：
   基础规则里的 margin-left:4px 是给"挂在右端"用的，这里要翻成"贴左边、右边留 6px" */
.pane__collapse--lead { margin-left: 0; margin-right: 6px; }

/* 认领卡在 216px 里放不下「搜索框 + 三个按钮」一行：让搜索框独占一行、按钮换到第二行 */
body.attr-collapsed .pane--attr .claim__line { flex-wrap: wrap; }
body.attr-collapsed .pane--attr .claim__sel { flex: 1 1 100%; }

/* 右栏收起：只留「人名 + 亩数」，连 # 序号和 DKBM 编码一起藏 */
body.attr-collapsed .pane--attr [data-role="idx"],
body.attr-collapsed .pane--attr [data-role="dk"],
body.attr-collapsed .pane--attr [data-role="other"] { display: none; }
body.attr-collapsed .pane--attr .mapper { display: none; }

/* 收起 / 展开按钮（2026-11-04 用户："做得更明显一点，加上颜色"）
   栏头是一片浅色（白/毛玻璃）+ 一堆灰字按钮，白底小方块在里面等于隐形，
   尤其收起后栏头只剩「标题 + 它」，更要一眼能看见 ⇒ 墨绿实底 + 白箭头 + 轻投影。
   26px 见方，比「显示列」那类灰按钮重一档，明确"这是个开关"。 */
.pane__collapse {
  /* 收起/展开按钮的三个颜色（2026-11-04 用户："换成比琥珀色更明显一点的颜色"）
     —— 用**亮橙**：① 工作台主色是墨绿、底色是暖石，橙是这块界面上唯一没被用掉的暖色；
        ② 地图地块用的是黄(#e8bb52)/红(#c07c77)/紫(#b39ddb)，橙比黄深、比红亮，不会认错；
        ③ 白箭头压在橙上对比够、又不刺眼（图标不是正文，2.9:1 已够看）。
     换色只改这三行。 */
  --pane-btn: #e2711d;
  --pane-btn-hover: #c55f13;
  --pane-btn-ring: rgba(226, 113, 29, .30);
  flex: none; margin-left: 4px; width: 26px; height: 26px; padding: 0 0 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pane-btn-hover); border-radius: 8px;
  background: var(--pane-btn); color: #fff;
  font: 700 18px/1 var(--font-sans); cursor: pointer;
  box-shadow: 0 1px 4px rgba(196, 95, 19, .38);
  transition: background .15s, box-shadow .15s, transform .12s;
}
.pane__collapse:hover {
  background: var(--pane-btn-hover);
  box-shadow: 0 3px 11px rgba(196, 95, 19, .48);
  transform: translateY(-1px);
}
.pane__collapse:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(196, 95, 19, .38); }
.pane__collapse:focus-visible { outline: 2px solid var(--pane-btn); outline-offset: 2px; }
/* 收起态：它是栏头唯一出口，再套一圈同色外发光 */
body.list-collapsed .pane__collapse,
body.attr-collapsed .pane__collapse {
  box-shadow: 0 0 0 3px var(--pane-btn-ring), 0 1px 4px rgba(196, 95, 19, .40);
}
.legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; display: inline-block; }

/* 认领过的地块：人名下面用小字标出"原来的确权姓名" */
#attrBody small.orig-name {
  display: block; font-weight: 400; font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.claim {
  position: relative;
  /* 🔴 flex: none —— 父级 .pane 是 flex column，.pane__body 是 flex:1 会吃掉全部剩余空间，
     认领条用的是默认 flex:0 1 auto 会被压到 0 高，表现就是"右侧根本没有认领入口" */
  flex: 0 0 auto;
  display: none; flex-direction: column; gap: 9px;
  /* 认领是"当前要做的动作"，必须和上面的确权表格分开：
     淡紫卡片（对应地图上"已认领"的紫 #b39ddb/#6a4f9c）+ 3px 顶边 + 上浮阴影，
     四周留 8px 白，不再贴着面板底边（用户原话"太靠下"）。 */
  margin: 0 8px 8px;
  padding: 11px 14px 13px;
  background: #f3edfa;
  border: 1px solid #cbb6e4;
  border-top: 3px solid #8e6fc0;
  border-radius: 11px;
  box-shadow: 0 -5px 18px rgba(90, 63, 120, 0.13);
  min-height: 88px;
}
.claim.show { display: flex; }
/* 左栏搜索框：紧凑到能塞进标题栏，又不抢按钮的位置 */
.list-filter {
  flex: 0 0 96px; width: 96px;             /* 固定宽，不参与压缩 */
  padding: 3px 7px; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 7px;
  background: rgba(255,255,255,0.92); color: var(--charcoal);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.list-filter::placeholder { color: rgba(122,110,98,0.55); }
.list-filter:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb),0.15); }
/* 右栏「确权属性」的姓名搜索框：比左栏更窄（右栏标题栏还有一长串统计文字） */
.attr-filter { flex: 0 0 84px; width: 84px; }
/* 过滤时的命中数（放在搜索框右侧，不占统计文字的位置） */
.filter-hit { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
/* 右栏的统计文字很长（N 个地块 · N 个经 DKBM 关联 · 已认领 N · ✓ 全部已归属），
   加搜索框后必须允许它缩，否则顶栏会被撑出横向滚动 */
.pane--attr .pane__meta {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── 批量上传进度 ── */
.up-progress {
  padding: 7px 14px 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(var(--primary-rgb), 0.06);
}
.up-progress__text {
  font-size: 11.5px; color: var(--stone); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.up-progress__bar {
  height: 4px; border-radius: 2px; background: rgba(122,110,98,0.16); overflow: hidden;
}
.up-progress__fill {
  height: 100%; width: 0%; border-radius: 2px;
  background: var(--primary); transition: width .18s ease;
}

/* ── 村选择条 ── */
.village-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.22);
}
.village-bar__label { font-size: 11.5px; color: var(--muted); flex: none; }
.village-bar__stat { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.village-sel { position: relative; flex: 1 1 auto; min-width: 0; max-width: 260px; }
.village-sel__btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,0.95);
  font-size: 12.5px; color: var(--charcoal); text-align: left;
}
.village-sel__btn b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.village-sel__caret { font-size: 10px; opacity: .65; }
.village-sel__btn:hover { border-color: var(--primary); }
.village-sel__drop {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 80;
  display: none; width: 280px; max-height: 340px;
  background: rgba(252,250,247,0.99); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(96,85,74,0.20);
  padding: 6px; flex-direction: column; gap: 4px;
}
.village-sel__drop.show { display: flex; }
.village-sel__search {
  flex: none; padding: 5px 9px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 7px;
  background: #fff; color: var(--charcoal); outline: none;
}
.village-sel__search:focus { border-color: var(--primary); }
.village-sel__list { flex: 1; overflow: auto; min-height: 0; }
.village-sel__item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 12.5px;
}
.village-sel__item:hover { background: var(--primary-soft); }
.village-sel__item.is-on { background: rgba(var(--primary-rgb),0.14); font-weight: 600; }
.village-sel__item b { flex: none; }
.village-sel__sub { margin-left: auto; font-size: 11px; color: var(--muted); }
.village-sel__mark { flex: none; width: 12px; text-align: center; font-size: 10px; }
.village-sel__mark--idle { color: rgba(122,110,98,0.45); }
.village-sel__mark--on   { color: var(--primary); }
.village-sel__mark--warn { color: #c08a1e; }
.village-sel__empty { padding: 14px 8px; text-align: center; color: var(--muted); font-size: 12px; }
/* 按镇分组时的组标题（跨镇才显示） */
.village-sel__grp {
  font-size: 10.5px; color: var(--muted); letter-spacing: .06em;
  padding: 6px 8px 2px; margin-top: 2px; border-top: 1px solid var(--border-soft);
}
.village-sel__grp:first-child { border-top: 0; margin-top: 0; }
.village-sel__ops {
  display: flex; gap: 5px; padding-top: 5px; margin-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.village-sel__op {
  flex: 1; padding: 5px 6px; font-size: 11.5px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--stone);
}
.village-sel__op:hover { border-color: var(--primary); color: var(--primary); }

/* 过滤后一条都没匹配上时的提示行 */
tr.filter-empty td {
  padding: 18px 8px; text-align: center; color: var(--muted); font-size: 12px; background: transparent;
}

/* 左栏标题栏里的按钮收窄，给搜索框腾地方（只作用于 .pane--list，别的栏不受影响） */
.pane--list .pane__head .btn {
  flex: none; font-size: 11px; padding: 3px 7px; border-radius: 7px;
}
/* 「45 行」这类计数：**允许被压缩**（原来是 flex:none，字数一多就把右边的
   「重新匹配」顶出面板，截图里被裁成"重新…"）。
   计数挤不下时用省略号，按钮永远完整可见。 */
.pane--list .pane__meta {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}

/* 左表「差额」列的小三角：整张表是按这一列从多到少排的，得让人一眼看出顺序不是随机的 */
#listBody thead .sort-mark {
  font-size: 9px; opacity: 0.5; vertical-align: 1px; letter-spacing: 0;
}

/* 右表：人名下面那条"分给 张红 1.70 亩"（比面积列的 −X → Y 更直接地回答"给谁了"） */
#attrBody small.split-note {
  display: block; font-size: 9.5px; line-height: 1.35; font-weight: 500;
  color: #b8702a; white-space: normal;
}
/* 「分给谁多少」：一个人一行。原来拼成一句会被窄列折成
   「分给 张红 1.70 亩、王 / 洪刚 1.89 亩」，名字都被劈成两半。 */
#attrBody .split-note__row { display: block; }
/* 名字+面积作为一个整体换行；放不下时整块换行，绝不从名字中间断 */
#attrBody .split-note__txt { display: inline-block; }

/* ── 右表整体居中 ──
   原来是"名字靠左、编码靠左、亩靠右"，三列三种对齐方式，扫读时眼睛要来回横跳；
   这张表只有 3 列、内容都短，统一居中反而更容易一列一列往下数。
   🔴 必须带 #attrBody 前缀：.num{text-align:right} 是两张表共用的，
      只写 td.num 会把左栏投保清单的面积列也一起改掉。 */
#attrBody thead th,
#attrBody tbody td,
#attrBody tbody td.num { text-align: center; }
/* 居中之后去掉第二行的左缩进 —— 缩进 + 居中会让那一行看着偏右 */
#attrBody .split-note__row + .split-note__row { padding-left: 0; }

/* 右表：面积列后面的"已分出多少 → 还剩多少"（SHP 原始面积不动，只做标注） */
#attrBody small.ep-split {
  display: block; font-size: 9.5px; line-height: 1.3; font-weight: 500;
  color: #b8702a; font-variant-numeric: tabular-nums;
}
/* 右表：备注（📝 一行小字）
   颜色刻意和「分给谁」的橙色区分开（备注是自由文本，不是面积记账），
   超长用两行截断 + title 给全文 —— 备注可能写成一句话，不能把行撑爆。 */
#attrBody small.note-line {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 9.5px; line-height: 1.35; font-weight: 500;
  color: #6a5f8a; white-space: normal; text-align: left;
  margin-top: 2px; word-break: break-word;
}

/* 右表：表尾的分出 / 新增记录行 —— 视觉上要能和确权原始地块分开 */
#attrBody tbody tr.row--extra { cursor: pointer; }
#attrBody tbody tr.row--extra td {
  background: rgba(15, 155, 142, 0.07); color: #0b6f66; font-size: 11.5px;
}
#attrBody tbody tr.row--extra:hover td { background: rgba(15, 155, 142, 0.14); }
#attrBody tbody tr.row--extra td:first-child { color: #0f9b8e; font-weight: 700; }
#attrBody tbody tr.row--extra-first td { border-top: 2px dashed rgba(15, 155, 142, 0.45); }
/* 左表点了某个人时，右表里"分给他的那几行"同步高亮 */
#attrBody tbody tr.row--extra.is-related td {
  background: rgba(15, 155, 142, 0.26); color: #064a44; font-weight: 600;
  box-shadow: inset 3px 0 0 #0b6f66;
}
#attrBody .ep-tag {
  display: inline-block; margin-right: 4px; padding: 0 4px; border-radius: 3px;
  background: rgba(15, 155, 142, 0.18); color: #0b6f66; font-size: 9.5px; font-weight: 600;
}

/* 半路引导（"先去右侧点个人"这类）：就在地图左上角，用紫色左边框和普通 toast 区分 */
.toast--guide {
  background: rgba(246, 242, 252, 0.98);
  border-left: 3px solid #8e6fc0;
  color: #4f3669;
}
.claim__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.claim__opt-area { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: 4px; }
.claim__title {
  font-size: 11.5px; color: var(--stone); min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.claim__title b { color: var(--charcoal); font-weight: 600; }
.claim__badge {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(107, 125, 94, 0.18); color: #4f6a45; font-weight: 500;
}
.claim__sel {
  flex: 1; min-width: 0; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.92);
  font-family: inherit; font-size: 12px; color: var(--charcoal);
}
.claim__sel::placeholder { color: rgba(122, 110, 98, 0.55); }
.claim__sel:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.16); }
/* 候选列表：往上弹（认领条在右栏最底部，往下弹会出界） */
.claim__list {
  display: none; position: absolute; left: 10px; right: 10px; bottom: 100%;
  margin-bottom: 6px; max-height: 240px; overflow: auto; z-index: 60;
  background: rgba(252, 250, 247, 0.99); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 5px;
}
.claim__list.show { display: block; }
.claim__group {
  position: sticky; top: 0; z-index: 1;
  padding: 4px 8px 3px; font-size: 10.5px; font-weight: 600;
  color: var(--muted); background: rgba(252, 250, 247, 0.98);
}
.claim__opt {
  padding: 6px 9px; border-radius: 7px; cursor: pointer;
  font-size: 12px; color: var(--charcoal); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.claim__opt:hover { background: rgba(var(--primary-rgb), 0.10); }
.claim__opt.is-on { background: rgba(var(--primary-rgb), 0.16); font-weight: 600; }
.claim__empty { padding: 8px 9px; font-size: 11.5px; color: var(--muted); }
.claim__tips {
  padding: 5px 9px 6px; margin-bottom: 3px;
  font-size: 10.5px; color: var(--stone);
  border-bottom: 1px dashed var(--border-soft);
}
.claim__tips b { color: var(--bad); font-weight: 700; }

/* ── 认领卡片内部：整体走紫色系，和上面的确权表格（白/米色）明确分开 ── */
.claim .claim__label {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: #7b5aa6;
}
.claim .claim__title { font-size: 12px; color: #5b4478; }
.claim .claim__title b { color: #3b2a52; font-weight: 700; }
.claim .claim__badge { background: rgba(106, 79, 156, 0.16); color: #5b3f78; }
.claim .claim__extra { background: rgba(106, 79, 156, 0.14); color: #4f3669; }
.claim .claim__sel {
  padding: 8px 10px; font-size: 12.5px;
  border: 1px solid #c3addd; background: #fff; border-radius: 8px;
}
.claim .claim__sel::placeholder { color: rgba(91, 68, 120, 0.5); }
.claim .claim__sel:focus { border-color: #7b5aa6; box-shadow: 0 0 0 2px rgba(123, 90, 166, 0.18); }
/* 「认领」按钮：加高加粗，用同一支紫，和输入框组成一条明确的操作带 */
.claim .btn--primary {
  padding: 8px 18px; font-size: 12.5px; font-weight: 600;
  background: #7b5aa6; border-color: #7b5aa6; color: #fff;
  box-shadow: 0 2px 8px rgba(123, 90, 166, 0.30);
}
.claim .btn--primary:hover { background: #6a4f9c; border-color: #6a4f9c; color: #fff; }
/* 候选下拉也换底色，避免一片白卡里冒出个米色浮层 */
.claim .claim__opt:hover { background: rgba(123, 90, 166, 0.10); }
.claim .claim__opt.is-on { background: rgba(123, 90, 166, 0.16); }
.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }

/* ── 投保清单：匹配状态 ── */
tr.row--ok td:first-child { box-shadow: inset 4px 0 0 #d99a12; }   /* 够 → 黄色竖条 */
tr.row--bad td:first-child { box-shadow: inset 4px 0 0 #b4463c; }  /* 不足 → 红竖条 */
tr.row--none td:first-child { box-shadow: inset 4px 0 0 rgba(122,110,98,0.28); }
.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
}
.pill--ok { background: var(--ok-soft); color: #4f6a45; }
.pill--bad { background: var(--bad-soft); color: #8f4b45; }
.pill--none { background: rgba(141,132,121,0.13); color: #6f665d; }
tr.row--bad td:nth-child(1) { color: var(--bad); }

/* ── 字段映射栏 ── */
.mapper {
  display: none; padding: 10px 14px; gap: 10px; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--border-soft); background: rgba(255,255,255,0.30);
  font-size: 12px;
}
.mapper.show { display: flex; }
.mapper label { color: var(--muted); margin-right: 4px; }
.mapper select {
  font-family: inherit; font-size: 12px; padding: 4px 8px;
  border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.8); color: var(--charcoal); max-width: 170px;
}

/* ── 空状态 ── */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; padding: 30px 20px; text-align: center;
  color: var(--muted); font-size: 13px; line-height: 1.7;
}
.empty svg { opacity: .35; }
.empty b { color: var(--stone); font-weight: 600; }

/* ── 提示条 ── */
/* 提示条：地图左上角、绘制工具条（top:10 高约 40）下方 —— 原来 fixed 屏幕顶部居中，
   又宽又高，画地块时正好压在工具条上。容器不吃点击（每条自己吃），免得挡住地图拖动。 */
.toast-wrap {
  position: absolute; top: 58px; left: 8px; right: auto; transform: none;
  z-index: 9999; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  max-width: min(320px, calc(100% - 20px));
  pointer-events: none;
}
.toast {
  padding: 8px 12px; border-radius: 9px; font-size: 12px;
  background: rgba(252,250,247,0.97); color: var(--charcoal);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  max-width: 100%; line-height: 1.55; pointer-events: auto;
}
.toast--error { border-color: rgba(165,96,90,.35); color: #8f4b45; }
.toast--ok { border-color: rgba(107,125,94,.35); color: #4f6a45; }

/* 常驻错误条：上传失败时留在页面上，不自动消失（toast 一闪而过大爷根本看不清） */
.errbar {
  display: none; margin: 0; padding: 10px 14px; flex-shrink: 0;
  background: rgba(165,96,90,0.10); border-bottom: 1px solid rgba(165,96,90,0.28);
  color: #8f4b45; font-size: 12.5px; line-height: 1.6; white-space: pre-line;
  position: relative;
}
.errbar.show { display: block; }
.errbar b { display: block; margin-bottom: 3px; font-size: 13px; }
.errbar__x {
  position: absolute; right: 10px; top: 8px; cursor: pointer;
  color: #a5605a; font-size: 15px; line-height: 1; padding: 2px 5px;
}
.errbar__detail { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: #9d6a64; opacity: .85; }

/* ── 列选择浮层 ── */
/* 云端批次列表：fixed 贴右上，iframe 里也定位准确 */
.cloudpick {
  position: fixed; right: 14px; top: 58px; z-index: 60;
  display: none; width: 400px; max-height: 62vh; overflow: auto;
  background: rgba(252,250,247,0.99); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(96,85,74,0.18);
  padding: 8px; font-size: 12.5px;
}
.cloudpick__head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px;
}
.cloudpick__head b { font-size: 13px; color: var(--charcoal); }
.cloudpick__head .spacer { flex: 1; }
.cloudpick__empty { padding: 22px 12px; text-align: center; color: var(--muted); line-height: 1.8; }
.cloud-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent;
}
.cloud-item:hover { background: var(--primary-soft); border-color: rgba(var(--primary-rgb),0.22); }
.cloud-item__main { flex: 1; min-width: 0; }
.cloud-item__main b { display: block; font-size: 12.5px; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud-item__main span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.cloud-item__time { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* 顶栏「云端保存状态」标记：一直挂着，一眼看出存的是哪个村、几点存的 */
/* 顶栏「当前登录人」 */
.whoami {
  flex: none; font-size: 11.5px; color: var(--muted); padding: 2px 9px;
  border: 1px solid var(--border-soft); border-radius: 999px;
  background: rgba(255,255,255,0.55); white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
}
.cloud-stamp {
  font-size: 11.5px; color: var(--muted); padding: 4px 8px; border-radius: 7px;
  background: rgba(255,255,255,0.62); border: 1px solid var(--border-soft);
  max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: none; cursor: default;
}
.cloud-stamp--ok   { color: #4f8a5f; border-color: rgba(79,138,95,0.38);   background: rgba(79,138,95,0.09); }
.cloud-stamp--warn { color: #b8860b; border-color: rgba(184,134,11,0.32);  background: rgba(184,134,11,0.09); }
/* 顶栏是 flex 不换行 ⇒ 窗口变窄时先压缩这个标记，别把右边按钮挤变形（全文在 title 里） */
@media (max-width: 1320px) { .cloud-stamp { max-width: 170px; } }
@media (max-width: 1180px) { .cloud-stamp { max-width: 128px; } }
@media (max-width: 1040px) { .cloud-stamp { max-width: 96px;  } }
.cloud-item__del {
  flex: none; padding: 2px 7px; font-size: 11px; border-radius: 6px;
  border: 1px solid rgba(165,96,90,0.35); background: transparent; color: var(--bad); cursor: pointer;
}
.cloud-item__del:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.cloud-item--cur { background: rgba(var(--primary-rgb),0.10); border-color: rgba(var(--primary-rgb),0.30); }
.colpick {
  position: absolute; right: 8px; top: 42px; z-index: 50;
  display: none; width: 250px; max-height: 60vh; overflow: auto;
  background: rgba(252,250,247,0.98); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px;
}
.colpick.show { display: block; }
.colpick__item { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; cursor: pointer; font-size: 12px; }
.colpick__item:hover { background: rgba(var(--primary-rgb),0.08); }
.colpick__item input { accent-color: var(--primary); }
.colpick__hint { padding: 6px 7px; font-size: 11.5px; color: var(--muted); }

/* ── 滚动条 ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(122,110,98,0.24); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(122,110,98,0.38); }

/* ══════════════════════════════════════════════════════════════════════
   登录 / 授权申请 / 智能客服  【2026-10-27】
   前缀统一 isup-，避免和地块库原有样式冲突
   ══════════════════════════════════════════════════════════════════════ */

body.isup-locked { overflow: hidden; }

/* ── 门禁：整屏遮罩 ── */
.isup-gate {
  position: fixed; inset: 0; z-index: 99998;
  background: linear-gradient(180deg, #f9f7f3 0%, #efebe4 100%);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.isup-gate[hidden] { display: none; }
.isup-gate__card {
  width: 100%; max-width: 430px; background: #fff; border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 30px 26px 20px; text-align: center;
}
.isup-gate__ico { font-size: 40px; line-height: 1; }
.isup-gate__title { font-size: 18px; font-weight: 700; color: var(--charcoal); margin: 10px 0 10px; }
.isup-gate__desc { font-size: 13.5px; line-height: 1.8; color: var(--stone); margin-bottom: 20px; }
.isup-gate__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.isup-gate__foot { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.isup-gate__foot a { color: var(--primary); text-decoration: none; }
.isup-gate__foot a:hover { text-decoration: underline; }
.isup-dot { margin: 0 7px; opacity: .45; }

/* ── 登录表单 ── */
.isup-login { display: flex; flex-direction: column; gap: 10px; }
.isup-login input {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px; font-family: inherit; color: var(--charcoal); background: #fcfbf9;
}
.isup-login input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.isup-login__code { display: flex; gap: 8px; }
.isup-login__code input { flex: 1; }
.isup-login__code button { white-space: nowrap; min-width: 98px; }

/* ── 按钮 ── */
.isup-btn {
  height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font-size: 13.5px; font-family: inherit; cursor: pointer; transition: .16s;
}
.isup-btn--primary { background: var(--primary); color: #fff; }
.isup-btn--primary:hover { background: var(--primary-hover); }
.isup-btn--ghost { background: #fff; border-color: var(--border); color: var(--stone); }
.isup-btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.isup-btn--block { width: 100%; margin-top: 12px; }
.isup-btn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
.isup-btn:disabled { opacity: .55; cursor: not-allowed; }

.isup-err { min-height: 18px; font-size: 12.5px; color: var(--bad); margin: 8px 0 2px; }
.isup-status { margin-top: 14px; font-size: 12.5px; }
.isup-status__item { padding: 9px 12px; border-radius: 10px; line-height: 1.65; text-align: left; }
.isup-status__item--wait { background: rgba(165,128,79,.10); color: var(--warn); }
.isup-status__item--ok { background: var(--ok-soft); color: var(--ok); }
.isup-status__item--no { background: var(--bad-soft); color: var(--bad); }

/* ── 申请表单弹窗 ── */
.isup-modal {
  position: fixed; inset: 0; z-index: 99999; background: rgba(74,69,63,.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.isup-modal[hidden] { display: none; }
.isup-modal__box {
  width: 100%; max-width: 470px; max-height: 90vh; overflow: auto;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg);
}
.isup-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
  font-size: 15px; color: var(--charcoal);
}
.isup-modal__body { padding: 16px 18px 4px; }
.isup-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 18px 16px; }
.isup-x {
  width: 30px; height: 30px; border: none; background: transparent; font-size: 20px;
  line-height: 1; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.isup-x:hover { background: rgba(0,0,0,.05); }

.isup-row { margin-bottom: 12px; }
.isup-row label { display: block; font-size: 12.5px; color: var(--stone); margin-bottom: 6px; }
.isup-row label i { color: var(--bad); font-style: normal; }
.isup-row input, .isup-row textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 13.5px; font-family: inherit; color: var(--charcoal); background: #fcfbf9; resize: vertical;
}
.isup-row input:focus, .isup-row textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.isup-row--2 { display: flex; gap: 10px; }
.isup-row--2 > div { flex: 1; min-width: 0; }

/* ── 客服抽屉 ── */
.isup-chat {
  position: fixed; top: 0; right: 0; bottom: 0; width: 396px; max-width: 100vw;
  z-index: 100000; background: #fff; box-shadow: -8px 0 32px rgba(96,85,74,.15);
  display: flex; flex-direction: column;
}
.isup-chat[hidden] { display: none; }
.isup-chat__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
}
.isup-chat__title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--charcoal); }
.isup-badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; }
.isup-badge--ai { background: var(--primary-soft); color: var(--primary); }
.isup-badge--wait { background: rgba(165,128,79,.16); color: var(--warn); }
.isup-badge--human { background: var(--ok-soft); color: var(--ok); }
.isup-badge--off { background: rgba(0,0,0,.06); color: var(--muted); }

.isup-chat__body { flex: 1; overflow: auto; padding: 14px 14px 6px; background: #faf8f5; }
.isup-msg { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 93%; }
.isup-msg--me { margin-left: auto; align-items: flex-end; }
.isup-msg--ai { margin-right: auto; align-items: flex-start; }
.isup-msg__tag { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; padding-left: 2px; }
.isup-msg__tag--human { color: var(--ok); font-weight: 600; }
.isup-msg__b {
  padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.72;
  word-break: break-word; white-space: normal;
}
.isup-msg--me .isup-msg__b { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.isup-msg--ai .isup-msg__b { background: #fff; color: var(--charcoal); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; }
.isup-msg__t { font-size: 10.5px; color: #b3a99d; margin-top: 3px; }
.isup-sys { text-align: center; font-size: 12px; color: var(--muted); margin: 10px 0; line-height: 1.6; }
.isup-sys--bad { color: var(--bad); }
.isup-shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.isup-shots img { width: 88px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
/* 表格附件：消息里显示成「📄 文件名 · 大小」的下载片，不能按图片渲染（会是破图） */
.isup-shots a.isup-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: #fbf9f6; color: var(--charcoal); font-size: 12px; text-decoration: none;
}
.isup-shots a.isup-file:hover { border-color: var(--primary); }
.isup-shots a.isup-file i { font-style: normal; color: var(--muted); font-size: 11px; }

/* 文件选择框：视觉隐藏但要能 .click()（display:none 的 input 在部分浏览器不弹框） */
.isup-file {
  position: fixed; left: -10000px; top: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.isup-chat__attach { display: flex; gap: 8px; padding: 8px 14px 0; flex-wrap: wrap; }
.isup-chat__attach[hidden] { display: none; }
.isup-pend { position: relative; display: inline-block; }
.isup-pend img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
/* 待发送的表格：文件名 chip（超长省略，鼠标悬停看完整名） */
.isup-pend.isup-pend--file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 190px;
  padding: 5px 9px; border-radius: 6px; border: 1px solid var(--border); background: #fbf9f6;
}
.isup-pend.isup-pend--file b {
  font-weight: 600; font-size: 11.5px; color: var(--charcoal);
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.isup-pend.isup-pend--file i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.isup-pend button {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  border: none; background: var(--bad); color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
}

.isup-chat__foot { border-top: 1px solid var(--border-soft); padding: 10px 12px 12px; background: #fff; }
.isup-chat__foot textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; color: var(--charcoal); resize: none; background: #fcfbf9;
}
.isup-chat__foot textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.isup-chat__tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.isup-hint { flex: 1; font-size: 11.5px; color: var(--muted); }

.isup-topbtn { position: relative; }
/* 小猫头像：20px 圆图，和 13px 文字基线对齐（.btn 本身已是 inline-flex + gap 6px） */
.isup-topbtn__ico {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  display: block; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(122,110,98,.18);
  /* 呼吸动效：只动 transform + filter，不动 box-shadow —— 否则会盖掉 hover 描边 */
  transform-origin: 50% 50%;
  animation: isupBreath 3.4s ease-in-out infinite;
  will-change: transform;
}
.isup-topbtn:hover .isup-topbtn__ico {
  box-shadow: 0 0 0 2px var(--primary);
  animation-duration: 1.6s;          /* 悬停时呼吸快一点，像被叫醒 */
}
@keyframes isupBreath {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(117,133,95,0)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(117,133,95,.55)); }
}
/* 客服面板打开时停下：正在看内容，动画在余光里晃会烦 */
body.isup-chat-open .isup-topbtn__ico { animation-play-state: paused; }
/* 系统开了"减少动态效果"就完全静止（前庭敏感人群） */
@media (prefers-reduced-motion: reduce) {
  .isup-topbtn__ico { animation: none; }
}
/* 未读点：原来是 right:6px（压在文字上），现在放到头像右上角 */
.isup-topbtn--dot::after {
  content: ''; position: absolute; top: 3px; left: 19px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 0 1.5px #fff;
}

.isup-tip {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(12px);
  background: rgba(74,69,63,.94); color: #fff; font-size: 13px; padding: 9px 16px;
  border-radius: 20px; opacity: 0; pointer-events: none; transition: .22s; z-index: 100001;
}
.isup-tip--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.isup-tip--bad { background: rgba(165,96,90,.96); }

@media (max-width: 520px) { .isup-chat { width: 100vw; } }

/* ── 左栏「联动说明」条：点地块但左栏没有对应行时，说清原因（2026-10-30） ──
   东吕洼 237 块确权地里 64 块（27%）的权利人不在本次投保清单，点它们左栏必然不高亮；
   以前静默无反馈，用户以为联动坏了。 */
.linkhint {
  margin: 0 10px 6px; padding: 6px 10px; border-radius: 8px;
  background: #fff8e6; border: 1px solid #f0e0b8; color: #8a6d1f;
  font-size: 12px; line-height: 1.6;
}
.linkhint b { color: #7a5c10; font-weight: 700; }
