.al2-map-page {
  --map-line: color-mix(in srgb, var(--color-primary) 58%, #7f8aa6);
  --map-branch: color-mix(in srgb, var(--text-secondary) 48%, transparent);
  --map-trunk: color-mix(in srgb, var(--color-accent) 72%, var(--color-primary));
  --map-chrome-mid: #e8ebf8;
  --map-chrome-deep: #a99ac9;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 0 !important;
  background: var(--bg-body);
}

[data-theme="dark"] .al2-map-page {
  --map-chrome-mid: #7c7198;
  --map-chrome-deep: #2e2451;
}

[data-theme="pink"] .al2-map-page {
  --map-chrome-mid: #ffe6f4;
  --map-chrome-deep: #d899c4;
}

.al2-map-page #world-map-root {
  height: max(680px, calc(100dvh - 140px));
  min-height: 680px;
}

.map-loading {
  min-height: 680px;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--text-secondary);
  font-weight: 700;
}

.map-database {
  height: 100%;
  display: grid;
  grid-template-rows: 74px 58px minmax(0, 1fr);
  color: var(--text-main);
  background-color: var(--bg-body);
  background-image: var(--bg-pattern);
  background-size: var(--bg-size);
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.map-toolbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(260px, 620px) auto;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .72);
  background: var(--bg-card);
  box-shadow: 0 10px 30px rgba(53, 41, 99, .12), inset 0 -1px rgba(123, 84, 184, .12);
  backdrop-filter: blur(var(--backdrop-blur));
}

.map-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.map-title > svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.26));
  color: var(--color-primary);
  box-shadow: inset 0 1px #fff, 0 7px 16px rgba(73, 45, 135, .14);
}
.map-title > span { min-width: 0; display: grid; gap: 1px; }
.map-title strong { color: var(--color-primary); font-size: 19px; line-height: 1.2; white-space: nowrap; }
.map-title small { color: var(--text-secondary); font-size: 10px; letter-spacing: .05em; white-space: nowrap; }

.map-search-group { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.map-search { position: relative; display: flex; align-items: center; min-width: 0; }
.map-search > svg { position: absolute; z-index: 2; left: 15px; width: 18px; color: var(--text-secondary); }
.map-search input {
  width: 100%;
  height: 46px;
  margin: 0 !important;
  padding: 0 16px 0 46px !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 16px !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 7px 18px rgba(67, 43, 126, .08);
  font: 500 14px/1 "Noto Sans TC", sans-serif !important;
}
.map-search input:focus { border-color: var(--color-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.map-search-results {
  position: absolute;
  top: 54px;
  right: 0;
  left: 0;
  z-index: 50;
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px;
  background: #f8fbff;
  box-shadow: 0 22px 55px rgba(59, 40, 110, .25);
  backdrop-filter: blur(24px);
}
.map-search-results button,
.drop-search-results button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 15%, transparent);
  background: transparent;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}
.map-search-results button:hover,
.drop-search-results button:hover { border-radius: 11px; background: color-mix(in srgb, var(--color-primary) 9%, transparent); color: var(--color-primary); }
.map-search-results button span,
.map-search-results button small,
.drop-search-results button span,
.drop-search-results button small { color: var(--text-secondary); font-size: 10px; }
.map-search-results button strong,
.drop-search-results button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-copy { min-width: 0; display: grid; gap: 2px; }
.result-copy > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-search-results p,
.drop-search-results p { margin: 0; padding: 18px; color: var(--text-secondary); text-align: center; }

.drop-search-toggle {
  min-width: 104px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--color-primary));
  color: var(--color-primary);
  box-shadow: inset 0 1px rgba(255,255,255,.85), 0 7px 18px rgba(67,43,126,.08);
  font: 800 12px/1 "Noto Sans TC", sans-serif;
  cursor: pointer;
}
.drop-search-toggle svg { width: 17px; }
.drop-search-toggle:hover,
.drop-search-toggle.active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, var(--bg-card)); }
.drop-search-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 34%, transparent); outline-offset: 2px; }

