/* ==========================================================================
   文章型页面新模板（LightSNS 配色）—— article-lightsns-data.css
   --------------------------------------------------------------------------
   适用：数据/物资/画质/全景/3D地图/剧情 等「文章型」静态页，以及「带网址的
        跳转文章页」（客户端中转页）。任务页/物品页/资源页仍用各自原有样式表。

   ★ 本文件是**独立新增**，所有 class 一律 `lsa-`（LightSNS Article）前缀，
     不覆盖、不依赖任何既有选择器 → 对已有模板零影响。

   ★★ 链接色必须打「特异性 + !important」这一仗
     外壳有站点级规则 `body.takefu-shell-ready:not(.takefu-theme-protected) a
     { color: var(--tf-plum) !important }`（特异性 0,2,2），会把本模板里所有
     链接刷成品牌红 #c83a1d。因此本文件里凡是以 `a` 结尾的选择器，一律加前缀
     `html body.takefu-shell-ready .lsa-main`（抬到 0,2,3 以上）并保留 !important。
     → 想把链接换回站点品牌红，只改下面 --lsa-link 一个变量即可。

   ★ 版面：左 = 文章目录（竖排，粘性）；中 = 正文白卡；右 = 3D地图 / 互动地图 小卡片。
   ★ 配色取自 lightsns.com 官方 CSS 变量（/pc/bundle/base.css?v=01391）：
        --ls-primary #3b82f6  --ls-primary-hover #2563eb  --ls-primary-light #eff6ff
        --ls-bg-hover #f1f5f9  --ls-card-bg #ffffff  --ls-border #e5e7eb
        --ls-border-light #f3f4f6  --ls-text #1f2937  --ls-text-secondary #4b5563
        --ls-text-muted #9ca3af  --ls-radius 6px / -lg 8px / -xl 12px
   ★ 项目硬规则：卡片禁止用 border-left 竖色条做装饰；不用渐变、不用发光。
   ========================================================================== */

.lsa-main {
  --lsa-primary: #3b82f6;
  --lsa-primary-hover: #2563eb;
  --lsa-primary-light: #eff6ff;
  --lsa-link: var(--lsa-primary-hover);
  --lsa-card: #ffffff;
  --lsa-line: #e5e7eb;
  --lsa-line-light: #f3f4f6;
  --lsa-ink: #1f2937;
  --lsa-ink-2: #4b5563;
  --lsa-muted: #9ca3af;
  --lsa-hover: #f1f5f9;
  --lsa-soft: #f8fafc;
}

.lsa-wrap {
  width: min(1392px, calc(100% - 48px));
  margin: 0 auto;
  padding: 14px 0 40px;
}

