/* ============================================================================
   map9 样式 —— 互动地图版式
   深色底、左上概览浮卡、右上两行工具栏、右上标记点图例、左下地图/楼层弹层。
   约束：不使用 border-left 作主装饰；不使用「浅卡+彩条+渐变」模板感组合。
   ========================================================================== */

:root {
  --m9-bg: #0b0f14;
  --m9-panel: #12171f;
  --m9-panel-2: #171d27;
  --m9-line: #263041;
  --m9-line-soft: #1c2534;
  --m9-fg: #e6ebf2;
  --m9-fg-dim: #9aa7b8;
  --m9-fg-mute: #9aa7b8;
  --m9-accent: #2fbf9b;
  --m9-accent-dim: #1d8a70;
  --m9-danger: #ef4444;
  --m9-radius: 10px;
  --m9-radius-sm: 8px;
  --m9-shadow: 0 10px 30px rgba(0,0,0,.45);
  --m9-shadow-sm: 0 3px 12px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html, body.m9-body { margin: 0; padding: 0; }

body.m9-body {
  background: var(--m9-bg);
  color: var(--m9-fg);
  font: 14px/1.5 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.m9-app { display: flex; flex-direction: column; min-height: 0; }

.m9-data-status {
  position: absolute; z-index: 15; left: 50%; bottom: 60px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 8px;
  background: var(--m9-panel); color: var(--m9-fg); border: 1px solid var(--m9-line);
  border-radius: 8px; padding: 7px 10px; font-size: 12px;
}
.m9-data-status[hidden], .m9-data-status button[hidden] { display: none; }
.m9-data-status button { flex: 0 0 auto; color: var(--m9-fg); background: var(--m9-panel-2); border: 1px solid var(--m9-line); border-radius: 5px; padding: 4px 9px; cursor: pointer; }
.m9-tip__condition { white-space: normal; max-width: 260px; margin: 8px 0; }
.m9-tip a { color: #74d9c2; }
.m9-unavailable { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; background: var(--m9-bg); color: var(--m9-fg); }
.m9-unavailable a { color: #74d9c2; }

/* ---------------- 画布区 ---------------- */
.m9-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background:
    radial-gradient(1200px 600px at 30% 0%, rgba(47,191,155,.05), transparent 60%),
    var(--m9-bg);
  overflow: hidden;
}

.m9-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  outline: none;
}
.m9-viewport:active { cursor: grabbing; }
.m9-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--m9-accent); }

.m9-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform-origin: 0 0;
  will-change: transform;
}
.m9-viewport[data-ready="1"] .m9-canvas { transition: none; }

.m9-basemap, .m9-underlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.m9-underlay { z-index: 1; opacity: .1; }  /* 楼层模式：底层压暗到 0.1（对齐参考实现 R$e） */
.m9-basemap { z-index: 2; }
/* ★上面 .m9-basemap/.m9-underlay 的 display:block 会覆盖 [hidden] 的默认
   display:none → JS 设hidden=true 隐藏卫星档下的抽象图时，浏览器仍画出
   「破图图标 + alt 文字」（无 src 的 img 就是这个效果）。
   卫星档实测到 .m9-basemap src="" 却仍占满画布，左上角出现破图图标。
   两个 [hidden] 规则必须显式补回，且放在 display:block 之后才生效。 */