.drop-search-panel {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 70;
  width: min(720px, calc(100vw - 32px));
  padding: 14px;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 20px;
  background: var(--bg-sidebar);
  box-shadow: 0 24px 70px rgba(43,30,91,.3);
  backdrop-filter: none;
}
.drop-search-panel > header { position: sticky; z-index: 6; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; background: #f8fbff; }
html[data-theme="dark"] .drop-search-panel,
html[data-theme="dark"] .drop-search-panel > header { background: #071827; }
.drop-search-panel > header > div { display: grid; gap: 4px; }
.drop-search-panel > header strong { color: var(--color-primary); font-size: 16px; }
.drop-search-panel > header small { color: var(--text-secondary); font-size: 11px; }
.drop-search-panel > header button { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--text-main); cursor: pointer; }
.drop-search-panel > header button svg { width: 18px; }
.drop-search-panel > header button[data-action="close-drop-search"] { position: static !important; display: grid !important; margin-left: auto; }
.drop-search-field { position: relative; display: flex; align-items: center; }
.drop-search-field > svg { position: absolute; left: 15px; width: 18px; color: var(--text-secondary); }
.drop-search-field input { width: 100%; height: 48px; margin: 0 !important; padding: 0 16px 0 46px !important; border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent) !important; border-radius: 15px !important; background: var(--bg-card) !important; color: var(--text-main) !important; font: 600 14px/1 "Noto Sans TC", sans-serif !important; }
.drop-search-field input:focus { border-color: var(--color-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }
.drop-search-results { max-height: min(52vh, 480px); margin-top: 10px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid color-mix(in srgb, var(--text-secondary) 14%, transparent); }

.map-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.map-tools button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: inset 0 1px rgba(255,255,255,.85), 0 5px 13px rgba(58, 39, 111, .08);
  cursor: pointer;
}
.map-tools button:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); }
.map-tools button svg { width: 18px; }
.map-tools output { min-width: 57px; color: var(--color-primary); font-size: 12px; font-weight: 800; text-align: center; }

.component-tabs {
  position: relative;
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 20px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,.74);
  background: color-mix(in srgb, var(--bg-sidebar) 85%, transparent);
  backdrop-filter: blur(16px);
}
.component-tabs button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-secondary);
  font: 700 12px/1 "Noto Sans TC", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.component-tabs button svg { width: 16px; }
.component-tabs button span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
}
.component-tabs button:hover { color: var(--color-primary); }
.component-tabs button.active {
  border-color: rgba(255,255,255,.92);
  background: linear-gradient(180deg, color-mix(in srgb, #fff 64%, var(--color-primary)), var(--color-primary));
  color: #fff;
  box-shadow: inset 0 1px #fff, 0 7px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
  text-shadow: 0 1px rgba(0,0,0,.18);
}
.component-tabs p { margin: 0 0 0 auto; color: var(--text-secondary); font-size: 10px; white-space: nowrap; }

.map-canvas-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--bg-body) 85%, #fff);
  background-image: var(--bg-pattern);
  background-size: var(--bg-size);
  isolation: isolate;
}
.map-canvas-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 26%), radial-gradient(circle at 80% 76%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 30%);
}
.map-canvas-shell > svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.map-canvas-shell > svg:active { cursor: grabbing; }