/* ---------- 面包屑 ---------- */
.lsa-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--lsa-muted) !important;
  font-size: 13px;
  line-height: 1.6;
}
.lsa-crumb i { font-size: 11px; color: #cbd5e1; }
html body.takefu-shell-ready .lsa-main .lsa-crumb a { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-crumb a:hover { color: var(--lsa-link) !important; }

/* ---------- 三栏骨架 ---------- */
.lsa-layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
}

/* ---------- ★ sticky 前提：把 body 的 overflow-x 从 hidden 换成 clip ----------
   seo-ux.css 有 `html, body { overflow-x: hidden }`。按 CSS 规范，某一轴非 visible 时
   另一轴的 visible 会计算成 auto → body 变成「自己的滚动容器」，而它自身并不滚动
   → 其后代 `position: sticky` **永久失效**（实测滚动 1200px 后目录 top 从 84 掉到 -1089）。
   `overflow-x: clip` 同样横向裁切，但**不创建滚动容器** → sticky 恢复正常。
   注：任务页/物品页没加载 seo-ux.css，所以它们的 sticky 本来就是好的。 */
html body.article-modern-page { overflow-x: clip; }

/* ---------- 左：文章目录（竖线 + 圆点轨道款）----------
   按用户口径：不要外壳（无边框/无底色/无阴影），沿左侧一条竖线，
   每项一颗圆点骑在线上；当前项圆点变实心蓝 + 光圈，文字变蓝加粗。
   （属 AGENTS.md 允许的「active menu/list selection states」，非装饰竖条。） */
.lsa-main {
  --lsa-toc-line: #e5e7eb;
  --lsa-toc-dot: #cbd5e1;
  --lsa-toc-active-bg: #3b82f6;
  --lsa-toc-active-ink: #ffffff;
  --lsa-toc-ring: #f5f6f7;
}

.lsa-toc {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 2px;
  margin-left: 10px;
  background: transparent;
}
.lsa-toc::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--lsa-toc-line);
  content: "";
}
.lsa-toc a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0 0 20px;
  overflow: visible;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s ease;
}
.lsa-toc a .lsa-toc__label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lsa-toc a::before {
  position: absolute;
  top: 50%;
  left: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lsa-toc-dot);
  content: "";
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px var(--lsa-toc-ring);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.lsa-toc__note {
  position: relative;
  margin: 6px 0 0;
  padding: 10px 0 2px 18px;
  border-top: 1px solid var(--lsa-line-light);
  color: var(--lsa-muted) !important;
  font-size: 12px;
  line-height: 1.6;
}
html body.takefu-shell-ready .lsa-main .lsa-toc a { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-toc a:hover { color: var(--lsa-ink) !important; }
html body.takefu-shell-ready .lsa-main .lsa-toc a:hover::before {
  background: #94a3b8;
  box-shadow: 0 0 0 3px var(--lsa-toc-ring);
  transform: translateY(-50%) scale(1.15);
}
html body.takefu-shell-ready .lsa-main .lsa-toc a.is-current { color: var(--lsa-primary-hover) !important; font-weight: 700; }
html body.takefu-shell-ready .lsa-main .lsa-toc a.is-current::before {
  background: var(--lsa-toc-active-bg);
  box-shadow: 0 0 0 3px var(--lsa-toc-ring), 0 0 0 5px rgba(59, 130, 246, 0.18);
  transform: translateY(-50%) scale(1.12);
}
html body.takefu-shell-ready .lsa-main .lsa-toc__note a { display: inline; min-height: 0; padding: 0; font-size: 12px; font-weight: 500; color: var(--lsa-link) !important; }

/* ---------- 中：正文卡 ---------- */
.lsa-card {
  min-width: 0;
  padding: 22px 24px 28px;
  border: 1px solid #e3e9ef;
  border-radius: 8px;
  background: var(--lsa-card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.04);
}
.lsa-head { margin: 0 0 4px; }
.lsa-head h1 {
  margin: 0 0 12px;
  color: var(--lsa-ink) !important;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
}
.lsa-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--lsa-line-light);
  color: var(--lsa-muted) !important;
  font-size: 13px;
}
.lsa-meta span { display: inline-flex; align-items: center; gap: 5px; }
.lsa-meta i { color: #cbd5e1; }
html body.takefu-shell-ready .lsa-main .lsa-meta a { color: var(--lsa-link) !important; }

.lsa-lede {
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--lsa-line-light);
  border-radius: 8px;
  background: var(--lsa-soft);
  color: var(--lsa-ink-2) !important;
  font-size: 13.5px;
  line-height: 1.8;
}

/* ---------- 正文排版 ---------- */
.lsa-content { color: var(--lsa-ink-2); font-size: 14px; line-height: 1.85; }
.lsa-content > *:first-child { margin-top: 0; }
.lsa-content h2 {
  margin: 30px 0 12px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--lsa-line-light);
  color: var(--lsa-ink) !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  scroll-margin-top: 84px;
}
.lsa-content h3 {
  margin: 22px 0 10px;
  color: var(--lsa-ink) !important;
  font-size: 15px;
  font-weight: 500;
  scroll-margin-top: 84px;
}
.lsa-content p { margin: 0 0 16px; }
.lsa-content strong { color: var(--lsa-ink); font-weight: 500; }
html body.takefu-shell-ready .lsa-main .lsa-content a { color: var(--lsa-link) !important; }
html body.takefu-shell-ready .lsa-main .lsa-content a:hover { text-decoration: underline; }

.lsa-content ul,
.lsa-content ol { margin: 0 0 18px; padding: 0; list-style: none; }
.lsa-content ul li,
.lsa-content ol li { position: relative; margin: 0 0 8px; padding-left: 17px; line-height: 1.8; }
.lsa-content ul li::before {
  position: absolute;
  top: 10px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #93c5fd;
  content: "";
}
.lsa-content ol { counter-reset: lsa-ol; }
.lsa-content ol li { padding-left: 24px; }
.lsa-content ol li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--lsa-primary-light);
  color: var(--lsa-primary-hover) !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  content: counter(lsa-ol);
  counter-increment: lsa-ol;
}