.m9-basemap[hidden], .m9-underlay[hidden] { display: none; }
.m9-tiles { position: absolute; inset: 0; z-index: 1; }
.m9-tiles img { position: absolute; width: 256px; height: 256px; image-rendering: auto; }
.m9-markers { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
/* ★聚合已移除，#m9-hot 不再生成任何 button，只剩这层空 div。
   它原先inset:0+z-index:4 会整层吞掉画布点击（实测 elementFromPoint 恒为 #m9-hot，
   点任何图标都没反应）—— 点位拾取改由引擎 hitTest 负责，
   这层必须 pointer-events:none 让点击穿透到画布。 */
.m9-hot { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.m9-hot button { pointer-events: auto; }

/* ★这里绝不能再写 margin 负偏移做居中：hotzone.js 的 makeNode 已经用
   left/top = info.x - sizePx/2 把按钮中心对到点位上（引擎内联样式）。
   曾经这里还有一条 margin:-11px 0 0 -11px，等于减了第二次 ——
   所有热区按钮恒定偏移 11px（布局坐标），实测屏幕距离 √(10.8²+10.8²)=15.27px，
   比 loot 图标半宽（8+2=10px）还大：既让键盘 focus 圈画偏，
   也会让「按热区矩形取中心点图标」的验收脚本点到空处或邻居点位。
   尺寸也由引擎内联写，这里不重复声明。 */
.m9-hot button {
  position: absolute;
  border: 0; padding: 0; border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.m9-hot button:focus-visible {
  outline: 2px solid var(--m9-accent);
  outline-offset: 1px;
  background: rgba(47,191,155,.18);
}

/* ---------------- 概览卡 ---------------- */
.m9-overview {
  position: absolute;
  top: 14px; left: 14px;
  width: 238px;
  max-height: calc(100% - 28px);
  overflow: auto;
  background: rgba(16,20,27,.92);
  color: var(--m9-fg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  z-index: 6;
}
.m9-overview__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--m9-line-soft);
}
.m9-overview__hd b { font-size: 14px; font-weight: 600; }
.m9-overview__fold {
  width: 22px; height: 22px; border: 1px solid var(--m9-line); border-radius: 6px;
  background: transparent; color: var(--m9-fg-dim); cursor: pointer; line-height: 1;
}
.m9-overview__fold:hover { color: var(--m9-fg); border-color: var(--m9-line); }
.m9-overview__list { margin: 0; padding: 8px 12px 10px; }
.m9-overview__list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 3px 0;
}
.m9-overview__list dt { color: var(--m9-fg-mute); font-size: 12px; white-space: nowrap; }
.m9-overview__list dd { margin: 0; font-size: 12.5px; color: var(--m9-fg); font-variant-numeric: tabular-nums; }
/* 概览卡：三狗所在地（读取本站 goon-tracker 缓存，不直接请求外站） */
.m9-overview__goons {
  margin: 0 12px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--m9-line-soft);
}
.m9-overview__goons-t { color: var(--m9-fg-mute); font-size: 12px; margin-bottom: 6px; }
.m9-overview__goons-list { display: flex; flex-direction: column; gap: 5px; }
.m9-goon-row { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.m9-goon-src {
  flex: 0 0 auto; padding: 1px 5px;
  border: 1px solid var(--m9-line); border-radius: 4px;
  color: var(--m9-fg-dim); font-size: 10px;
}
.m9-goon-map { font-weight: 600; color: var(--m9-fg); }
.m9-goon-age { margin-left: auto; color: var(--m9-fg-mute); font-size: 10px; white-space: nowrap; }
.m9-goon-note, .m9-goon-empty { color: var(--m9-fg-mute); font-size: 10px; line-height: 1.4; }
/* 概览卡 Boss 概率区（参考实现） */
.m9-overview__boss { padding: 2px 12px 10px; }
.m9-overview__boss-t { color: var(--m9-fg-mute); font-size: 12px; margin-bottom: 6px; }
.m9-overview__boss-list { display: flex; flex-direction: column; gap: 5px; }
.m9-boss-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--m9-panel-2);
  border: 1px solid var(--m9-line-soft);
  border-radius: 6px;
  padding: 4px 9px;
}
.m9-boss-chip i { font-style: normal; font-size: 12.5px; color: var(--m9-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m9-boss-chip b { font-weight: 500; font-size: 12px; color: var(--m9-fg-dim); font-variant-numeric: tabular-nums; }

.m9-overview.is-fold .m9-overview__list,
.m9-overview.is-fold .m9-overview__goons,
.m9-overview.is-fold .m9-overview__boss { display: none; }
.m9-overview.is-fold { width: auto; }

/* ---------------- 工具栏 ---------------- */
.m9-toolbar {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
  z-index: 7;
}
.m9-toolbar__row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.m9-seg {
  display: flex;
  background: rgba(16,20,27,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.m9-seg__b {
  border: 0; background: transparent; color: var(--m9-fg-mute);
  padding: 7px 11px; font-size: 13px; cursor: not-allowed;
  border-right: 1px solid var(--m9-line-soft);
}
.m9-seg__b:last-child { border-right: 0; }
.m9-seg__b[aria-pressed="true"] { background: var(--m9-panel-2); color: var(--m9-fg); }

.m9-tb {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(16,20,27,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--m9-fg);
  padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  box-shadow: none;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.m9-tb:hover { background: var(--m9-panel-2); }
.m9-tb--on { border-color: var(--m9-accent-dim); color: var(--m9-accent); background: rgba(47,191,155,.10); }
.m9-tb__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.m9-tb--icon { padding: 7px 9px; }

/* ---------------- 楼层控件 ---------------- */
.m9-levels {
  position: absolute;
  right: 14px; top: 116px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(18,23,31,.94);
  border: 1px solid var(--m9-line);
  border-radius: var(--m9-radius-sm);
  padding: 6px;
  overflow-y: auto;
  z-index: 6;
  box-shadow: var(--m9-shadow-sm);
}
.m9-levels button {
  border: 0; background: transparent; color: var(--m9-fg-dim);
  padding: 6px 12px; border-radius: 5px; font-size: 12.5px; cursor: pointer; text-align: center;
}
.m9-levels button:hover { background: var(--m9-panel-2); color: var(--m9-fg); }
.m9-levels button[aria-checked="true"] { background: #19765f; color: #fff; }
.m9-levelselect { display: none; }

/* ---------------- 搜索 ---------------- */
.m9-search {
  display:flex;flex-direction:column;
  position: absolute;
  top: 62px; right: 14px;
  width: 330px; max-width: calc(100vw - 28px);
  background: rgba(18,23,31,.97);
  border: 1px solid var(--m9-line);
  border-radius: var(--m9-radius);
  box-shadow: var(--m9-shadow);
  z-index: 8;
  overflow: hidden;
}
.m9-search[hidden] { display:none; }
.m9-search__box {
  flex:0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--m9-line-soft);
  color: var(--m9-fg-mute);
}
.m9-search__box input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--m9-fg); font-size: 13px; outline: none;
}
.m9-search__res { max-height:340px;min-height:0;flex:1 1 auto;overflow:auto; }
.m9-search__item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--m9-fg);
  padding: 9px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--m9-line-soft);
}
.m9-search__item:last-child { border-bottom: 0; }
.m9-search__item:hover { background: var(--m9-panel-2); }
.m9-search__item small { color: var(--m9-fg-mute); margin-left: auto; font-size: 11px; }

.m9-search__empty,
.m9-task__empty { padding: 14px 12px; color: var(--m9-fg-mute); font-size: 12.5px; }

