/* 观测站样式。颜色集中在 CSS 变量里；深色为默认主题（幕后的氛围），系统偏好浅色时切到浅色。
   注意：CSP 只允许外部样式表，界面脚本通过 CSSOM / classList / SVG 属性改样式，这里不依赖 style 属性。 */

:root {
  color-scheme: dark light;
  --bg: #0a0d13;
  --panel: #10151f;
  --panel-2: #161c29;
  --line: #263047;
  --line-soft: #1b2436;
  --text: #dde3ee;
  --muted: #8a95aa;
  --accent: #6ea8ff;
  --accent-ink: #06122a;
  --good: #58c98a;
  --warn: #f2b46d;
  --bad: #ef6b6b;
  --ai-bg: rgba(110, 168, 255, 0.09);
  --ai-line: rgba(110, 168, 255, 0.35);
  --c0: #6ea8ff;
  --c1: #58c98a;
  --c2: #f2b46d;
  --c3: #ef6b6b;
  --c4: #b78cff;
  --c5: #5fd0d8;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f1ec;
    --panel: #fffdf9;
    --panel-2: #f6f2ea;
    --line: #d9d2c4;
    --line-soft: #e8e2d6;
    --text: #1d2230;
    --muted: #666e80;
    --accent: #2456c4;
    --accent-ink: #ffffff;
    --good: #1b8a53;
    --warn: #b56a10;
    --bad: #c23a3a;
    --ai-bg: rgba(36, 86, 196, 0.07);
    --ai-line: rgba(36, 86, 196, 0.35);
    --shadow: 0 8px 30px rgba(20, 20, 40, 0.18);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
h3 { font-size: 15px; margin: 4px 0 8px; }
h4 { font-size: 14px; margin: 10px 0 6px; }
h5 { font-size: 13px; margin: 8px 0 4px; }
p { margin: 6px 0; }
ul, ol { margin: 6px 0; padding-left: 20px; }
pre { margin: 0; }
.muted { color: var(--muted); }
.error { color: var(--bad); }
.warn { color: var(--warn); }
.empty { color: var(--muted); font-style: italic; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }

button { font: inherit; color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── 顶栏 ── */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.brand h1 { font-size: 18px; letter-spacing: 0.06em; }
.conn { font-size: 11px; }
.conn.on { color: var(--good); }
.conn.off { color: var(--bad); }
.cell { font-size: 13px; }
.clockcell { min-width: 190px; }
.cell .lbl { color: var(--muted); }
.actions { margin-left: auto; display: flex; gap: 6px; }
.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.small { padding: 2px 8px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 6px; }
.icon-btn:hover { color: var(--text); }

.banner, .status {
  padding: 6px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  color: var(--warn);
  font-size: 13px;
}
.status { color: var(--muted); }

/* ── 布局 ── */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(360px, 1.45fr) minmax(360px, 1fr);
  gap: 10px;
  padding: 10px;
  min-height: 0;
}
.map-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.map { flex: 1 1 0; width: 100%; min-height: 360px; display: block; border-radius: 5px; }
.side-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.tabs {
  flex: none;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.panel { flex: 1; overflow: auto; padding: 10px 14px 24px; min-height: 0; max-height: calc(100vh - 150px); }
.foot { padding: 6px 14px; font-size: 12px; color: var(--muted); text-align: center; }
.noscript { padding: 14px; }

@media (max-width: 899px) {
  html, body { height: auto; }
  body { min-height: 100vh; }
  .layout { flex: none; grid-template-columns: 1fr; }
  .map { flex: none; height: auto; aspect-ratio: var(--map-aspect, 16 / 10); max-height: 78vh; min-height: 280px; }
  .side-pane { min-height: 60vh; }
  .panel { max-height: none; overflow: visible; min-height: 50vh; }
  .actions { margin-left: 0; }
  .clockcell { min-width: 0; }
  .drawer { width: 100vw; }
}

/* ── 表单控件 ── */
select, input[type=text], input[type=password], textarea {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit;
  max-width: 100%;
}
textarea { width: 100%; resize: vertical; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.live-resident-picker { position: relative; max-width: 100%; }
.live-resident-picker > summary { cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; overflow-wrap: anywhere; }
.live-resident-menu { position: absolute; z-index: 10; top: 100%; left: 0; width: min(360px, calc(100vw - 48px)); padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 16px #0002; }
.live-resident-menu > input { width: 100%; margin-bottom: 8px; }
.live-resident-options { max-height: 280px; overflow-y: auto; margin: 8px 0; }
.live-resident-options > button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin-bottom: 4px; }
.live-resident-options > button > .ai { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.live-resident-options > button[aria-pressed="true"] { border-color: var(--accent); }
.live-resident-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.live-limit-note { font-size: 12px; margin: 0 0 8px; }
.form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.field > span { color: var(--muted); }
.field input, .field textarea { width: 100%; }
.field-row { display: flex; gap: 6px; }
.field-row input, .field-row textarea { flex: 1; }
.form-actions { display: flex; gap: 8px; align-items: center; }
.check { display: flex; align-items: center; gap: 6px; margin: 8px 0; }

/* ── 通用块 ── */
.sec { margin: 14px 0; }
.sec > h3 { border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.card {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
}
.card.inactive { opacity: 0.65; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 6px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.plain { list-style: none; padding: 0; }
.plain li { padding: 2px 0; }
.plain.inline { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.chip {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 7px;
  margin-left: 4px;
  color: var(--muted);
  vertical-align: 1px;
}
.chip.delayed { color: var(--warn); border-color: var(--warn); }
.chip.gov { color: var(--c4); border-color: var(--c4); }
.chip.exile { color: var(--bad); border-color: var(--bad); }
.chip.st-awake { color: var(--good); border-color: var(--good); }
.chip.st-dormant { color: var(--muted); }
.chip.st-dead { color: var(--bad); border-color: var(--bad); }
.chip.st-retired { color: var(--c5); border-color: var(--c5); }
.chip.tone-alive { color: var(--good); border-color: var(--good); }
.chip.tone-changed { color: var(--warn); border-color: var(--warn); }
.chip.tone-gone { color: var(--bad); border-color: var(--bad); }
.chip.cs-amended { color: var(--warn); border-color: var(--warn); }
.chip.cs-repealed { color: var(--bad); border-color: var(--bad); }
.chip.group-chip { margin-left: 0; margin-right: 4px; color: var(--text); }
.chip.wx { color: var(--c2); border-color: var(--c2); }
.chip.wx-drought, .chip.wx-eclipse { color: var(--bad); border-color: var(--bad); }
.chip.wx-bounty, .chip.wx-aurora { color: var(--good); border-color: var(--good); }
.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
}
.link:hover { text-decoration: underline; }
.link.st-dormant { color: var(--muted); }
.link.st-dead { color: var(--muted); text-decoration: line-through; }
.ai {
  background: var(--ai-bg);
  border-radius: 3px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ai-note {
  font-size: 11px;
  color: var(--muted);
  border: 1px dashed var(--ai-line);
  border-radius: 4px;
  display: inline-block;
  padding: 0 8px;
  margin: 0 0 8px;
}

/* ── 实况 ── */
.feed { list-style: none; padding: 0; margin: 0; }
.feed .ev {
  display: flex;
  gap: 8px;
  padding: 3px 6px;
  border-left: 3px solid var(--cat, var(--line));
  border-bottom: 1px solid var(--line-soft);
  animation: ev-in 0.4s ease-out;
}
.feed .ev-time { color: var(--muted); font-size: 11px; min-width: 48px; font-variant-numeric: tabular-nums; }
.feed .ev-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.feed.compact .ev { padding: 2px 4px; font-size: 13px; }
.cat-speech { --cat: var(--c0); }
.cat-econ { --cat: var(--c2); }
.cat-polity { --cat: var(--c4); }
.cat-life { --cat: var(--c3); }
.cat-know { --cat: var(--c5); }
.cat-env { --cat: var(--c1); }
.cat-world { --cat: var(--muted); }
.cat-admin { --cat: var(--warn); }
@keyframes ev-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── 表格 ── */
.table-wrap { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.th-sort { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; }
.th-sort.asc::after { content: " ▲"; font-size: 9px; }
.th-sort.desc::after { content: " ▼"; font-size: 9px; }

/* ── 条与趋势 ── */
.bar {
  display: inline-block;
  width: 90px;
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
}
.bar-fill { display: block; height: 100%; background: var(--good); }
.bar-fill.band-worn { background: #9bd05e; }
.bar-fill.band-weathered { background: var(--warn); }
.bar-fill.band-dilapidated { background: var(--bad); }
.bar-fill.band-ruin { background: var(--muted); }
.cond { white-space: nowrap; }
.spark { vertical-align: middle; }
.spark polyline { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.trend.up { color: var(--good); }
.trend.down { color: var(--bad); }

/* ── 法典 ── */
.physics li { margin: 4px 0; }
.article { margin: 4px 0; }
.article summary { cursor: pointer; }
.versions { list-style: none; padding-left: 8px; }
.versions li { padding: 2px 0; }
.versions li.canon { border-left: 3px solid var(--accent); padding-left: 6px; }
.lang-tag { color: var(--muted); font-size: 11px; margin-right: 4px; }
.effects { margin: 4px 0; }
.effects li.fail { color: var(--bad); }
.tally-bar { display: flex; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.tally-bar .seg.yes { background: var(--good); }
.tally-bar .seg.no { background: var(--bad); }
.tally-bar .seg.abs { background: var(--muted); }
.proposal.st-passed { border-left: 3px solid var(--good); }
.proposal.st-rejected { border-left: 3px solid var(--bad); }

/* ── 环境、典籍 ── */
.wall ul { list-style: none; padding-left: 0; }
.inscription { padding: 3px 0; border-bottom: 1px dotted var(--line-soft); overflow-wrap: anywhere; }
.inscription.covered { opacity: 0.6; text-decoration: line-through; text-decoration-color: var(--muted); }
.docs { list-style: none; padding-left: 0; }
.docs li { padding: 2px 0; }
.link.active { font-weight: 700; }
.doc-reader { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.doc-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; background: var(--panel-2); border-radius: 6px; padding: 8px 10px; }
.ref { margin-top: 8px; }
.grave { border-left: 3px solid var(--bad); }
.soul { white-space: pre-wrap; overflow-wrap: anywhere; }
.vote-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tallies li { display: inline-block; margin-right: 12px; }

/* ── 图表 ── */
.charts { display: grid; gap: 12px; margin: 10px 0; }
.charts.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
figure { margin: 0; }
figcaption { font-size: 12px; color: var(--muted); text-align: center; }
.chart { width: 100%; height: auto; }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis, .chart .legend, .chart .readout { fill: var(--muted); font-size: 10px; }
.chart .readout { fill: var(--text); }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .crosshair { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart .c0 { stroke: var(--c0); fill: var(--c0); }
.chart .c1 { stroke: var(--c1); fill: var(--c1); }
.chart .c2 { stroke: var(--c2); fill: var(--c2); }
.chart .c3 { stroke: var(--c3); fill: var(--c3); }
.chart .c4 { stroke: var(--c4); fill: var(--c4); }
.chart .c5 { stroke: var(--c5); fill: var(--c5); }
.chart .series.c0, .chart .series.c1, .chart .series.c2, .chart .series.c3, .chart .series.c4, .chart .series.c5 { fill: none; }
.chart .legend-swatch { stroke: none; }
.chart .overlay { cursor: crosshair; }

/* ── 弹窗与抽屉 ── */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 12px;
}
.modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.modal-head h2 { font-size: 16px; }
.modal-body { padding: 10px 14px 18px; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.subtab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 12px; cursor: pointer; color: var(--muted); }
.subtab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.warn.persistent { border: 1px solid var(--warn); border-radius: 6px; padding: 6px 10px; background: rgba(242, 180, 109, 0.08); }
.json { max-height: 260px; overflow: auto; font-size: 11px; background: var(--panel-2); border-radius: 6px; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: auto;
  z-index: 40;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 1; }
.drawer-body { padding: 8px 14px 24px; }

/* ── 地图（SVG，赛博朋克 + 废土）：地图始终是一块深色的「屏幕」，不随浅色主题变亮 ── */
.map {
  --m-bg: #070a12;
  --m-grid: rgba(0, 229, 255, 0.075);
  --m-waste: #120c09;
  --m-dune: rgba(214, 138, 72, 0.26);
  --m-sea: #041119;
  --m-scan: rgba(0, 229, 255, 0.1);
  --m-coast: rgba(0, 229, 255, 0.45);
  --m-curtain: #26050f;
  --m-curtain-hot: #ff2a6d;
  --m-river: #06222d;
  --m-river-glow: rgba(0, 229, 255, 0.55);
  --m-street: #151c2b;
  --m-street-line: rgba(120, 220, 255, 0.26);
  --m-track: rgba(214, 150, 90, 0.5);
  --m-road: #27f3ff;
  --m-planned: #ffd23f;
  --m-wall: #262b37;
  --m-wall-line: rgba(255, 148, 70, 0.55);
  --m-body: rgba(8, 12, 22, 0.88);
  --m-label: #e9f8ff;
  --m-label-halo: #04060b;
  --m-label-dim: #8190ad;
  --m-sky: #03040a;
  --m-star: #ffe9a8;
  --m-bubble-bg: rgba(4, 10, 18, 0.94);
  --m-cyan: #19e6ff;
  --m-magenta: #ff3d8b;
  --m-yellow: #ffd23f;
  --m-green: #3dff9e;
  --m-violet: #b98bff;
  --m-orange: #ff9446;
  --m-blue: #6b93ff;
  --m-rust: #e0783a;
  --m-sand: #e8c07a;
  --m-ruin: #687085;
  background: var(--m-bg);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  outline: none;
}
.map.dragging { cursor: grabbing; }
.map:focus-visible { box-shadow: 0 0 0 2px var(--accent) inset; }
.map.dragging .glyph, .map.dragging .road, .map.dragging .star path { filter: none; }

/* 地面、海与幕、河与水渠 */
.map .ground-city { fill: var(--m-bg); }
.map .grid-line { fill: none; stroke: var(--m-grid); stroke-width: 1; }
.map .ground-waste { fill: var(--m-waste); }
.map .dune { fill: none; stroke: var(--m-dune); stroke-width: 1.4; stroke-linecap: round; }
.map .far-static { opacity: 0.55; }
.map .static-line { stroke: rgba(232, 192, 122, 0.35); stroke-width: 1.2; }
.map .far-label { fill: var(--m-sand); font-size: 22px; letter-spacing: 0.3em; opacity: 0.55; }
.map .sea { fill: var(--m-sea); }
.map .scan-line { stroke: var(--m-scan); stroke-width: 1; }
.map .coast { fill: none; stroke: var(--m-coast); stroke-width: 1.6; }
.map .curtain { fill: var(--m-curtain); }
.map .curtain-fold { fill: none; stroke: rgba(255, 61, 139, 0.22); stroke-width: 1.2; }
.map .curtain-fold.hot { stroke: var(--m-curtain-hot); stroke-width: 1.6; opacity: 0.7; }
.map .glitch { fill: var(--m-curtain-hot); opacity: 0.35; }
.map .river-bed, .map .canal-bed { fill: none; stroke: var(--m-river); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.map .canal-bed { stroke-width: 11; }
.map .river-glow, .map .canal-glow { fill: none; stroke: var(--m-river-glow); stroke-width: 1.5; stroke-dasharray: 18 10; stroke-linecap: round; }

/* 街区、城墙、街道、道路 */
.map .district { fill-opacity: 0.045; stroke-opacity: 0.06; stroke-width: 150; stroke-linejoin: round; stroke-linecap: round; }
.map .dist-harbor { fill: var(--m-cyan); stroke: var(--m-cyan); }
.map .dist-oldtown { fill: var(--m-violet); stroke: var(--m-violet); }
.map .dist-commons { fill: var(--m-magenta); stroke: var(--m-magenta); }
.map .dist-waterworks { fill: var(--m-blue); stroke: var(--m-blue); }
.map .dist-east { fill: var(--m-orange); stroke: var(--m-orange); }
.map .district-label { stroke: none; fill-opacity: 0.6; letter-spacing: 0.28em; font-weight: 700; pointer-events: none; }
.map .wall-body { fill: none; stroke: var(--m-wall); stroke-width: 12; stroke-linecap: square; }
.map .wall-line { fill: none; stroke: var(--m-wall-line); stroke-width: 1.5; stroke-dasharray: 22 6; }
.map .gate-tower { fill: var(--m-wall); stroke: var(--m-wall-line); stroke-width: 1.2; }
.map .street-bed { fill: none; stroke: var(--m-street); stroke-width: 11; stroke-linecap: round; }
.map .street-line { fill: none; stroke: var(--m-street-line); stroke-width: 1.2; stroke-dasharray: 10 12; }
.map .street-bed.track { stroke: rgba(58, 38, 25, 0.9); stroke-width: 8; }
.map .street-line.track { stroke: var(--m-track); stroke-dasharray: 4 8; }
.map .street-bed.tunnel { stroke: none; }
.map .street-line.tunnel { stroke: rgba(255, 210, 63, 0.5); stroke-dasharray: 2 9; stroke-width: 2.2; stroke-linecap: round; }
.map .road { fill: none; stroke: var(--m-road); stroke-width: 4; stroke-linecap: round; filter: url(#m-glow); }
.map .road.broken { stroke: var(--m-ruin); stroke-dasharray: 8 8; filter: none; opacity: 0.8; }
.map .road.planned { stroke: var(--m-planned); stroke-width: 2.4; stroke-dasharray: 3 9; filter: none; opacity: 0.85; }

/* 城外的废土装饰 */
.map .deco-scrap { fill: rgba(224, 120, 58, 0.16); stroke: rgba(224, 120, 58, 0.55); stroke-width: 1.2; }
.map .deco-panel { fill: rgba(107, 147, 255, 0.12); stroke: rgba(107, 147, 255, 0.6); stroke-width: 1; }
.map .deco-salt { fill: rgba(232, 240, 244, 0.06); stroke: rgba(232, 240, 244, 0.35); stroke-width: 1; }
.map .deco-lane { fill: none; stroke: rgba(232, 192, 122, 0.4); stroke-width: 1.6; }
.map .deco-dash { fill: none; stroke: rgba(232, 192, 122, 0.45); stroke-width: 1.4; stroke-dasharray: 14 12; }
.map .deco-bush { fill: none; stroke: rgba(170, 150, 110, 0.5); stroke-width: 1.3; stroke-linecap: round; }

/* 地点：霓虹线稿。颜色来自色系（currentColor），外观随完好度变化；有人在时窗亮着 */
.map .place { cursor: pointer; outline: none; }
.map .hit { fill: transparent; }
.map .hue-cyan { color: var(--m-cyan); }
.map .hue-magenta { color: var(--m-magenta); }
.map .hue-yellow { color: var(--m-yellow); }
.map .hue-green { color: var(--m-green); }
.map .hue-violet { color: var(--m-violet); }
.map .hue-orange { color: var(--m-orange); }
.map .hue-blue { color: var(--m-blue); }
.map .hue-rust { color: var(--m-rust); }
.map .hue-sand { color: var(--m-sand); }
.map .glyph { filter: drop-shadow(0 0 3px currentColor); }
.map .glyph .b { fill: var(--m-body); stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.map .glyph .n { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map .glyph .d { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: 0.45; }
.map .glyph rect.d { fill: currentColor; fill-opacity: 0.18; stroke: none; }
.map .glyph .w { fill: currentColor; opacity: 0.2; stroke: none; }
.map .place.occupied .glyph .w { opacity: 0.95; }
.map .glyph .core { fill: currentColor; stroke: none; opacity: 0.9; }
.map .glyph .ring { stroke-dasharray: 4 5; }
.map .glyph .beam { fill: none; stroke: currentColor; stroke-width: 6; opacity: 0.12; stroke-linecap: round; }
.map .glyph .plaza { fill: currentColor; fill-opacity: 0.06; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 6; }
.map .glyph .fence { fill: var(--m-body); stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 3 3; }
.map .glyph .tomb { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.35; }
.map .glyph .tomb.filled { fill: currentColor; opacity: 0.85; }
.map .glyph .fire { fill: var(--m-orange); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; animation: fire 1.6s ease-in-out infinite alternate; }
.map .glyph .panel { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-width: 1.2; }
.map .glyph .panel.broken { stroke-dasharray: 3 3; fill-opacity: 0.04; }
.map .glyph .salt { fill: rgba(232, 240, 244, 0.12); stroke: currentColor; stroke-width: 1.2; }
.map .glyph .lane { fill: none; stroke: currentColor; stroke-width: 2; }
.map .glyph .dash { stroke-dasharray: 8 6; }
.map .crack { fill: none; stroke: var(--m-ruin); stroke-width: 1.6; display: none; }
.map .cond-worn .glyph { opacity: 0.88; }
.map .cond-weathered .glyph { opacity: 0.72; }
.map .cond-weathered .glyph .b, .map .cond-weathered .glyph .n { stroke-dasharray: 16 3; }
.map .cond-dilapidated .glyph { opacity: 0.6; animation: flicker 4.2s steps(1, end) infinite; }
.map .cond-dilapidated .glyph .b, .map .cond-dilapidated .glyph .n { stroke-dasharray: 7 4; }
.map .cond-ruin { color: var(--m-ruin); }
.map .cond-ruin .glyph { opacity: 0.5; filter: none; }
.map .cond-ruin .glyph .b, .map .cond-ruin .glyph .n { stroke-dasharray: 3 5; }
.map .cond-ruin .glyph .w, .map .cond-ruin .glyph .core { opacity: 0.08; }
.map .cond-ruin .crack { display: block; }
.map .place:hover .glyph, .map .place:focus-visible .glyph { filter: drop-shadow(0 0 7px currentColor) drop-shadow(0 0 1px #fff); }

/* 设施、工程、征兆 */
.map .facility { color: var(--m-yellow); }
.map .facility path, .map .facility circle, .map .facility ellipse, .map .facility line { fill: var(--m-body); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.map .facility.off { color: var(--m-ruin); }
.map .facility .facility-x { stroke: var(--m-magenta); fill: none; }
.map .project-base { fill: var(--m-body); stroke: var(--m-ruin); stroke-width: 1.5; stroke-dasharray: 3 3; }
.map .project-ring { fill: none; stroke: var(--m-yellow); stroke-width: 2.6; }
.map .omen { fill: var(--m-magenta); animation: blink 1.8s steps(2, jump-none) infinite; }

/* 文字：字号与描边宽度由脚本按缩放写在图层上（在屏幕上大小不变） */
.map .label { fill: var(--m-label); stroke: var(--m-label-halo); paint-order: stroke; font-weight: 600; letter-spacing: 0.04em; pointer-events: none; }
.map .label.wild { fill: var(--m-sand); }
.map .label-sub { fill: var(--m-label-dim); stroke: var(--m-label-halo); paint-order: stroke; font-size: 0.78em; pointer-events: none; }
.map .badge { fill: var(--m-cyan); stroke: var(--m-label-halo); paint-order: stroke; font-size: 0.9em; font-weight: 700; pointer-events: none; display: none; }
.map.lod-far .badge { display: inline; }
.map.lod-far .layer-facilities, .map.lod-far .label-sub { display: none; }

/* 居民：焰 */
.map .agent { cursor: pointer; outline: none; }
.map .agent .flame { stroke: rgba(0, 0, 0, 0.6); stroke-width: 0.7; }
.map .agent .halo { opacity: 0.2; }
.map .agent.dormant { opacity: 0.55; }
.map .agent.dormant .halo { display: none; }
.map .agent.exiled .flame { stroke: var(--m-magenta); stroke-width: 2; }
.map .agent:hover .flame, .map .agent:focus-visible .flame { stroke: #fff; stroke-width: 1.6; }

/* 气泡与涟漪 */
.map .bubble { pointer-events: none; animation: bubble-life 4s ease-out forwards; }
.map .bubble rect { fill: var(--m-bubble-bg); stroke: var(--m-cyan); stroke-width: 1.2; }
.map .bubble text { fill: #d9fbff; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, "PingFang SC", monospace; }
.map .bubble.broadcast rect { stroke: var(--m-magenta); }
.map .bubble.broadcast text { fill: #ffd6e7; }
.map .ripple { fill: none; stroke: var(--m-magenta); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ripple 2s ease-out forwards; pointer-events: none; }

/* 天穹（HUD，逝者之星） */
.map .sky { fill: var(--m-sky); stroke: rgba(0, 229, 255, 0.18); stroke-width: 1; }
.map .sky-label { fill: var(--m-label-dim); font-size: 11px; letter-spacing: 0.15em; }
.map .star { cursor: pointer; }
.map .star path { fill: var(--m-star); filter: drop-shadow(0 0 3px var(--m-star)); }

/* 天象 */
.map .fx-fog, .map .fx-boats, .map .fx-eclipse, .map .fx-aurora, .map .fx-sun { display: none; }
.map.wx-fog .fx-fog, .map.wx-migration .fx-boats, .map.wx-eclipse .fx-eclipse, .map.wx-eclipse .fx-sun, .map.wx-aurora .fx-aurora { display: inline; }
.map .fog-wisp { fill: rgba(200, 215, 230, 0.1); animation: drift 14s ease-in-out infinite alternate; }
.map .boat { fill: rgba(25, 230, 255, 0.3); stroke: var(--m-cyan); stroke-width: 1; }
.map .fx-eclipse { fill: #000; opacity: 0.45; pointer-events: none; }
.map .fx-sun .disc { fill: #000; }
.map .fx-sun .corona { fill: none; stroke: #fff4c2; stroke-width: 2; filter: drop-shadow(0 0 5px #fff4c2); }
.map .aurora-band { fill: none; stroke-width: 6; opacity: 0.35; stroke-linecap: round; animation: aurora 6s ease-in-out infinite alternate; }
.map .aurora-band.a0 { stroke: var(--m-green); }
.map .aurora-band.a1 { stroke: var(--m-violet); animation-delay: -2s; }
.map .aurora-band.a2 { stroke: var(--m-cyan); animation-delay: -4s; }
.map.wx-drought .glyph-well .core { opacity: 0.25; }
.map.wx-bounty .glyph-well .core { animation: pulse-core 1.4s ease-in-out infinite; }
.map.wx-amnesia .glyph-library .w { animation: flicker 2.2s steps(1, end) infinite; }
.map.quaking .shake { animation: quake 0.12s linear 10; }

/* 时辰：夜里更暗，有人的窗亮着；白天烟尘里的城稍亮一些 */
.map.tod-night .ground-city { fill: #04060b; }
.map.tod-dusk .ground-city { fill: #0a0b14; }
.map.tod-day .ground-city { fill: #0b1221; }
.map.tod-day .glyph { filter: drop-shadow(0 0 1.5px currentColor); }

@keyframes bubble-life { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ripple { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(8); opacity: 0; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes flicker { 0%, 100% { opacity: 0.6; } 7% { opacity: 0.15; } 9% { opacity: 0.6; } 53% { opacity: 0.25; } 55% { opacity: 0.6; } }
@keyframes fire { from { transform: scaleY(0.85); opacity: 0.8; } to { transform: scaleY(1.12); opacity: 1; } }
@keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(60px); } }
@keyframes aurora { from { transform: translateY(-3px); opacity: 0.2; } to { transform: translateY(3px); opacity: 0.45; } }
@keyframes pulse-core { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes quake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, 4px); } 50% { transform: translate(6px, -4px); } 75% { transform: translate(-4px, -6px); } }

/* 地图下方的工具条：缩放、着色、图例 */
.map-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 4px 0; font-size: 12px; color: var(--muted); }
.map-tools .zoom { display: inline-flex; gap: 4px; }
.map-tools .zoom .btn { min-width: 30px; padding: 2px 8px; }
.map-tools .spacer { flex: 1; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.map-legend li { display: inline-flex; align-items: center; gap: 5px; }
.map-legend .key { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: #27f3ff; }
.map-legend .key.broken { background: repeating-linear-gradient(90deg, #687085 0 4px, transparent 4px 7px); }
.map-legend .key.planned { background: repeating-linear-gradient(90deg, #ffd23f 0 2px, transparent 2px 6px); }
.map-legend .key.tunnel { background: repeating-linear-gradient(90deg, #ffd23f 0 2px, transparent 2px 7px); opacity: 0.6; }
.map-legend .key.flame { width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #19e6ff; }
.map-legend .key.ruin { background: #687085; }

@media (prefers-reduced-motion: reduce) {
  .feed .ev, .map .omen, .map .bubble, .map .ripple, .map .glyph, .map .fire, .map .fog-wisp, .map .aurora-band, .map.quaking .shake { animation: none; }
}

/* 入境向导与后台托管：沿用观测站的纸页、细线和暖色强调。 */
.entry-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0 0 12px; padding: 0; border-bottom: 1px solid var(--line); }
.entry-progress li { display: flex; gap: 8px; align-items: center; padding: 12px 4px; color: var(--muted); font-size: 13px; border-bottom: 2px solid transparent; }
.entry-progress li[aria-current="step"] { color: var(--accent); border-bottom-color: var(--accent); }
.step-number { border: 1px solid currentColor; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; font-family: Georgia, serif; }
.wizard-step { display: flex; flex-direction: column; gap: 12px; }
.wizard-step h3 { margin: 0 0 6px; font-family: "Songti SC", Georgia, serif; font-size: 21px; font-weight: 500; }
.model-form { display: flex; flex-direction: column; gap: 12px; }
.model-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field select { width: 100%; }
.soul-template { display: flex; gap: 8px; align-items: center; }
.soul-template select { flex: 1; min-width: 0; }
.runner-advanced { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.runner-advanced summary, .runner-editor summary { cursor: pointer; color: var(--muted); }
.runner-advanced[open] > summary, .runner-editor[open] > summary { margin-bottom: 12px; }
.entry-note { background: var(--panel-2); border-left: 3px solid var(--accent); padding: 12px; font-size: 13px; line-height: 1.8; }
.entry-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; margin: 0; }
.entry-summary dt { color: var(--muted); }
.entry-summary dd { margin: 0; overflow-wrap: anywhere; }
.runner-panel { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; padding: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.runner-panel h4 { margin: 0; }
.runner-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.runner-status .error, .runner-status details { flex-basis: 100%; margin: 0; }
.runner-waiting, .runner-thinking { color: var(--accent); }
.runner-error { color: var(--bad); }
.runner-panel .form-actions { flex-wrap: wrap; }
/* 幕后的 token 用量：数字块、近 14 日柱状图（输入在下、输出在上）、跨居民总览。只用类名，不写内联样式（CSP）。 */
.usage-panel { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; padding: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.usage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.usage-head h3, .usage-head h4 { margin: 0; }
.usage-body, .usage-content { display: flex; flex-direction: column; gap: 10px; }
.usage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.usage-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 6px; min-width: 0; }
.usage-label { color: var(--muted); font-size: 12px; }
.usage-big { font-size: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.usage-sub { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.usage-sub .nw { white-space: nowrap; }
.usage-chart-title { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-weight: normal; }
.usage-chart { width: 100%; height: auto; }
.usage-chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.usage-chart .axis { fill: var(--muted); font-size: 10px; }
.usage-chart .hit { fill: transparent; }
.usage-chart .in { fill: var(--c0); }
.usage-chart .out { fill: var(--c2); }
.usage-chart .usage-bar:hover .hit { fill: var(--ai-bg); }
.usage-legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.usage-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.usage-legend .swatch.in { background: var(--c0); }
.usage-legend .swatch.out { background: var(--c2); margin-left: 8px; }
.usage-recent { font-size: 13px; font-variant-numeric: tabular-nums; }
.usage-note { margin: 0; font-size: 12px; }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-table td.num { white-space: nowrap; } /* 表头可以换行，窄屏才放得下 */
.usage-table .usage-sub { white-space: nowrap; overflow-wrap: normal; }
.usage-table .btn { white-space: nowrap; }
.usage-table .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.usage-table .row-actions .usage-sub { white-space: normal; }
.account-claim .field-row input { min-width: 0; }
.usage-table th.num { text-align: right; }
.usage-sum td { font-weight: 600; border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .usage-table .last, .usage-table .opt { display: none; } /* 窄屏只留数字：最近调用、状态、造者与模型在居民自己的面板 / 宽屏里看得到 */
  .usage-table th, .usage-table td { padding-left: 4px; padding-right: 4px; }
  .model-fields { grid-template-columns: minmax(0, 1fr); }
  .entry-progress li { flex-direction: column; gap: 6px; text-align: center; font-size: 12px; }
  .soul-template { flex-wrap: wrap; }
  .entry-summary { gap: 10px 16px; }
}

/* ══ 第二纪 ══════════════════════════════════════════════════════
   后人开辟的地点、空地块、遗址、模块、门、残料环、主人的描边；法典里的读法与规则；摇篮与躯壳；谱系网。 */

/* 空地块与小路 */
.map .layer-lots .lot-wrap { opacity: 0.55; cursor: help; }
.map .layer-lots .lot-wrap.wild { opacity: 0.32; }
.map .lot-diamond { fill: none; stroke: var(--m-ruin); stroke-width: 1.2; stroke-dasharray: 3 3; }
.map .lot-dot { fill: var(--m-ruin); }
.map .lot-wrap.building { opacity: 0.95; }
.map .lot-wrap.building .lot-diamond { stroke: var(--m-yellow); }
.map .path-small { fill: none; stroke: var(--m-sand); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.7; }

/* 后人开辟的地点：用废料拼起来的棚屋，线条是断的 */
.map .place.agent-built .glyph { filter: drop-shadow(0 0 2px currentColor); }
.map .place.agent-built .glyph .b { stroke-dasharray: 24 3; }
.map .place.agent-built .glyph .n { stroke-dasharray: 30 2; }

/* 主人的描边、残料环、门 */
.map .hidden { display: none; }
.map .owner-ring { fill: none; stroke-width: 1.8; stroke-dasharray: 6 5; opacity: 0.85; pointer-events: none; }
.map .salvage-ring { fill: none; stroke: var(--m-sand); stroke-width: 2.2; stroke-linecap: round; opacity: 0.6; pointer-events: none; transition: stroke-dasharray 0.9s ease; }
.map .gate-bar { fill: none; stroke: var(--m-yellow); stroke-width: 3.2; stroke-linecap: round; pointer-events: none; }
.map .gate-bar.off { stroke: var(--m-ruin); stroke-dasharray: 4 4; }

/* 模块：叠在一起的小图标 */
.map .mods .module { color: var(--m-cyan); }
.map .mods .module path, .map .mods .module rect, .map .mods .module circle, .map .mods .module line { fill: var(--m-body); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.map .mods .module.m-memorial { color: var(--m-orange); }
.map .mods .module.m-cradle { color: var(--m-green); }
.map .mods .module.m-relay, .map .mods .module.m-sensor { color: var(--m-blue); }
.map .mods .module.m-archive, .map .mods .module.m-surface { color: var(--m-violet); }
.map .mods .module.m-board, .map .mods .module.m-store { color: var(--m-yellow); }
.map .mods .module.inherent { opacity: 0.72; }
.map .mods .module.off { color: var(--m-ruin); }

/* 遗址：褪色的轮廓 */
.map .place.razed { color: var(--m-ruin); }
.map .place.razed .glyph { opacity: 0.3; filter: none; }
.map .place.razed .glyph .b, .map .place.razed .glyph .n { fill: none; stroke-dasharray: 2 6; }
.map .place.razed .glyph .w, .map .place.razed .glyph .core { opacity: 0; }
.map .label.razed { fill: var(--m-label-dim); font-style: italic; }

/* 开辟：新地点从空地块上长出来；拆解：建筑闪一下 */
.map .place.fresh .glyph { animation: e2-grow 1.8s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
.map .place.flash .glyph { animation: e2-flash 0.7s ease-out; }
@keyframes e2-grow { from { transform: scale(0.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes e2-flash { 0% { filter: drop-shadow(0 0 14px #fff) brightness(2.2); } 100% { filter: drop-shadow(0 0 3px currentColor); } }

/* 图例 */
.map-legend .key.site { width: 12px; height: 10px; border-radius: 2px; background: #e0783a; }
.map-legend .key.lot { width: 9px; height: 9px; background: transparent; border: 1px dashed #687085; transform: rotate(45deg); }
.map-legend .key.razed { background: repeating-linear-gradient(90deg, #687085 0 2px, transparent 2px 6px); }
.map-legend .key.owner { width: 14px; height: 9px; border-radius: 50%; background: transparent; border: 2px dashed #b98bff; }
.map-legend .key.salvage { width: 12px; height: 12px; border-radius: 50%; background: transparent; border: 2px solid #e8c07a; }
.map-legend .key.gate { height: 3px; background: #ffd23f; }

/* 法典：读法、规则 JSON、标签、状态 */
.reading { margin: 4px 0; padding-left: 20px; color: var(--text); }
.reading li { padding: 1px 0; }
ol.reading { list-style: decimal; }
ul.reading { list-style: none; padding-left: 0; }
.json { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 8px; overflow: auto; max-height: 280px; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.json-details > summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.fp code { margin-right: 6px; font-size: 11px; }
.physics-group h4 { margin: 8px 0 2px; }
.proc-history { padding-left: 20px; }
.chip.tag { color: var(--accent); border-color: var(--accent); margin-left: 0; margin-right: 3px; }
.chip.warn { color: var(--warn); border-color: var(--warn); }
.chip.good { color: var(--good); border-color: var(--good); }
.chip.razed { color: var(--muted); border-style: dashed; }
.chip.mod { margin-left: 0; margin-right: 3px; color: var(--text); }
.chip.mod.off { color: var(--muted); border-style: dashed; }
.chip.mod.inherent { border-style: dotted; }
.chip.inherited { color: var(--c2); border-color: var(--c2); margin-left: 0; }
.chip.cls-constitutional { color: var(--c4); border-color: var(--c4); }
.chip.ls-repealed, .chip.ls-replaced { color: var(--bad); border-color: var(--bad); }
.chip.ls-active { color: var(--good); border-color: var(--good); }
.purpose { font-size: 12px; }
.soul-card .soul { white-space: pre-wrap; }

/* 谱系网 */
.lineage { width: 100%; max-width: 560px; height: auto; margin: 8px 0; }
.lineage .lin-edge { fill: none; stroke: var(--line); stroke-width: 1.4; }
.lineage .lin-node { cursor: pointer; outline: none; }
.lineage .lin-node circle { fill: var(--panel-2); stroke: var(--accent); stroke-width: 1.8; }
.lineage .lin-node.self circle { fill: var(--accent); }
.lineage .lin-node.st-dead circle, .lineage .lin-node.st-retired circle { stroke: var(--muted); stroke-dasharray: 2 2; }
.lineage .lin-node text { fill: var(--text); font-size: 11px; }
.lineage .lin-node:hover circle, .lineage .lin-node:focus-visible circle { stroke-width: 3; }

/* Human account forms use the observatory's existing paper-and-ink palette. */
.account-summary { border-bottom: 1px solid var(--line, #ddd); margin-bottom: 1rem; padding-bottom: .75rem; }
.account-form { margin-bottom: 1.5rem; }
.account-message { min-height: 1.5em; margin: .5rem 0; }
.account-toolbar, .account-search, .account-row { display: flex; align-items: center; gap: .75rem; }
.account-toolbar, .account-row { justify-content: space-between; }
.account-toolbar { flex-wrap: wrap; margin-bottom: 1rem; }
.account-search { flex: 1; }
.account-search input { min-width: 0; width: 100%; }
.account-row p { margin: .3rem 0; }
.account-row > div { min-width: 0; overflow-wrap: anywhere; }
.account-list { display: grid; gap: .65rem; margin-bottom: 1rem; }
.account-modal .subtabs { flex-wrap: wrap; }
.snapshot-download { display: grid; justify-items: end; gap: .3rem; max-width: 12rem; }
.snapshot-download small { overflow-wrap: anywhere; }
#btn-account { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 540px) { .account-toolbar { align-items: stretch; flex-direction: column; } }
.account-search .btn { flex-shrink: 0; white-space: nowrap; }
.account-search input { padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: var(--text); font: inherit; }