.lsa-content table {
  width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--lsa-line);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13.5px;
}
.lsa-content th,
.lsa-content td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--lsa-line-light);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.lsa-content th {
  width: 104px;
  background: var(--lsa-soft);
  color: var(--lsa-ink-2) !important;
  font-weight: 500;
}
.lsa-content td { color: var(--lsa-ink); }
.lsa-content tr:last-child th,
.lsa-content tr:last-child td { border-bottom: 0; }
.lsa-content blockquote {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--lsa-line-light);
  border-radius: 8px;
  background: var(--lsa-soft);
  color: var(--lsa-ink-2) !important;
}

/* 位置截图：两列网格（沿用既有 .article-shot-grid 语义，不改正文 HTML） */
.lsa-content .article-shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.lsa-content .article-shot-grid .article-image-paragraph { margin: 0; }
.lsa-content .article-image-paragraph img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--lsa-line);
  border-radius: 8px;
  background: var(--lsa-soft);
}
.lsa-content .article-modern-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--lsa-line-light);
}
.lsa-content .article-modern-tags a {
  padding: 4px 10px;
  border: 1px solid var(--lsa-line);
  border-radius: 999px;
  background: var(--lsa-soft);
  font-size: 12px;
  text-decoration: none;
}
html body.takefu-shell-ready .lsa-main .lsa-content .article-modern-tags a { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-content .article-modern-tags a:hover { border-color: #bfdbfe; background: var(--lsa-primary-light); color: var(--lsa-link) !important; }

/* ---------- 右：3D地图 / 互动地图 小卡片 ---------- */
.lsa-side {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.lsa-mapcard {
  padding: 12px;
  border: 1px solid #e3e9ef;
  border-radius: 8px;
  background: var(--lsa-card);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.04);
}
.lsa-mapcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 11px;
}
.lsa-mapcard__head h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--lsa-ink) !important;
  font-size: 14px;
  font-weight: 500;
}
.lsa-mapcard__head h2 i { color: var(--lsa-primary); font-size: 14px; }
.lsa-mapcard__head a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  text-decoration: none;
}
.lsa-mapcard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.lsa-mapcard__grid a {
  display: block;
  padding: 7px 5px;
  overflow: hidden;
  border: 1px solid var(--lsa-line-light);
  border-radius: 6px;
  background: var(--lsa-soft);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lsa-mapcard__list { margin: 0; padding: 0; list-style: none; }
.lsa-mapcard__list li { margin: 0 0 2px; }
.lsa-mapcard__list a {
  display: block;
  padding: 7px 8px;
  overflow: hidden;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html body.takefu-shell-ready .lsa-main .lsa-mapcard__head a { color: var(--lsa-link) !important; }
html body.takefu-shell-ready .lsa-main .lsa-mapcard__head a:hover { text-decoration: underline; }
html body.takefu-shell-ready .lsa-main .lsa-mapcard__grid a { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-mapcard__grid a:hover,
html body.takefu-shell-ready .lsa-main .lsa-mapcard__grid a:focus-visible { border-color: #bfdbfe; background: var(--lsa-primary-light); color: var(--lsa-link) !important; }
html body.takefu-shell-ready .lsa-main .lsa-mapcard__list a { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-mapcard__list a:hover { background: var(--lsa-hover); color: var(--lsa-link) !important; }

/* ---------- 上一篇 / 下一篇 ---------- */
.lsa-prenext {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}
.lsa-prenext a {
  display: block;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--lsa-line);
  border-radius: 10px;
  background: var(--lsa-card);
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease, color 0.15s ease;
}
html body.takefu-shell-ready .lsa-main .lsa-prenext a { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-prenext a:hover { border-color: #bfdbfe; color: var(--lsa-link) !important; }
.lsa-prenext a:only-child { grid-column: 1 / -1; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .lsa-layout { grid-template-columns: 180px minmax(0, 1fr) 250px; gap: 16px; }
  .lsa-card { padding: 24px 22px 26px; }
}
@media (max-width: 980px) {
  .lsa-wrap { width: calc(100% - 24px); }
  .lsa-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lsa-side { position: static; }
  /* 目录：移动端复刻任务页横向粘性条（容器回来了，竖线轨道只在桌面用） */
  .lsa-toc {
    position: sticky;
    top: 72px;
    z-index: 30;
    display: flex;
    gap: 6px;
    margin-left: 0;
    padding: 6px 8px;
    overflow-x: auto;
    border: 1px solid var(--lsa-toc-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    scrollbar-width: thin;
  }
  .lsa-toc::before { display: none; }
  .lsa-toc::-webkit-scrollbar { height: 6px; }
  .lsa-toc__note { display: none; }
  .lsa-toc a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--lsa-toc-line);
    border-radius: 999px;
    background: var(--lsa-soft);
    white-space: nowrap;
  }
  .lsa-toc a::before { display: none; }
  html body.takefu-shell-ready .lsa-main .lsa-toc a.is-current { border-color: var(--lsa-toc-active-bg); background: var(--lsa-toc-active-bg); }
  .lsa-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lsa-mapcard--related { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .lsa-card { padding: 18px 16px 20px; }
  .lsa-head h1 { font-size: 21px; }
  .lsa-content h2 { font-size: 16px; }
  .lsa-side { grid-template-columns: minmax(0, 1fr); }
  .lsa-content .article-shot-grid { grid-template-columns: minmax(0, 1fr); }
  .lsa-prenext { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   兼容：内容容器同时挂 .art-main / .article-modern-content
   （为了复用文章页的图片放大机制 —— eyou-template-modern.js 的 findContent() 只认
   ".article-detail-page .art-main"，enhanceImages() 又要求图片的 <a> 祖先带
   ".article-modern-content"。这两个旧类会把旧排版带进来，下面把设计拉回 LightSNS。）
   ========================================================================== */
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content {
  max-width: none;
  color: var(--lsa-ink-2) !important;
  font-size: 14px;
  line-height: 1.85;
}
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content h2,
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content h3 {
  color: var(--lsa-ink) !important;
}
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content p,
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content li,
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content td,
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content .article-shot-grid {
  color: var(--lsa-ink-2) !important;
}
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content table {
  background: var(--lsa-card);
  color: var(--lsa-ink) !important;
}
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content a {
  color: var(--lsa-link) !important;
}
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content .article-image-frame {
  border: 1px solid var(--lsa-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--lsa-soft);
}
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content .article-image-frame__hint,
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content .article-image-frame__caption {
  color: var(--lsa-muted) !important;
  background: transparent;
}
html body.takefu-shell-ready .lsa-main .lsa-content.article-modern-content strong {
  color: var(--lsa-ink) !important;
  font-weight: 500;
}

/* ==========================================================================
   资源页/地图页/剧情页专属覆盖（resource-detail.css / map-page.css / story 系列
   用 :is(h1,h2,h3)+!important 强刷颜色，这里用更高特异性拉回 LightSNS）
   ========================================================================== */
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-head h1 { color: var(--lsa-ink) !important; font-size: 26px !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-lede { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-meta { color: var(--lsa-muted) !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-meta a { color: var(--lsa-link) !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-content { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-content h2 { color: var(--lsa-ink) !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-content a { color: var(--lsa-link) !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-content strong { color: var(--lsa-ink) !important; }
html body.takefu-shell-ready .lsa-main .lsa-toc a.is-current { color: var(--lsa-primary-hover) !important; }
html body.takefu-shell-ready .lsa-main .lsa-mapcard { background: var(--lsa-card) !important; border-color: var(--lsa-line) !important; }

/* ---------- 放大弹层的加载提示（大图解码期间） ---------- */
.lsa-lightbox-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(9, 12, 15, 0.55);
  transition: opacity 0.22s ease;
}
.lsa-lightbox-loading.is-done { opacity: 0; pointer-events: none; }
.lsa-lightbox-loading__spin {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: lsa-spin 0.8s linear infinite;
}
.lsa-lightbox-loading__text { color: #e5e7eb; font-size: 13px; }
@keyframes lsa-spin { to { transform: rotate(360deg); } }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-content p { color: var(--lsa-ink-2) !important; }
html body.takefu-shell-ready .lsa-main .lsa-card .lsa-content li { color: var(--lsa-ink-2) !important; }

/* ==========================================================================
   2026-10-17 第四轮：文章页左右两侧统一成「物品内页同款」
   --------------------------------------------------------------------------
   1) 左：目录轨道与物品页同一套（竖线 2px + 15px 圆点 + 蓝点光圈，sticky top 76）
   2) 右：地图分区去卡片化（顶部 1px 线 + 双列胶囊）、互动地图换分段切换控件、
      最下方改成「相关任务」白卡；信息栏 sticky + 内部滚动但隐藏滚动条
   3) 栅格与物品页对齐：180px / 1fr / 240px，gap 22
   ========================================================================== */
@media (min-width: 1181px) {
  .lsa-wrap { width: min(1444px, calc(100% - 48px)); }
  .lsa-layout { grid-template-columns: 180px minmax(0, 1fr) 240px; gap: 22px; }

  /* ---- 左：目录 ---- */
  .lsa-toc {
    top: 76px;
    margin-left: 0;
    padding: 1px 0;
    gap: 2px;
  }

  .lsa-toc::before {
    top: 22px;
    bottom: 22px;
    left: 7px;
    width: 2px;
    border-radius: 999px;
    background: #cbd8e6;
  }

  .lsa-toc a {
    min-height: 44px;
    padding: 0 0 0 26px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
  }

  .lsa-toc a::before {
    left: 0;
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    background: #9aabba;
    box-shadow: 0 0 0 1px #9aabba;
  }

  .lsa-toc a .lsa-toc__label { white-space: normal; }

  html body.takefu-shell-ready .lsa-main .lsa-toc a { color: #425466 !important; }

  html body.takefu-shell-ready .lsa-main .lsa-toc a:hover { color: #1d4ed8 !important; }

  html body.takefu-shell-ready .lsa-main .lsa-toc a:hover::before {
    background: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
    transform: translateY(-50%) scale(1.08);
  }

  html body.takefu-shell-ready .lsa-main .lsa-toc a.is-current { color: #1d4ed8 !important; }

  html body.takefu-shell-ready .lsa-main .lsa-toc a.is-current::before {
    background: #2563eb;
    box-shadow: 0 0 0 1px #2563eb, 0 0 0 5px rgba(37, 99, 235, 0.14);
    transform: translateY(-50%);
  }

  /* ---- 右：信息栏悬浮 + 内部滚动（隐藏滚动条）---- */
  .lsa-side {
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 14px;
    padding-right: 2px;
  }

  .lsa-side::-webkit-scrollbar { width: 0; height: 0; }

  /* 地图分区：与物品页一致，不做整卡容器 */
  .lsa-mapcard {
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid #dce5ee;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .lsa-mapcard__head { margin: 0 0 9px; }

  .lsa-mapcard__head h2 {
    color: #17202c !important;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
  }

  .lsa-mapcard__head h2 i { margin-right: 5px; color: #2563eb; font-size: 14px; }

  html body.takefu-shell-ready .lsa-main .lsa-mapcard__head a {
    min-height: 32px;
    color: #2563eb !important;
    font-size: 12px;
    font-weight: 800;
  }

  .lsa-mapcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

  .lsa-mapcard__grid a {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    border: 1px solid #dfe7ef;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
  }

  html body.takefu-shell-ready .lsa-main .lsa-mapcard__grid a { color: #315f9d !important; }

  html body.takefu-shell-ready .lsa-main .lsa-mapcard__grid a:hover,
  html body.takefu-shell-ready .lsa-main .lsa-mapcard__grid a:focus-visible {
    border-color: #9fc5f8;
    background: #eef5ff;
    color: #1d4ed8 !important;
  }

  /* 相关任务：唯一保留的白卡，与物品页侧栏卡片同款 */
  .lsa-mapcard--tasks {
    padding: 14px;
    border: 1px solid #e3e5f1;
    border-top: 1px solid #e3e5f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.02), 0 2px 5px rgba(15, 23, 42, 0.04), 0 14px 30px rgba(73, 66, 137, 0.06);
  }

  .lsa-mapcard--tasks .lsa-mapcard__head { margin: 0 0 10px; }
}

@media (min-width: 1560px) {
  .lsa-wrap { width: min(1540px, calc(100% - 340px)); }
}

/* ---- 地图集切换控件（与物品页 item-guide-map-switch 同一套视觉）---- */
.lsa-map-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
  margin-bottom: 7px;
  padding: 3px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  background: #eef2f8;
}

.lsa-map-switch::before {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 8px) / 2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 37, 31, 0.14);
  content: "";
  transition: transform 0.22s ease;
  transform: translateX(calc(var(--item-map-index, 0) * (100% + 2px)));
}

.lsa-map-switch__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #5d6b7a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s ease;
}

.lsa-map-switch__tab:hover,
.lsa-map-switch__tab.is-active { color: #17202c; }

.lsa-map-switch__tab:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.42); outline-offset: 2px; }

.lsa-map-switch__tab em {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #7b8796;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.4;
}

.lsa-map-switch__tab.is-active em { background: rgba(37, 99, 235, 0.12); color: #2563eb; }

.lsa-mapcard__grid[hidden] { display: none; }

/* ---- 相关任务列表 ---- */
.lsa-mapcard__badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f8;
  color: #5d6b7a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
}

.lsa-tasklist { margin: 0; padding: 0; list-style: none; }

.lsa-tasklist li { margin: 0 0 4px; }

.lsa-tasklist a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #e8edf4;
  border-radius: 8px;
  background: #fbfcfe;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.lsa-tasklist a:hover,
.lsa-tasklist a:focus-visible {
  border-color: #bfd4f7;
  background: #eef5ff;
  outline: none;
}

.lsa-tasklist__copy { display: grid; min-width: 0; gap: 1px; }

.lsa-tasklist__copy strong {
  overflow: hidden;
  color: #18233f;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsa-tasklist__copy small {
  color: #7b8796;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}

.lsa-tasklist a > i { flex: 0 0 auto; margin-left: auto; color: #9aa7b6; font-size: 12px; }

/* 外壳有一条 `html body.takefu-shell-ready .lsa-main .lsa-mapcard{background:#fff!important;border-color:...}`
   （第 551 行），会把上面「去卡片化」的地图分区又刷成白卡。这里用更高特异性 + !important 反超，
   但排除「相关任务」卡（它本来就该是白卡）。 */
@media (min-width: 1181px) {
  html body.takefu-shell-ready .lsa-main .lsa-mapcard:not(.lsa-mapcard--tasks) {
    border-color: #dce5ee !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   2026-10-18 互动地图切换：第二套地图（互动地图2）改用橙色身份色
   与物品页 .item-guide-map-switch 同一套规则，只给第二颗按钮暖橙身份：未选中时
   橙色数量徽标透出身份，选中后整颗按钮填充深橙 + 白字，下方地图格同步换暖橙描边。
   取色：主橙 #c2410c（白字对比 5.18:1）、描边 #f1d3b6、浅底 #fff6ee。
   地图格颜色沿用本文件的「外壳 !important 对抗」写法，避免被外壳链接色刷回蓝色。
   ========================================================================== */

.lsa-map-switch__tab[data-item-map-tab="map2"] {
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.lsa-map-switch__tab[data-item-map-tab="map2"] em {
  background: #fff1e6;
  box-shadow: inset 0 0 0 1px rgb(194 65 12 / 14%);
  color: #c2410c;
}

.lsa-map-switch__tab[data-item-map-tab="map2"]:hover { color: #c2410c; }

.lsa-map-switch__tab[data-item-map-tab="map2"].is-active,
.lsa-map-switch__tab[data-item-map-tab="map2"].is-active:hover {
  background: #c2410c;
  box-shadow: 0 2px 8px rgb(194 65 12 / 30%);
  color: #fff;
}

.lsa-map-switch:has([data-item-map-tab="map2"].is-active)::before {
  background: #c2410c;
  box-shadow: 0 2px 8px rgb(194 65 12 / 26%);
}

.lsa-map-switch__tab[data-item-map-tab="map2"].is-active em {
  background: #fff;
  color: #b23c08;
}

.lsa-map-switch__tab[data-item-map-tab="map2"]:focus-visible { outline-color: rgb(194 65 12 / 48%); }

html body .lsa-mapcard--switch [data-item-map-panel="map2"] a,
html body.takefu-shell-ready .lsa-main .lsa-mapcard--switch [data-item-map-panel="map2"] a {
  border-color: #f1d3b6;
  color: #c2410c !important;
}

html body .lsa-mapcard--switch [data-item-map-panel="map2"] a:hover,
html body .lsa-mapcard--switch [data-item-map-panel="map2"] a:focus-visible,
html body.takefu-shell-ready .lsa-main .lsa-mapcard--switch [data-item-map-panel="map2"] a:hover,
html body.takefu-shell-ready .lsa-main .lsa-mapcard--switch [data-item-map-panel="map2"] a:focus-visible {
  border-color: #e79a5c;
  background: #fff6ee;
  color: #9a3412 !important;
}