/* ---------------- 图例（标记点） ---------------- */
.m9-legend {
  position: absolute;
  top: 62px; right: 14px;
  width: 288px; max-width: calc(100vw - 28px);
  max-height: calc(100% - 90px);
  overflow: auto;
  background: rgba(18,23,31,.97);
  border: 1px solid var(--m9-line);
  border-radius: var(--m9-radius);
  box-shadow: var(--m9-shadow);
  z-index: 8;
  padding: 8px 0 10px;
}
.m9-lg-grp { padding: 4px 0; }
.m9-lg-grp__h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 14px 4px;
  color: var(--m9-fg-mute); font-size: 12px;
}
.m9-lg-grp__ck { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.m9-lg-row {
  display: flex; align-items: center; gap: 9px;
  color: var(--m9-fg);
  padding: 6px 14px; cursor: pointer;
}
.m9-lg-row:hover { background: var(--m9-panel-2); }
.m9-lg-row__ic {
  width: 20px; height: 20px; flex: 0 0 20px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .95;
}
.m9-lg-row__tx { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--m9-fg); }
.m9-lg-row__n { color: var(--m9-fg-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.m9-lg-row input { accent-color: var(--m9-accent); width: 14px; height: 14px; cursor: pointer; }
.m9-lg-row.is-parent { padding-left: 14px; }
.m9-lg-row.is-sub { padding-left: 34px; }
.m9-lg-row.is-sub .m9-lg-row__ic { width: 17px; height: 17px; flex-basis: 17px; }

/* ---------------- 地图切换（左下；2026-10-15 重叠治理误删后重构：@media 移动端覆盖规则幸存，反推主口径 left14/bottom14；visual 门禁口径 高28-40/圆角8px） ---------------- */
.m9-mapswitch {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 8;
}
.m9-mapbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(16,20,27,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--m9-fg); font-size: 13px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.m9-mapbtn:hover { border-color: rgba(255,255,255,.16); color: var(--m9-accent); }
.m9-mapbtn svg { flex: 0 0 14px; }
.m9-mapbtn .m9-caret {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7;
}

/* ---------------- 浮层互斥联动（2026-10-15 UI 重叠治理） ---------------- */
/* legend/search 展开期间隐藏右侧楼层条（面板矩形与楼层条相交，z 更高压住后不可点） */
.m9-stage.is-panelopen .m9-levels { display: none; }
/* 右下任务 FAB 的已显示点位数徽标（原任务书头部计数迁移至此） */
.m9-taskfab em {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #14b8a6; color: #04211d;
  font-size: 11px; font-weight: 800; font-style: normal;
}
.m9-taskfab em[hidden] { display: none; }

.m9-mappop {
  position: absolute;
  left: 0; bottom: 46px;
  width: 470px; max-width: calc(100vw - 28px);
  background: rgba(18,23,31,.98);
  border: 1px solid var(--m9-line);
  border-radius: var(--m9-radius);
  box-shadow: var(--m9-shadow);
  overflow: hidden;
}
.m9-mappop__base {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--m9-line-soft);
}
.m9-mappop__base-t { color: var(--m9-fg-mute); font-size: 12px; margin-right: auto; }
.m9-basebtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--m9-line);
  color: var(--m9-fg-dim); border-radius: 6px;
  padding: 5px 10px; font-size: 12.5px; cursor: pointer;
}
.m9-basebtn b { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.m9-basebtn[aria-pressed="true"] { color: var(--m9-accent); border-color: var(--m9-accent-dim); }
.m9-basebtn:disabled { opacity: .4; cursor: not-allowed; }

.m9-mappop__cols { display: flex; max-height: 340px; }
.m9-mappop__col { flex: 1 1 0; overflow: auto; padding: 6px 0; }
.m9-mappop__col--lv { border-left: 1px solid var(--m9-line-soft); }
.m9-mappop__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--m9-fg);
  padding: 7px 14px; cursor: pointer; font-size: 13px;
}
.m9-mappop__item:hover { background: var(--m9-panel-2); }
.m9-mappop__item[aria-selected="true"] { color: var(--m9-accent); }
.m9-mappop__item:disabled { color: var(--m9-fg-mute); cursor: not-allowed; }
.m9-mappop__item em { color: var(--m9-fg-mute); font-style: normal; font-size: 11px; }
.m9-mappop__none { padding: 10px 14px; color: var(--m9-fg-mute); font-size: 12.5px; }

/* ---------------- 悬停提示（参考实现 tooltip） ---------------- */
.m9-tip {
  position: absolute;
  z-index: 12;
  max-width: min(256px, calc(100% - 16px));
  padding: 8px 16px;
  background: #1c1c1c;
  border: 3px solid #2c2c2c;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  word-break: keep-all;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px));
  white-space: nowrap;
}
.m9-tip:after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--m9-tip-arrow-x, calc(50% - 8px));
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #2c2c2c;
}
.m9-tip * { word-break: break-all; }

/* ---------------- 物资图标网格（多物品点位点击展开，2026-10-14 用户裁决） ----------------
   参考实现口径：只有图标、不写名称；每格链接站内物资详情页并新窗口打开。
   ★.m9-tip 本身是 pointer-events:none（纯文字气泡不需要交互），
     网格形态必须显式打开 auto，否则图标点不动。 */