.world-canvas-band {
  fill: color-mix(in srgb, var(--bg-card) 77%, #d8ddff 8%);
  stroke: rgba(255,255,255,.86);
  stroke-width: 2;
  filter: drop-shadow(0 22px 45px rgba(65,45,124,.08));
}
.component-label text { fill: var(--color-primary); font: 800 28px/1 "Noto Sans TC", sans-serif; letter-spacing: .03em; }
.component-label text tspan { font: 800 14px/1 ui-monospace, monospace; letter-spacing: .12em; }

.cluster-rings { pointer-events: none; }
.cluster-rings .cluster-boundary {
  fill: color-mix(in srgb, var(--bg-card) 10%, transparent);
  stroke: color-mix(in srgb, var(--color-primary) 19%, transparent);
  stroke-width: 1;
  stroke-dasharray: 7 12;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.cluster-rings .cluster-hit {
  fill: transparent;
  stroke: none;
  pointer-events: none;
}
.cluster-edit-mode .cluster-rings { pointer-events: all; }
.cluster-edit-mode .cluster-ring .cluster-boundary {
  fill: color-mix(in srgb, var(--color-accent) 7%, transparent);
  stroke: color-mix(in srgb, var(--color-accent) 62%, #fff);
  stroke-width: 2;
  stroke-dasharray: 10 8;
}
.cluster-edit-mode .cluster-ring .cluster-hit {
  pointer-events: fill;
  cursor: move;
}

.graph-edges path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.graph-edges path { transition: opacity .16s ease, stroke-width .16s ease, stroke .16s ease; }
.graph-edges .side-route,
.graph-edges .main-route,
.graph-edges .region-link.side-route {
  stroke: color-mix(in srgb, var(--map-line) 72%, #8f91ad);
  stroke-width: 1.25;
  opacity: .3;
  filter: none;
}
.overview-mode .graph-edges .main-route,
.overview-mode .graph-edges .side-route { opacity: .22; stroke-width: 1.15; }
.graph-edges .supplemental-link { opacity: .07; stroke-dasharray: 4 7; }
.graph-edges.is-focusing path.dim { opacity: .035; }
.graph-edges.is-focusing path.related {
  opacity: 1;
  stroke: var(--color-accent);
  stroke-width: 3.25;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-accent) 45%, transparent));
}
.graph-edges .edge-hit {
  fill: none;
  stroke: transparent !important;
  stroke-width: 18 !important;
  opacity: 0 !important;
  pointer-events: stroke;
  cursor: pointer;
  filter: none !important;
}
.node-edit-mode .graph-edges .edge-hit,
.cluster-edit-mode .graph-edges .edge-hit { pointer-events: none; }

.graph-node { outline: none; transition: opacity .15s ease; cursor: pointer; }
.node-edit-mode .graph-node { cursor: grab; }
.cluster-edit-mode .graph-node { cursor: move; }
.graph-node.dragging { cursor: grabbing; }
.graph-node.dim { opacity: .16; }
.graph-node .node-aura { fill: color-mix(in srgb, var(--color-primary) 11%, transparent); }
.graph-node .node-ring { fill: rgba(255,255,255,.38); stroke: rgba(255,255,255,.96); stroke-width: 3; filter: drop-shadow(0 7px 13px rgba(66,44,119,.18)); }
.graph-node .node-core { fill: url(#chromeHub); stroke: color-mix(in srgb, var(--color-primary) 52%, #fff); stroke-width: 2; }
.graph-node .node-shadow { fill: rgba(75, 49, 127, .15); }
.graph-node .node-pin { fill: var(--map-line); stroke: rgba(255,255,255,.96); stroke-width: 2; vector-effect: non-scaling-stroke; }
.graph-node .node-card { fill: color-mix(in srgb, var(--bg-card) 86%, #fff); stroke: rgba(255,255,255,.97); stroke-width: 2; filter: drop-shadow(0 6px 12px rgba(67,44,122,.11)); }
.graph-node .node-name {
  fill: var(--text-main);
  font: 700 32px/1 "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  pointer-events: none;
}
.graph-node.hub .node-name { fill: var(--color-primary); font-size: 74px; font-weight: 900; }
.graph-node.map .node-card,
.graph-node.map .node-shadow,
.graph-node.map .node-name { opacity: 0; }
.show-map-labels .graph-node.map .node-card,
.show-map-labels .graph-node.map .node-shadow,
.show-map-labels .graph-node.map .node-name,
.graph-node.map:hover .node-card,
.graph-node.map:hover .node-shadow,
.graph-node.map:hover .node-name,
.graph-node.map.active .node-card,
.graph-node.map.active .node-shadow,
.graph-node.map.active .node-name,
.graph-node.map.neighbor .node-card,
.graph-node.map.neighbor .node-shadow,
.graph-node.map.neighbor .node-name { opacity: 1; }
.show-map-labels .graph-node.map .node-pin,
.graph-node.map:hover .node-pin,
.graph-node.map.active .node-pin,
.graph-node.map.neighbor .node-pin { opacity: 0; }
.graph-node.map:not(:hover):not(.active):not(.neighbor)::after { content: ""; }
.graph-node.map:not(.active) .node-card { transition: fill .15s, stroke .15s; }
.graph-node:hover .node-core,
.graph-node.active .node-core { stroke: var(--color-accent); stroke-width: 4; filter: url(#nodeGlow); }
.graph-node:hover .node-card,
.graph-node.active .node-card { fill: color-mix(in srgb, var(--bg-card) 68%, var(--color-accent)); stroke: #fff; stroke-width: 3; filter: url(#nodeGlow); }
.graph-node:hover .node-name,
.graph-node.active .node-name { fill: color-mix(in srgb, var(--color-primary) 70%, var(--text-main)); }

.canvas-help,
.map-overview,
.map-legend {
  position: absolute;
  z-index: 8;
  border: 1px solid rgba(255,255,255,.92);
  background: var(--bg-card);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 11px 28px rgba(61,40,120,.12);
  backdrop-filter: blur(18px);
}
.cluster-layout-tools {
  position: absolute;
  z-index: 12;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: calc(100% - 390px);
  padding: 8px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 16px;
  background: #f8fbff;
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 11px 28px rgba(61,40,120,.12);
  backdrop-filter: blur(18px);
}
.cluster-layout-tools button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--border-light);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-card) 88%, #fff);
  color: var(--text-main);
  font: 700 11px/1 "Noto Sans TC", sans-serif;
  cursor: pointer;
}
.cluster-layout-tools button:hover,
.cluster-layout-tools button.active {
  border-color: color-mix(in srgb, var(--color-accent) 65%, #fff);
  background: color-mix(in srgb, var(--bg-card) 68%, var(--color-accent));
}
.cluster-layout-tools button svg { width: 16px; height: 16px; color: var(--color-primary); }
.cluster-layout-tools output { padding: 0 8px; color: var(--text-secondary); font-size: 10px; }
.canvas-help { top: 76px; left: 14px; display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; color: var(--text-secondary); font-size: 10px; }
.canvas-help span { display: flex; align-items: center; gap: 7px; }
.canvas-help svg { width: 14px; color: var(--color-primary); }
.map-overview { bottom: 16px; left: 16px; width: 152px; padding: 10px; border-radius: 15px; }
.map-overview strong { display: block; margin-bottom: 7px; color: var(--text-secondary); font-size: 9px; letter-spacing: .08em; }
.map-overview i { height: 10px; display: block; margin-top: 5px; border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.map-overview i:nth-of-type(2) { background: color-mix(in srgb, var(--color-primary) 13%, transparent); }
.map-overview i.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 14%, transparent); }
.map-legend { right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 10px 13px; border-radius: 15px; color: var(--text-secondary); font-size: 9px; }
.map-legend span { display: flex; align-items: center; gap: 7px; }
.map-legend i { display: inline-block; }
.legend-hub { width: 16px; height: 16px; border: 2px solid var(--color-primary); border-radius: 50%; background: rgba(255,255,255,.55); }
.legend-map { width: 23px; height: 13px; border: 2px solid rgba(255,255,255,.92); border-radius: 6px; background: var(--bg-card); }
.legend-trunk { width: 28px; border-top: 3px solid var(--map-trunk); }
.legend-branch { width: 28px; border-top: 2px solid var(--map-branch); }

.map-inspector {
  --inspector-font-micro: 9px;
  --inspector-font-small: 10px;
  --inspector-font-body: 11px;
  --inspector-font-strong: 13px;
  --inspector-font-heading: 14px;
  --inspector-font-title: 26px;
  position: absolute;
  z-index: 14;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: min(480px, calc(100% - 28px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 22px;
  background: var(--bg-sidebar);
  box-shadow: inset 0 1px #fff, 0 24px 60px rgba(61,40,120,.23);
  backdrop-filter: none;
}
.map-inspector.font-step-0 { --inspector-font-micro: 8px; --inspector-font-small: 9px; --inspector-font-body: 10px; --inspector-font-strong: 12px; --inspector-font-heading: 13px; --inspector-font-title: 23px; }
.map-inspector.font-step-2 { --inspector-font-micro: 10px; --inspector-font-small: 12px; --inspector-font-body: 13px; --inspector-font-strong: 15px; --inspector-font-heading: 16px; --inspector-font-title: 30px; }
.map-inspector.font-step-3 { --inspector-font-micro: 11px; --inspector-font-small: 14px; --inspector-font-body: 15px; --inspector-font-strong: 17px; --inspector-font-heading: 18px; --inspector-font-title: 34px; }
.map-inspector.font-step-4 { --inspector-font-micro: 12px; --inspector-font-small: 16px; --inspector-font-body: 17px; --inspector-font-strong: 19px; --inspector-font-heading: 20px; --inspector-font-title: 38px; }
.map-inspector header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent); }
.map-inspector > header { position: sticky; z-index: 8; top: 0; background: #f8fbff; }
html[data-theme="dark"] .map-inspector,
html[data-theme="dark"] .map-inspector > header { background: #071827; }
.map-inspector .inspector-close { position: static !important; display: grid !important; margin-left: auto; }
.inspector-title { min-width: 0; }
.map-inspector header small { color: var(--color-accent); font: 800 var(--inspector-font-micro)/1 ui-monospace, monospace; letter-spacing: .16em; }
.map-inspector h2 { margin: 6px 0 0 !important; color: var(--color-primary); font-size: var(--inspector-font-title); line-height: 1.28; overflow-wrap: anywhere; }
.inspector-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.map-inspector .inspector-actions button { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 12px; background: var(--bg-card); color: var(--text-main); font: 800 12px/1 "Noto Sans TC", sans-serif; cursor: pointer; }
.map-inspector .inspector-actions button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.map-inspector .inspector-actions button:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-accent) 30%, transparent); outline-offset: 2px; }
.map-inspector .inspector-actions button:disabled { opacity: .38; cursor: not-allowed; }
.map-inspector .inspector-actions output { min-width: 38px; color: var(--color-primary); font: 800 10px/1 ui-monospace, monospace; text-align: center; }
.map-inspector .inspector-actions .inspector-close { border-radius: 50%; color: var(--text-secondary); }
.map-inspector .inspector-actions button svg { width: 16px; }
.map-inspector dl { margin: 14px 0; }
.map-inspector dl div { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 13%, transparent); }
.map-inspector dt { color: var(--text-secondary); font-size: var(--inspector-font-body); }
.map-inspector dd { margin: 0; color: var(--color-primary); font-size: var(--inspector-font-body); font-weight: 800; text-align: right; }
.map-description { padding: 12px 13px; border-left: 3px solid var(--color-accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--color-primary) 7%, transparent); color: var(--text-secondary); font-size: var(--inspector-font-body); line-height: 1.7; white-space: pre-line; }
.map-inspector section { margin-top: 20px; }
.map-inspector h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px !important; color: var(--text-main); font-size: var(--inspector-font-heading); }
.map-inspector h3 svg { width: 16px; color: var(--color-accent); }
.neighbor-list { display: grid; gap: 5px; }
.neighbor-list button { min-height: 44px; display: grid; grid-template-columns: minmax(0,1fr) 18px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(255,255,255,.84); border-radius: 12px; background: var(--bg-card); color: var(--text-main); font-size: var(--inspector-font-body); text-align: left; cursor: pointer; }
.neighbor-list button:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateX(2px); }
.neighbor-list button svg { width: 15px; }
.neighbor-list p { margin: 0; padding: 11px; color: var(--text-secondary); font-size: var(--inspector-font-small); }
.boss-drop-section { padding: 14px; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.boss-empty,
.boss-summary,
.drop-disclaimer { margin: 0; color: var(--text-secondary); font-size: var(--inspector-font-small); line-height: 1.65; }
.boss-list { min-width: 0; display: grid; gap: 9px; }
.boss-list > * { min-width: 0; max-width: 100%; }
.boss-card { min-width: 0; max-width: 100%; overflow: clip; border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--bg-card) 88%, #fff); }
.boss-card > summary { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 11px; color: var(--text-main); cursor: pointer; list-style: none; }
.boss-card > summary::-webkit-details-marker { display: none; }
.boss-card > summary:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.boss-card > summary span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.boss-card > summary strong { color: var(--color-primary); font-size: var(--inspector-font-strong); }
.boss-card > summary small { color: var(--text-secondary); font-size: var(--inspector-font-micro); }
.boss-card > summary b { padding: 5px 7px; border-radius: 8px; background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-primary); font-size: var(--inspector-font-micro); }
.boss-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.boss-icon svg { width: 17px; color: var(--color-accent); }
.boss-card-body { min-width: 0; display: grid; gap: 10px; padding: 0 10px 11px; border-top: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent); }
.boss-card-body > p { margin: 9px 0 0; color: var(--text-secondary); font-size: var(--inspector-font-micro); }
.drop-pool { min-width: 0; max-width: 100%; margin-top: 0 !important; padding: 10px; border-radius: 11px; background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.drop-pool > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drop-pool > header strong { color: var(--text-main); font-size: var(--inspector-font-body); }
.drop-pool > header span { color: var(--text-secondary); font: 700 var(--inspector-font-micro)/1 ui-monospace, monospace; }
.drop-pool > p { margin: 6px 0; color: var(--text-secondary); font-size: var(--inspector-font-micro); }
.drop-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
.drop-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--inspector-font-micro); }
.drop-table-wrap th { padding: 6px; border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent); color: var(--text-secondary); font-size: var(--inspector-font-micro); text-align: left; white-space: nowrap; }
.drop-table-wrap th:nth-child(n+2),
.drop-table-wrap td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.drop-table-wrap td { padding: 7px 6px; border-bottom: 1px solid color-mix(in srgb, var(--text-secondary) 10%, transparent); color: var(--text-main); vertical-align: top; }
.drop-table-wrap tbody tr:last-child td { border-bottom: 0; }
.drop-table-wrap tbody tr.search-hit { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.drop-table-wrap td:first-child { min-width: 210px; }
.drop-table-wrap td strong { display: block; color: var(--color-primary); font-size: var(--inspector-font-small); }
.drop-table-wrap td small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: var(--inspector-font-micro); line-height: 1.45; }
.drop-disclaimer { padding-top: 3px; }