.m9-tip--grid {
  max-width: min(calc(100% - 16px), 420px);
  padding: 8px;
  white-space: normal;
  pointer-events: auto;/* 网格里的 <a> 要能点 */
}
.m9-tip--grid:after { display: none; }   /* 大网格不需要指向箭头 */
.m9-tip__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  /* 最多 94 件，必须限高滚动，否则气泡会盖住整张地图 */
  max-height: min(46vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.m9-tip__item {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, .04);
  line-height: 0;
  transition: border-color .12s ease, background-color .12s ease;
}
.m9-tip__item:hover,
.m9-tip__item:focus-visible {
  border-color: #2fbf9b;
  background: rgba(47, 191, 155, .12);
}
.m9-tip__itemimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.m9-tip[hidden] { display: none; }
/* 单物资 tooltip：只显示物资名称（2026-10-15 用户口径） */
.m9-tip__name { font-size: 13px; font-weight: 600; color: #fff; }
.m9-tip--interactive { pointer-events: auto; white-space: normal; }
.m9-tip--interactive a.m9-tip__name { text-decoration: underline; text-underline-offset: 3px; }
.m9-tip--photo { width: min(300px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 12px; }
.m9-tip__photo { display: block; width: 100%; max-height: min(280px, 32dvh); object-fit: contain; margin-top: 10px; }
.m9-tip__close { float: right; width: 28px; height: 28px; border: 1px solid #555; border-radius: 5px; color: #fff; background: #333; cursor: pointer; }

.m9-tip__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  color: var(--m9-fg-mute);
  font-size: 12px;
}

.m9-tip__bar .m9-tip__close {
  float: none;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.m9-tip.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #2c2c2c;
}

.m9-tip.is-detached::after { display: none; }

.m9-tip.is-clipped {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.m9-tip__hd {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.m9-tip__ic { width: 18px; height: 18px; flex: 0 0 18px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.m9-tip__meta { color: var(--m9-fg-mute); font-size: 11px; margin-top: 3px; }


/* 地图内可点图标：指针反馈（参考实现 hover 换光标） */
.m9-viewport.is-hot { cursor: pointer; }

/* ---------------- 坐标 / toast ---------------- */
.m9-coords {
  position: absolute; right: 14px; bottom: 14px;
  color: var(--m9-fg-mute); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  background: rgba(11,15,20,.6); padding: 4px 8px; border-radius: 6px;
  pointer-events: none;
}
.m9-toast {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: rgba(18,23,31,.97); border: 1px solid var(--m9-line);
  color: var(--m9-fg); padding: 8px 14px; border-radius: 8px;
  font-size: 13px; box-shadow: var(--m9-shadow); z-index: 20;
}

/* ---------------- 移动端 ---------------- */
@media (max-width: 860px) {
  .m9-app { height: calc(100% - 56px); }
  .m9-overview { width: 186px; top: 10px; left: 10px; }
  .m9-overview__list dd { font-size: 12px; }
  .m9-toolbar { top: 10px; right: 10px; gap: 6px; align-items: flex-end; }
  .m9-toolbar__row { gap: 4px; }
  /* 移动端：绘制工具占位整行隐藏；「概览」按钮隐藏（概览卡常显），避免与左下卡片重叠 */
  .m9-seg { display: none; }
  #m9-ovbtn { display: inline-flex; }
  .m9-tb { padding: 7px 9px; gap: 6px; }
  .m9-tb svg { width: 16px; height: 16px; }
  .m9-tb__dot { width: 8px; height: 8px; }
  /* 窄屏：标记点 / 搜索 / 全屏 只留图标，腾出横向空间 */
  .m9-tb__label { display: none; }
  #m9-legendbtn, #m9-searchbtn { padding: 7px 10px; }
  .m9-levels { right: 10px; top: 60px; padding: 0; max-width: calc(100% - 20px); }
  .m9-levels button { display: none; }
  .m9-levelselect {
    display: block; width: 170px; max-width: 100%; min-height: 44px;
    padding: 8px 12px; border: 0; border-radius: var(--m9-radius-sm);
    background: transparent; color: var(--m9-fg); color-scheme: dark;
    font: inherit; font-size: 13px; cursor: pointer;
  }
  .m9-search, .m9-legend { top: 56px; right: 10px; left: 10px; width: auto; }
  .m9-task { width: 100%; max-width: 100%; }
  .m9-mapswitch { left: 10px; bottom: 10px; }
  .m9-mappop { width: calc(100vw - 20px); }
  .m9-coords { display: none; }
}
@media (max-width: 520px) {
  .m9-overview.is-fold { display: none; }
  .m9-legend { width: calc(100vw - 20px); }
  /* ★不要在移动端单独放大控件高度：视觉门禁以「参考实现 32px 按钮高度」为口径，
     移动端放大到 45px 会让 mobile-390 断言 FAIL（复刻一致性优先于触摸友好）。
     曾经试过 padding:12px + min-height:36px + .m9-tb--icon min-height:34px，
     实测 mapbtn 变45px、图标钮34px —— 已回退，保持与桌面端同一尺寸口径。 */
}

/* ---------------- 站点广告：本页（互动地图）不显示 ----------------
   与 map7/app.css 同一口径：地图页需要全幅画布，侧栏/底栏广告会挤压与遮挡。
   只作用于本页，不改共享 shell。 */
body.takefu-shell-header-mode .takefu-api-bottom-ad,
body.takefu-shell-header-mode .takefu-api-side-ad,
body.takefu-shell-header-mode .takefu-api-relay-ad { display: none !important; }

/* 本页是全屏地图：高度链扣掉站内导航高度，避免溢出与滚动条
   （与 map7 --m7-nav-h 同口径；导航是 in-flow sticky，必须显式扣除） */
:root { --m9-nav-h: 64px; }
html, body.m9-body { height: 100%; overflow: hidden; }
.m9-app { height: calc(100% - var(--m9-nav-h)); }

/* ================= 数据加载失败常驻错误卡（2026-10-14 审计 P3-1） ================= */
.m9-fatal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;
  background:#10151c;border:1px solid #2a3442;border-radius:10px;padding:22px 26px;
  max-width:min(420px,86vw);color:#e8eef6;display:flex;flex-direction:column;gap:10px;
  align-items:flex-start;box-shadow:0 18px 50px rgba(0,0,0,.45);}
.m9-fatal b{font-size:15px;}
.m9-fatal p{margin:0;font-size:12.5px;line-height:1.7;color:#9fb0c3;overflow-wrap:anywhere;}
.m9-fatal button{margin-top:2px;padding:7px 18px;border-radius:8px;border:1px solid #3b82f6;
  background:#1d4ed8;color:#fff;font-size:13px;cursor:pointer;}
.m9-fatal button:hover{background:#2563eb;}
/* 视觉隐藏 h1（SEO/a11y；2026-10-14 二轮审计 P3） */
.m9-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* ---------------- 快捷底图切换（右上图层按钮上方；双款底图才显示） ---------------- */
.m9-baseseg {
  display: inline-flex;
  background: rgba(16,20,27,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.m9-bq {
  border: 0; background: transparent; color: var(--m9-fg-mute);
  padding: 7px 11px; font-size: 13px; cursor: pointer;
  border-right: 1px solid var(--m9-line-soft);
}
.m9-bq:last-child { border-right: 0; }
.m9-bq[aria-pressed="true"] { background: var(--m9-panel-2); color: var(--m9-accent); }
.m9-bq:disabled { opacity: .4; cursor: not-allowed; }
/* ★[hidden] 必须显式声明：.m9-toolbar__row 的 display:flex 会压掉 hidden 语义属性
   （与 .m9-basemap[hidden] 同一类坑，读文件看不出来） */
.m9-toolbar__row[hidden] { display: none; }
/* ---------------- 物资点面板：总开关 + 一键筛选地标（2026-10-15 R3） ---------------- */
.m9-lg-master {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--m9-line); border-radius: 8px;
  background: var(--m9-panel-2);
  cursor: pointer; user-select: none;
}
.m9-lg-master input { width: 14px; height: 14px; accent-color: var(--m9-accent); }
.m9-lg-master span { font-size: 13px; color: var(--m9-fg); font-weight: 600; }
.m9-lg-master em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--m9-fg-mute); font-variant-numeric: tabular-nums; }
.m9-lg-preset {
  display: block; width: 100%;
  padding: 7px 10px; margin-bottom: 8px;
  border: 1px solid var(--m9-accent-dim); border-radius: 8px;
  background: transparent; color: var(--m9-accent);
  font-size: 12.5px; cursor: pointer;
}
.m9-lg-preset:hover { background: var(--m9-panel-2); }
/* ---------------- R5：右下任务按钮 / 任务面板 / 任务详情弹窗（2026-10-15） ---------------- */
.m9-taskfab {
  position: absolute; right: 14px; bottom: 34px; z-index: 8;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px;
  background: rgba(16,20,27,.92); border: 1px solid rgba(255,255,255,.08);
  color: var(--m9-fg); font-size: 13px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.m9-taskfab:hover { border-color: var(--m9-accent-dim); color: var(--m9-accent); }
.m9-taskpanel {
  position: absolute; right: 14px; bottom: 82px; z-index: 9;
  width: min(300px, calc(100vw - 28px));
  max-height: min(480px, 62vh);
  display: flex; flex-direction: column;
  background: rgba(13,17,23,.96); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
}
/* ★display 声明会压掉 [hidden]（.m9-toolbar__row 同类坑第三次）——必须显式关 */
.m9-taskpanel[hidden] { display: none; }
/* ★历史遗留同坑：单层图 buildLevels 会设 hidden，但 display:flex 压掉语义 */
.m9-levels[hidden] { display: none; }
.m9-taskpanel__hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--m9-line-soft);
}
.m9-taskpanel__hd b { font-size: 13.5px; color: var(--m9-fg); }
.m9-taskpanel__map { font-size: 11.5px; color: var(--m9-fg-mute); margin-right: auto; }
.m9-taskpanel__x { background: none; border: 0; color: var(--m9-fg-mute); font-size: 16px; cursor: pointer; line-height: 1; }
.m9-taskpanel__x:hover { color: var(--m9-fg); }
.m9-taskpanel__search { padding: 8px 10px; border-bottom: 1px solid var(--m9-line-soft); }
.m9-taskpanel__search input {
  width: 100%; box-sizing: border-box;
  background: var(--m9-panel-2); border: 1px solid var(--m9-line);
  border-radius: 8px; color: var(--m9-fg); font-size: 12.5px; padding: 7px 10px;
}
.m9-taskpanel__search input:focus { outline: none; border-color: var(--m9-accent-dim); }
.m9-taskpanel__list { overflow-y: auto; padding: 6px; }
.m9-tp-row {
  display: grid; grid-template-columns: 18px minmax(0,1fr) auto 34px; gap: 4px 8px; align-items: center;
  padding: 7px 8px; border-radius: 8px; cursor: default;
}
.m9-tp-row:hover { background: rgba(255,255,255,.04); }
.m9-tp-row.is-on { background: rgba(74,222,128,.06); }
.m9-tp-row__ic {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 4px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.m9-tp-row__tx {
  flex: 1 1 auto; font-size: 12.5px; color: var(--m9-fg);
  min-width: 0; white-space: normal; overflow-wrap: anywhere;
  cursor: pointer;
}
.m9-tp-row__tx:hover { color: var(--m9-accent); }
.m9-tp-row__m { flex: 0 0 auto; font-size: 11px; color: var(--m9-fg-mute); }
.m9-tp-row__open {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--m9-line);
  color: var(--m9-fg-mute); border-radius: 6px; font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.m9-tp-row__open:hover { color: var(--m9-accent); border-color: var(--m9-accent-dim); }
/* 同款 teal 拨动开关 */
.m9-sw { position: relative; display: inline-block; width: 34px; height: 19px; flex: 0 0 34px; cursor: pointer; }
.m9-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.m9-sw i {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); transition: background .18s ease;
}
.m9-sw i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: transform .18s ease;
}
.m9-sw input:checked + i { background: #14b8a6; }
.m9-sw input:checked + i::after { transform: translateX(15px); }
/* 任务详情弹窗 */
.m9-taskmodal { position: absolute; inset: 0; z-index: 40; }
.m9-taskmodal__backdrop { position: absolute; inset: 0; background: rgba(4,7,11,.62); }
.m9-taskmodal__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(760px, calc(100vw - 28px)); max-height: min(660px, calc(100% - 24px));
  display: flex; flex-direction: column;
  background: #10151c; border: 1px solid #2a3442; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); overflow: hidden;
}
.m9-taskmodal__hd {
  flex:0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--m9-line-soft);
  background: rgba(255,255,255,.02);
}
.m9-taskmodal__badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--m9-accent); font-size: 13.5px; font-weight: 700;
}
.m9-taskmodal__x {
  margin-left: auto; background: none; border: 0;
  color: var(--m9-fg-mute); font-size: 20px; cursor: pointer; line-height: 1;
}
.m9-taskmodal__x:hover { color: var(--m9-fg); }
.m9-taskmodal__bd { min-height:0;overflow-y:auto;padding:14px 18px 20px; }
.m9-tkm__title h2 { margin: 0 0 8px; font-size: 17px; color: var(--m9-fg); line-height: 1.45; }
.m9-tkm__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.m9-tkm__chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 6px; font-size: 11.5px;
  background: var(--m9-panel-2); border: 1px solid var(--m9-line);
  color: var(--m9-fg-dim);
}
.m9-tkm__chip.is-exp { color: #facc15; border-color: rgba(250,204,21,.35); }
.m9-tkm__chip.is-diff { color: #f97316; border-color: rgba(249,115,22,.35); }
.m9-tkm__loading { color: var(--m9-fg-mute); font-size: 12.5px; padding: 14px 0; }
.m9-tkm__gallery { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.m9-tkm__shot {
  display: block; width: calc(50% - 4px); border-radius: 8px; overflow: hidden;
  border: 1px solid var(--m9-line);
}
.m9-tkm__shot img { display: block; width: 100%; height: auto; }
.m9-tkm__sec { margin-top: 12px; }
.m9-tkm__sec-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.m9-tkm__sec-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--m9-accent-dim); color: #06121f;
  font-size: 12px; font-weight: 800;
}
.m9-tkm__sec-hd span { font-size: 13.5px; font-weight: 700; color: var(--m9-fg); }
.m9-tkm__sec-d {
  margin: 0 0 4px 28px; font-size: 12.5px; line-height: 1.75;
  color: #c3ceda; white-space: pre-line;
}
/* ---------------- R4：标注画板（/map/ ditu2.css 逐字移植，保留 d2- 类名作为模块命名空间） ---------------- */
.m9-stage { --d2-line: rgba(255, 190, 92, .18); --d2-text: #ffe8bd; --d2-muted: #d0a76a; --d2-shadow: 0 18px 46px rgba(0, 0, 0, 0.42); --d2-overlay: rgba(26, 18, 9, .90); }
.d2-drawboard { position: fixed; /* 视口坐标（positionDrawboard 量出 top/left） */
  z-index: 96;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 8px;
  border: 1px solid var(--d2-line);
  border-radius: 12px;
  background: var(--d2-overlay);
  box-shadow: var(--d2-shadow);
  backdrop-filter: blur(14px);
  max-width: min(1120px, calc(100vw - 20px)); }
.d2-drawboard[hidden] { display: none; }
.d2-db-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.d2-db-btn { display: inline-grid;
  place-items: center;
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: var(--d2-text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap; }
.d2-db-btn:hover { border-color: rgba(215, 181, 109, .48); }
.d2-db-btn.is-on { border-color: rgba(215, 181, 109, .72); background: rgba(215, 181, 109, .18); }
.d2-db-btn.is-arm { border-color: rgba(239, 68, 68, .72); background: rgba(239, 68, 68, .16); color: #fca5a5; }
.d2-db-btn.is-off { opacity: .42; cursor: default; }
.d2-db-btn.is-off:hover { border-color: transparent; }
.d2-db-btn--export { border-color: rgba(215, 181, 109, .55);
  background: rgba(215, 181, 109, .14);
  font-weight: 600; }
.d2-db-btn--w { min-width: 28px; padding: 0 6px; }
.d2-db-btn--fold { display: none; }
@media (max-width: 960px) {
.d2-db-btn--fold { display: inline-block; }
}
.d2-db-mini { display: none; align-items: center; gap: 8px; width: 100%; }
.d2-db-mini__tool { min-width: 44px;
  text-align: center;
  color: var(--d2-text, #e5e0d4);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap; }
.d2-db-mini__dot { width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--db, #3b82f6);
  border: 2px solid rgba(255, 255, 255, .35);
  flex: 0 0 auto; }
.d2-db-mini .d2-db-btn { margin-left: auto; }
.d2-db-mini .d2-db-btn + .d2-db-btn { margin-left: 0; }
@media (max-width: 960px) {
.d2-drawboard[data-folded] > :not(.d2-db-mini) { display: none !important; }
.d2-drawboard[data-folded] .d2-db-mini { display: flex; }
.d2-drawboard[data-folded] { padding: 5px 8px; }
}
.d2-db-listpanel { position: fixed;
  z-index: 96;
  max-height: 340px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--d2-line);
  border-radius: 12px;
  background: var(--d2-overlay);
  box-shadow: var(--d2-shadow);
  backdrop-filter: blur(14px); }
.d2-db-listpanel[hidden] { display: none; }
.d2-db-numstart { flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px; }
.d2-db-numstart[hidden] { display: none; }
.d2-db-numstart label { color: var(--d2-muted, #8a8776); font-size: 11px; white-space: nowrap; }
.d2-db-numstart input { width: 64px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--d2-line);
  border-radius: 6px;
  background: rgba(0, 0, 0, .35);
  color: var(--d2-text, #e5e0d4);
  font-size: 13px;
  outline: none; }
.d2-db-numstart input:focus { border-color: rgba(215, 181, 109, .62); }
.d2-db-hint2 { color: var(--d2-muted, #8a8776); font-size: 11px; white-space: nowrap; }
.d2-db-arrowstyles { flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 6px; }
.d2-db-arrowstyles[hidden] { display: none; }
.d2-db-astyle { display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--d2-line, rgba(255, 255, 255, .14));
  border-radius: 7px;
  background: transparent;
  color: var(--d2-text, #e5e0d4);
  font-size: 11px;
  cursor: pointer; }
.d2-db-astyle:hover { border-color: rgba(215, 181, 109, .55); }
.d2-db-astyle.is-on { border-color: rgba(215, 181, 109, .8); background: rgba(215, 181, 109, .14); color: #ecd9ac; }
.d2-db-fonts { flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px; }
.d2-db-fonts[hidden] { display: none; }
.d2-db-font { padding: 3px 12px;
  border: 1px solid var(--d2-line, rgba(255, 255, 255, .14));
  border-radius: 7px;
  background: transparent;
  color: var(--d2-text, #e5e0d4);
  font-size: 13px;
  cursor: pointer; }
.d2-db-font:hover { border-color: rgba(215, 181, 109, .55); }
.d2-db-font.is-on { border-color: rgba(215, 181, 109, .8); background: rgba(215, 181, 109, .14); color: #ecd9ac; }
.d2-db-slider input[type="range"] { width: 110px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: #d7b56d;
  cursor: pointer; }
.d2-db-slider input[type="range"]:focus-visible { outline: 1px solid rgba(215, 181, 109, .6); outline-offset: 2px; }
.d2-db-lab { color: var(--d2-muted, #8a8776); font-size: 11px; white-space: nowrap; }
.d2-db-wout { min-width: 14px;
  text-align: center;
  color: var(--d2-text, #e5e0d4);
  font-size: 11px;
  font-variant-numeric: tabular-nums; }
.d2-db-split { display: inline-flex; align-items: center; }
.d2-db-split .d2-db-btn--export { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.d2-db-btn--caret { min-width: 20px;
  padding: 0 4px;
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }
.d2-db-menu { position: absolute;
  top: calc(100% + 6px);
  right: 8px;
  z-index: 97;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-overlay);
  box-shadow: var(--d2-shadow);
  backdrop-filter: blur(14px); }
.d2-db-menu[hidden] { display: none; }
.d2-db-menu button { padding: 8px 10px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--d2-text);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap; }
.d2-db-menu button:hover { border-color: rgba(215, 181, 109, .48); background: rgba(255, 255, 255, .06); }
.d2-db-color { width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  background: var(--db, #3b82f6);
  cursor: pointer; }
.d2-db-color.is-on { border-color: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .38); }
.d2-db-hint { margin: 0 2px; color: var(--d2-muted); font-size: 11px; white-space: nowrap; }
.d2-db-text { position: fixed;
  z-index: 98;
  transform: translate(-50%, -50%); }
.d2-db-text[hidden] { display: none; }
.d2-db-text input { width: 120px;
  padding: 1px 8px;
  border: 1px solid rgba(215, 181, 109, .6);
  border-radius: 6px;
  background: rgba(8, 11, 14, .82);
  color: #e5e0d4;
  font-family: inherit;
  font-weight: 700;
  outline: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.d2-db-text input::placeholder { color: rgba(255, 255, 255, .38); font-weight: 400; }
.d2-db-text input:focus { border-color: rgba(255, 240, 202, .92); }
.d2-draw-layer { position: absolute; left: 0; top: 0; z-index: 40; transform-origin: 0 0; pointer-events: none; overflow: visible; }
.d2-draw-layer [data-stroke] { stroke-width: calc(var(--sw, 3) * 1px * var(--d2-draw-inv, 1)); }
.d2-draw-layer [data-stroke].is-dash { stroke-dasharray: calc(var(--sw, 3) * 2.4px * var(--d2-draw-inv, 1)) calc(var(--sw, 3) * 1.7px * var(--d2-draw-inv, 1)); }
.d2-draw-layer circle[data-dot] { r: calc(var(--sw, 3) * 1px * var(--d2-draw-inv, 1) * var(--rf, 1.12)); }
.d2-draw-layer circle[data-num] { r: calc(var(--nr, 15) * 1px * var(--d2-draw-inv, 1)); }
.d2-draw-layer text.d2-numt { font-size: calc(var(--tf, 17px) * var(--d2-draw-inv, 1));
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none; }
.d2-draw-layer.is-hidden { display: none; }
.d2-draw-layer .d2-selbox { fill: none;
  stroke: rgba(255, 240, 202, .92);
  stroke-width: calc(1.5px * var(--d2-draw-inv, 1));
  stroke-dasharray: calc(6px * var(--d2-draw-inv, 1)) calc(4px * var(--d2-draw-inv, 1)); }
.d2-draw-layer .d2-selhandle { r: calc(7px * var(--d2-draw-inv, 1));
  fill: #fff;
  stroke: rgba(17, 24, 39, .92);
  stroke-width: calc(1.6px * var(--d2-draw-inv, 1)); }
.d2-db-color--custom { position: relative;
  display: grid;
  place-items: center;
  background: conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
  overflow: hidden; }
.d2-db-color--custom.has-color { background: var(--db, #3b82f6); }
.d2-db-color--custom::after { content: "＋";
  color: rgba(255, 255, 255, .95);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  pointer-events: none; }
.d2-db-color--custom input { position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer; }
.d2-draw-layer text.d2-dtext { font-size: calc(var(--tf, 16px) * var(--d2-draw-inv, 1));
  font-family: var(--ff, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, .82);
  stroke-width: calc(var(--sw, 3) * 1.2px * var(--d2-draw-inv, 1));
  stroke-linejoin: round;
  user-select: none; }
@media (max-width: 960px) {
.d2-db-hint { display: none; }
.d2-drawboard { gap: 4px 6px; padding: 5px 6px; }
.d2-db-btn { height: 28px; padding: 0 7px; }
.d2-db-slider input[type="range"] { width: 88px; }
}

/* Existing controls extended for small screens and selected-task preparation. */
.m9-zoom { position:absolute;left:12px;bottom:76px;z-index:11;display:flex;gap:3px; }
.m9-zoom button,.m9-overlap button,.m9-taskfilters button,.m9-taskfilters select { min-height:36px;border:1px solid var(--m9-line);border-radius:6px;background:var(--m9-panel);color:var(--m9-fg);padding:5px 10px;cursor:pointer; }
.m9-overlap { color:var(--m9-fg);position:absolute;z-index:31;left:12px;bottom:120px;width:min(350px,calc(100% - 24px));max-height:45%;overflow:auto;padding:10px;border:1px solid var(--m9-line);border-radius:8px;background:var(--m9-panel); }
.m9-overlap[hidden],.m9-coverage[hidden] { display:none; }
.m9-overlap button { display:block;width:100%;text-align:left;margin:4px 0; }
.m9-overlap__head { position:sticky;top:-10px;z-index:1;display:flex;align-items:center;gap:8px;padding:4px 0 8px;background:var(--m9-panel); }
.m9-overlap__head strong { flex:1;color:var(--m9-fg);font-size:12px; }
.m9-overlap__head button { width:auto;min-width:44px;flex:0 0 auto;margin:0;text-align:center; }
.m9-stage.is-taskpanelopen .m9-zoom,.m9-stage.is-taskpanelopen .m9-coverage { visibility:hidden; }
.m9-tkm__retry { margin-left:8px;padding:8px 12px;border:1px solid var(--m9-line);border-radius:6px;background:var(--m9-panel-2);color:var(--m9-fg);cursor:pointer; }
.m9-taskfilters { display:flex;flex-wrap:wrap;gap:5px;padding:8px 12px; }
.m9-taskfilters select { max-width:47%;font-size:12px; }
.m9-taskfilters button[aria-pressed=true] { border-color:var(--m9-accent); }
.m9-tasksummary { max-height:30vh;overflow:auto;padding:0 12px;font-size:12px;flex:0 1 auto; }
.m9-tasksummary>div { border-bottom:1px solid var(--m9-line);padding:6px 0; }
.m9-tasksummary button { background:none;border:0;color:var(--m9-accent);padding:4px 0;cursor:pointer;text-align:left; }
.m9-tasksummary p { margin:4px 0;color:var(--m9-fg-dim); }
.m9-tp-row__ic { grid-column:1;grid-row:1; }
.m9-tp-row__tx { grid-column:2;grid-row:1; }
.m9-tp-row__open { grid-column:3;grid-row:1; }
.m9-tp-row .m9-sw { grid-column:4;grid-row:1; }
.m9-tp-row__m { grid-column:2 / -1;grid-row:2;overflow-wrap:anywhere; }
.m9-tasksummary strong { color:var(--m9-fg); }
.m9-taskpanel__hd,.m9-taskpanel__search,.m9-taskfilters { flex-shrink:0; }
.m9-taskpanel__list { flex:1 1 140px;min-height:100px; }
.m9-tasksummary:not(:empty) { min-height:100px; }
.m9-fact-note { display:block;width:100%;font-size:11px;color:var(--m9-fg-dim); }
.m9-coverage { color:var(--m9-fg);position:absolute;left:12px;top:180px;z-index:10;max-width:min(320px,calc(100% - 24px));padding:8px 10px;border:1px solid var(--m9-line);border-radius:8px;background:var(--m9-panel);font-size:12px; }
.m9-stage.is-panelopen .m9-coverage { display:none; }
 @media (pointer:coarse) { .m9-zoom button,.m9-overlap button,.m9-taskpanel__x,.m9-taskmodal__x { min-width:44px;min-height:44px; } }
@media (max-height:600px) {
  .m9-stage.is-panelopen .m9-zoom { visibility:hidden; }
  .m9-taskpanel { top:10px;bottom:82px;max-height:none;display:block;overflow-y:auto; }
  .m9-taskpanel__hd { position:sticky;top:0;z-index:1;background:var(--m9-panel); }
  .m9-taskpanel__list { min-height:0;max-height:none;overflow:visible; }
  .m9-tasksummary { max-height:none;overflow:visible; }
}