@media (max-width: 1080px) {
  .map-toolbar { grid-template-columns: auto minmax(220px, 1fr) auto; gap: 12px; padding-inline: 14px; }
  .map-title small { display: none; }
  .component-tabs p { display: none; }
  .map-legend { max-width: 320px; }
}

@media (max-width: 768px) {
  .al2-map-page #world-map-root { height: max(650px, calc(100dvh - 126px)); min-height: 650px; }
  .map-database { grid-template-rows: 64px 54px minmax(0,1fr); }
  .map-toolbar { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; padding: 8px 12px; }
  .map-title > svg { width: 40px; height: 40px; }
  .map-title > span { display: none; }
  .map-search-group { grid-template-columns: minmax(0,1fr) 44px; gap: 6px; }
  .map-search input { height: 44px; border-radius: 14px !important; font-size: 12px !important; }
  .drop-search-toggle { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 14px; }
  .drop-search-toggle span { display: none; }
  .drop-search-panel { top: 54px; width: calc(100vw - 24px); padding: 12px; border-radius: 18px; }
  .drop-search-panel > header small { font-size: 10px; }
  .map-tools button { width: 38px; height: 38px; }
  .map-tools button:first-child,
  .map-tools button:nth-of-type(2),
  .map-tools output { display: none; }
  .component-tabs { padding: 7px 66px 7px 10px; }
  .component-tabs button { min-height: 38px; padding-inline: 12px; }
  .canvas-help { top: 10px; left: 10px; }
  .map-overview { display: none; }
  .map-legend { right: 10px; bottom: 10px; left: 10px; justify-content: center; }
  .map-inspector { top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; max-height: 58%; border-radius: 20px; }
  .cluster-layout-tools { max-width: calc(100% - 20px); overflow-x: auto; flex-wrap: nowrap; }
  .cluster-layout-tools button { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .component-tabs button:first-child { display: none; }
  .component-tabs { gap: 5px; }
  .component-tabs button { font-size: 10px; }
  .component-tabs button span { display: none; }
  .canvas-help { display: none; }
  .map-legend { grid-template-columns: 1fr 1fr; display: grid; }
  .map-inspector { max-height: 64%; padding: 17px; }
}

@media (max-height: 520px) {
  .map-toolbar { z-index: 1000; backdrop-filter: none; }
  .drop-search-panel {
    position: fixed;
    top: 8px;
    bottom: 8px;
    height: auto;
    max-height: none;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }
  .drop-search-results { min-height: 0; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .map-database *, .map-database *::before, .map-database *::after { transition: none !important; scroll-behavior: auto !important; }
}