:root {
  color-scheme: dark;
  --topbar-h: 56px;
  --rail-w: 108px;
  --inspector-w: 350px;
  --status-h: 34px;
  --mobile-stage-h: 66px;
  --bg: #09090a;
  --surface-0: #101012;
  --surface-1: #171719;
  --surface-2: #202023;
  --surface-3: #29292d;
  --surface-hover: #323237;
  --line: #39393e;
  --line-strong: #505057;
  --text: #f6f6f7;
  --text-soft: #d1d1d4;
  --muted: #aaaab0;
  --subtle: #85858c;
  --accent: #c92f29;
  --accent-hover: #e13a33;
  --accent-strong: #f04b43;
  --accent-soft: rgba(225, 58, 51, .16);
  --focus: #ff6b63;
  --danger: #d16a6a;
  --danger-soft: rgba(209, 106, 106, .14);
  --warning: #d0a35f;
  --warning-soft: rgba(208, 163, 95, .14);
  --success: #d18a59;
  --success-soft: rgba(209, 138, 89, .14);
  --atlas-paper: #f0eee5;
  --atlas-ink: #2c2929;
  --shadow-1: 0 8px 24px rgba(4, 8, 7, .22);
  --shadow-2: 0 18px 56px rgba(3, 7, 6, .4);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --font-ui: Inter, "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-map: Georgia, "Noto Serif SC", "Songti SC", serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
html { background: var(--bg); }
body {
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, output { font: inherit; }
button, input, select, textarea { color: inherit; }
button { margin: 0; }
button:not(:disabled), select, summary, input[type="checkbox"], input[type="radio"], input[type="range"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .38; }
input, select, textarea { min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--subtle); }
::selection { color: #fff; background: var(--accent); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(button, input, select, textarea, summary, #mapCanvas):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
#mapCanvas:focus-visible { outline-offset: -5px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--line-strong); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  height: 100dvh;
  background: var(--bg);
}
.timeline { display: none !important; }

/* 顶部文档栏 */
.topbar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: auto auto minmax(140px, 190px) minmax(340px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(24, 30, 28, .98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
}
.brand-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(100, 189, 170, .48);
  border-radius: 9px;
  color: #fff1f0;
  background: linear-gradient(145deg, #c6322c, #7f1e1a);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  font: 700 17px/1 var(--font-map);
}
.brand strong, .brand small { display: block; white-space: nowrap; }
.brand strong { font-size: 13px; letter-spacing: .13em; }
.brand small { margin-top: 1px; color: var(--subtle); font: 600 10px/1.2 var(--font-mono); letter-spacing: .08em; }
.test-build-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-1);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .06em;
  white-space: nowrap;
}
.world-name {
  display: flex;
  align-items: center;
  height: 36px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  transition: border-color .16s ease, background .16s ease;
}
.world-name:hover { border-color: var(--line); background: var(--surface-2); }
.world-name:focus-within { border-color: var(--accent-strong); }
.world-name input {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
}
.document-tools {
  justify-self: center;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.workspace-progress { display: grid; min-width: 142px; padding: 3px 9px; border-left: 1px solid var(--line); }
.workspace-progress small { color: var(--subtle); font: 650 10px/1.3 var(--font-mono); letter-spacing: .08em; }
.workspace-progress strong { margin-top: 2px; color: var(--text-soft); font-size: 11px; line-height: 1.3; white-space: nowrap; }
.map-purpose-control {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.map-purpose-control select {
  height: 35px;
  min-width: 116px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: var(--surface-1);
  font-size: 12px;
}
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.top-actions button {
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ghost, .icon-button, .save-button {
  border: 1px solid var(--line);
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.ghost { padding: 0 10px; color: var(--text-soft); background: var(--surface-1); }
.ghost:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0 !important;
}
.icon-button:hover { color: var(--text); background: var(--surface-2); }
.icon-button::before, .zoom-stack button::before, .layers-button::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon-button[data-action="undo"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7 4 12l5 5'/%3E%3Cpath d='M5 12h8a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); }
.icon-button[data-action="redo"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3Cpath d='M19 12h-8a6 6 0 0 0-6 6'/%3E%3C/svg%3E"); }
.save-button { padding: 0 13px; border-color: #8f2f2b; color: #fff; background: var(--accent); }
.save-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

/* 工作区骨架 */
.workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--inspector-w);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.stage-rail {
  position: relative;
  z-index: 24;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  padding: 8px 6px;
  border-right: 1px solid var(--line);
  background: var(--surface-0);
}
.stage-rail button {
  --stage-icon: none;
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--subtle);
  background: transparent;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.stage-rail button:hover { border-color: var(--line); color: var(--text-soft); background: var(--surface-2); }
.stage-rail button.active { border-color: rgba(240, 75, 67, .38); color: #ffaaa4; background: var(--accent-soft); }
.stage-rail button::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--stage-icon) center / contain no-repeat;
  mask: var(--stage-icon) center / contain no-repeat;
}
.stage-rail button::after {
  content: attr(aria-label);
  position: absolute;
  z-index: 80;
  left: calc(100% + 10px);
  top: 50%;
  width: max-content;
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: rgba(31, 39, 36, .98);
  box-shadow: var(--shadow-1);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity .14s ease, transform .14s ease;
}
.stage-rail button:hover::after, .stage-rail button:focus-visible::after { opacity: 0; }
.stage-rail button > span { display: none; }
.stage-rail button > b { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: currentColor; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.stage-rail button > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.stage-rail [data-workspace="terrain"] { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19 8 9l4 5 4-9 5 14Z'/%3E%3Cpath d='M6 19h12'/%3E%3C/svg%3E"); }
.stage-rail [data-workspace="nature"] { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 3c-6 3 1 6-6 9s0 6-6 9'/%3E%3Cpath d='m14 4 4-1-1 4'/%3E%3C/svg%3E"); }
.stage-rail [data-workspace="human"] { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Cpath d='M9 9l6 6M14 6h5v5M5 14v5h5'/%3E%3C/svg%3E"); }
.stage-rail [data-workspace="content"] { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14M12 5v14M8 19h8'/%3E%3C/svg%3E"); }
.stage-rail [data-workspace="output"] { --stage-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18 15 7l2 2L6 20H4Z'/%3E%3Cpath d='m14 4 1-2 1 2 2 1-2 1-1 2-1-2-2-1Z'/%3E%3C/svg%3E"); }

/* 中央地图 */
.map-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #8faeb6;
}
#mapCanvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: none;
}
#mapCanvas[data-tool="pan"] { cursor: grab; }
#mapCanvas[data-tool="pan"]:active { cursor: grabbing; }
#mapCanvas[data-tool="river"], #mapCanvas[data-tool="road"], #mapCanvas[data-tool^="sketch-"], #mapCanvas[data-tool="raise"], #mapCanvas[data-tool="lower"], #mapCanvas[data-tool="land"], #mapCanvas[data-tool="sea"], #mapCanvas[data-tool="add-feature"], #mapCanvas[data-tool="shape-border"] { cursor: crosshair; }
.map-heading {
  position: absolute;
  z-index: 8;
  top: 14px;
  left: 14px;
  display: grid;
  gap: 2px;
  max-width: 330px;
  padding: 9px 11px 10px;
  border: 1px solid rgba(220, 232, 227, .22);
  border-radius: var(--radius-md);
  color: var(--text);
  background: rgba(27, 34, 32, .88);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.map-heading small { color: #f28f89; font: 700 10px/1.3 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.map-heading strong { font-size: 17px; line-height: 1.35; }
.map-heading span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.map-toolbar {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: calc(var(--status-h) + 10px);
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: calc(100% - 28px);
  min-height: 46px;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(212, 228, 222, .2);
  border-radius: 12px;
  background: rgba(27, 34, 32, .94);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.map-toolbar::-webkit-scrollbar { display: none; }
.toolbar-group { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.toolbar-group > small { margin: 0 4px 0 3px; color: var(--subtle); font: 700 10px/1 var(--font-mono); letter-spacing: .06em; }
.toolbar-group + .toolbar-group { padding-left: 5px; border-left: 1px solid var(--line); }
.tool {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.tool:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.tool.active { border-color: rgba(240, 75, 67, .42); color: #fff; background: var(--accent); }
.tool:disabled { opacity: .32; }
.ui-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool-separator { flex: 0 0 auto; width: 1px; height: 24px; margin: 0 2px; background: var(--line); }
.brush-picker { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.brush-picker > span { margin: 0 3px; color: var(--subtle); font: 650 10px/1 var(--font-mono); }
.brush-picker button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-1);
  font-size: 11px;
  font-weight: 700;
}
.brush-picker button:hover { border-color: var(--line-strong); color: var(--text); }
.brush-picker button.active { border-color: var(--accent-strong); color: #fff; background: var(--accent); }

.layers-button {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5Z'/%3E%3Cpath d='m3 12 9 5 9-5M3 16l9 5 9-5'/%3E%3C/svg%3E");
  position: absolute;
  z-index: 15;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(217, 231, 226, .22);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: rgba(27, 34, 32, .91);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  font-size: 0;
}
.layers-button::after { content: "图层"; font-size: 12px; font-weight: 700; }
.layers-button:hover { color: #fff; background: rgba(38, 48, 45, .96); }
.layers-button b {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  color: #e7f5f1;
  background: var(--accent);
  font: 700 10px/1 var(--font-mono);
}
.layers-popover {
  position: absolute;
  z-index: 32;
  top: 58px;
  right: 14px;
  display: none;
  width: 280px;
  max-height: calc(100% - 108px);
  padding: 0 12px 12px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: rgba(30, 38, 35, .98);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(18px);
}
.layers-popover.open { display: block; }
.layers-popover > header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  margin: 0 -2px;
  border-bottom: 1px solid var(--line);
  background: rgba(30, 38, 35, .98);
}
.layers-popover > header small, .layers-popover > header strong { display: block; }
.layers-popover > header small { color: var(--accent-strong); font: 700 10px/1.2 var(--font-mono); letter-spacing: .08em; }
.layers-popover > header strong { margin-top: 3px; font-size: 14px; }
.layers-popover > header button {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 18px;
}
.layers-popover > header button:hover { border-color: var(--line); color: var(--text); background: var(--surface-2); }
.layer-group { padding: 10px 0 2px; }
.layer-group + .layer-group { border-top: 1px solid rgba(81, 96, 90, .45); }
.layer-group h3 { margin: 0 0 4px; color: var(--subtle); font: 700 10px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 4px 5px;
  border-radius: 7px;
  color: var(--text-soft);
  font-size: 12px;
}
.layer-row:hover { color: var(--text); background: var(--surface-2); }
.layer-row input { flex: 0 0 auto; accent-color: var(--accent-strong); }

.map-legend {
  position: absolute;
  z-index: 8;
  right: 14px;
  bottom: calc(var(--status-h) + 12px);
  display: grid;
  gap: 5px;
  min-width: 92px;
  padding: 8px 9px;
  border: 1px solid rgba(217, 231, 226, .2);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: rgba(27, 34, 32, .84);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.legend-item i { width: 18px; height: 5px; border-radius: 2px; background: var(--color); }
.legend-line { width: 22px; height: 8px; overflow: visible; }
.legend-symbol { width: 14px; height: 14px; overflow: visible; }
.legend-terrain-sample { display: grid; flex: 0 0 auto; place-items: center; width: 22px; height: 14px; color: var(--terrain-color); }
.legend-terrain-sample img { width: 24px; height: 16px; object-fit: contain; opacity: .82; filter: invert(86%) sepia(8%) saturate(420%) hue-rotate(104deg); }
.legend-note {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  padding-top: 7px;
  border-top: 1px solid rgba(217, 231, 226, .14);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.legend-note strong { color: #e1c487; font-weight: 700; }
.legend-context {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(217, 231, 226, .14);
  color: var(--accent-strong);
  font: 700 10px/1.25 var(--font-mono);
  letter-spacing: .06em;
}
.layer-legend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 9px;
  padding: 5px;
}
.layer-legend .legend-item { min-width: 0; color: var(--text-soft); font-size: 11px; }
.map-legend.has-many { grid-template-columns: repeat(2, minmax(92px, 1fr)); }
.object-insight { display: none !important; }
.selection-candidates {
  position: absolute;
  z-index: 38;
  width: min(250px, calc(100% - 20px));
  max-height: min(340px, calc(100% - 92px));
  padding: 0 8px 8px;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  background: rgba(27, 34, 32, .985);
  box-shadow: var(--shadow-2);
}
.selection-candidates[hidden] { display: none; }
.selection-candidates > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 45px; background: rgba(27, 34, 32, .985); }
.selection-candidates > header strong { font-size: 12px; }
.selection-candidates > header button { width: 34px; height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 18px; }
#selectionCandidateList { display: grid; gap: 4px; }
#selectionCandidateList > button { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-soft); background: var(--surface-1); text-align: left; }
#selectionCandidateList > button:hover, #selectionCandidateList > button:focus-visible { border-color: var(--accent-strong); color: var(--text); background: var(--surface-2); }
#selectionCandidateList i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--accent-strong); background: var(--accent-soft); font: 700 10px/1 var(--font-mono); font-style: normal; }
#selectionCandidateList strong, #selectionCandidateList small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#selectionCandidateList strong { font-size: 12px; }
#selectionCandidateList small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.map-statusbar {
  position: absolute;
  z-index: 14;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--status-h);
  padding: 0 7px 0 10px;
  border-top: 1px solid rgba(82, 98, 92, .78);
  color: var(--muted);
  background: rgba(24, 30, 28, .96);
  backdrop-filter: blur(12px);
  font-size: 10px;
}
.precision-badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-width: 116px;
}
.precision-badge > i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.precision-badge strong, .precision-badge span { display: block; }
.precision-badge strong { color: var(--text-soft); font: 700 11px/1.15 var(--font-mono); font-variant-numeric: tabular-nums; }
.precision-badge span { margin-top: 1px; color: var(--subtle); font-size: 10px; }
.precision-badge em { padding: 3px 5px; border-radius: 5px; color: #f3aaa5; background: var(--accent-soft); font: 700 10px/1 var(--font-mono); font-style: normal; }
.status-readouts { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.status-readouts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#coordinateValue, #statusMode { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#statusMode[data-limited="true"], #zoomValue[data-limited="true"] { color: #e1c487; }
#qualityStatus { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; white-space: nowrap; }
#qualityStatus:hover { color: var(--text-soft); }
#qualityStatus::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--subtle); }
#qualityStatus[data-level="good"]::before { background: var(--success); }
#qualityStatus[data-level="warning"]::before { background: var(--warning); }
#qualityStatus[data-level="error"]::before { background: var(--danger); }
#qualityStatus[data-level="stale"]::before { background: var(--subtle); }
.zoom-stack {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-0);
}
.zoom-stack button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0;
}
.zoom-stack button:hover { color: var(--text); background: var(--surface-2); }
.zoom-stack button + button, .zoom-stack output + button { border-left: 1px solid var(--line); }
.zoom-stack output { min-width: 42px; padding: 0 5px; color: var(--text-soft); font: 700 10px/1 var(--font-mono); text-align: center; font-variant-numeric: tabular-nums; }
.zoom-stack [data-action="zoom-in"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.zoom-stack [data-action="zoom-out"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.zoom-stack [data-action="fit"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5'/%3E%3Cpath d='M3 8l5-5m8 0 5 5M3 16l5 5m8 0 5-5'/%3E%3C/svg%3E"); }
.touch-tip { flex: 0 1 auto; color: var(--subtle); white-space: nowrap; }

/* 右侧上下文属性区 */
.inspector {
  position: relative;
  z-index: 22;
  min-width: 0;
  min-height: 0;
  padding: 17px 15px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: var(--surface-0);
  overscroll-behavior: contain;
}
.drawer-handle { display: none; }
.drawer-state-actions { display: none; }
.workspace-task-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0 0 9px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-1); }
.workspace-task-tabs button { min-height: 36px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
.workspace-task-tabs button.active { color: #ffe1de; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(240, 75, 67, .35); }
.workspace-guide { display: grid; gap: 4px; margin: 0 0 13px; padding: 10px 11px; border: 1px solid rgba(240, 75, 67, .3); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(128, 30, 26, .24), var(--surface-1)); }
.workspace-guide small { color: var(--accent-strong); font: 700 10px/1.3 var(--font-mono); letter-spacing: .07em; }
.workspace-guide strong { color: var(--text); font-size: 14px; line-height: 1.45; }
.workspace-guide span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.workspace-guide button { justify-self: start; min-height: 36px; margin-top: 3px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text-soft); background: var(--surface-2); font-size: 12px; font-weight: 700; }
.workspace-guide button:hover { border-color: var(--accent-strong); color: var(--text); }
.panel-head { margin: 0 0 15px; }
.panel-head small { display: block; color: var(--accent-strong); font: 700 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.panel-head h2 { margin: 5px 0 5px; color: var(--text); font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.panel-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.random-button, .full-button, .text-button, .curve-actions button, .object-studio-actions button, .context-actions button, .entity-actions button, .edge-audit button, .label-style-editor button {
  min-height: 38px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.random-button {
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 11px;
  border: 1px solid #8f2f2b;
  color: #fff;
  background: var(--accent);
}
.random-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.random-button.warm { border-color: var(--line-strong); color: #f5d0cd; background: var(--surface-2); }
.random-button.warm:hover { border-color: var(--accent-strong); background: var(--accent-soft); }
.primary-action-stack { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 7px; margin-bottom: 9px; }
.primary-action-stack .random-button { margin: 0; }
.project-output-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 7px; margin-top: 9px; }
.project-output-actions .random-button, .project-output-actions .secondary-action { margin: 0; }
.secondary-action {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: var(--surface-1);
  font-size: 12px;
  font-weight: 700;
}
.secondary-action:hover { border-color: var(--accent-strong); color: var(--text); background: var(--surface-2); }
.full-button {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
  background: var(--surface-1);
}
.full-button:hover { border-color: var(--accent-strong); color: var(--text); background: var(--surface-2); }
.text-button { width: 100%; margin-top: 8px; border: 0; color: #ee8a84; background: transparent; }
.text-button:hover { color: #ffb7b1; background: var(--accent-soft); }

.section-card {
  margin: 9px 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.section-title strong { color: var(--text-soft); font-size: 13px; line-height: 1.4; }
.section-title small { max-width: 55%; color: var(--subtle); font: 600 11px/1.4 var(--font-mono); text-align: right; }
.microcopy { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.coach-note, .danger-note {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--surface-1);
  font-size: 12px;
  line-height: 1.55;
}
.danger-note { border-color: rgba(209, 106, 106, .42); color: #e0b4b4; background: var(--danger-soft); }
.advanced-panel {
  overflow: hidden;
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}
.advanced-panel > summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  color: var(--text-soft);
  list-style: none;
  font-size: 12px;
  font-weight: 700;
}
.advanced-panel > summary::-webkit-details-marker { display: none; }
.geography-health { border-color: rgba(103, 173, 140, .42); background: var(--success-soft); }
.geography-health[data-level="error"] { border-color: rgba(209, 106, 106, .52); background: var(--danger-soft); }
.geography-health[data-level="neutral"] { background: var(--surface-1); }
.geography-health > b { display: block; color: var(--text); font-size: 14px; line-height: 1.45; }
.geography-health .full-button { margin-top: 10px; }
.advanced-panel > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border: solid var(--subtle);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.advanced-panel > summary:hover { color: var(--text); background: var(--surface-2); }
.advanced-panel > summary small { margin-left: auto; color: var(--subtle); font: 700 10px/1 var(--font-mono); }
.advanced-panel[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.advanced-panel[open] > summary::before { transform: rotate(45deg); }
.advanced-panel > div { padding: 10px; }
.advanced-panel .object-list, .advanced-panel .feature-list, .advanced-panel .civilization-list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.coast-system, .curve-card { min-width: 0; }
.view-segment { width: 100%; }

.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 12px 0; }
.field label { color: var(--text-soft); font-size: 12px; font-weight: 650; }
.field output { min-width: 44px; color: #ee8b85; font: 700 11px/1 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.field input[type="range"] { grid-column: 1 / -1; width: 100%; }
.field-help { grid-column: 1 / -1; color: var(--subtle); font-size: 11px; line-height: 1.5; }
input[type="range"] { height: 20px; margin: 0; padding: 0; appearance: none; background: transparent; accent-color: var(--accent-strong); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -5.5px; appearance: none; border: 2px solid #ffe4e1; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line-strong); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #ffe4e1; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--accent-strong); }

.name-field, .preset-picker > label, .entity-fields > label, .object-card-body > label, .object-search {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.name-field + .name-field { margin-top: 9px; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: 0;
  color: var(--text);
  background: var(--surface-0);
  font-size: 12px;
  transition: border-color .15s ease, background .15s ease;
}
textarea { min-height: 108px; padding-block: 9px; resize: vertical; line-height: 1.6; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--accent-strong); background: #1c2421; }
input[type="color"] { min-height: 34px; padding: 3px; }
input[type="search"] { appearance: none; }

.number-setting { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 10px; margin: 11px 0; color: var(--text-soft); font-size: 12px; }
.number-setting > span { display: grid; gap: 2px; }
.number-setting small { color: var(--subtle); font: 600 10px/1.4 var(--font-mono); }
.number-setting input { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.segment, .grid-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 8px; background: var(--surface-0); }
.segment.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segment button, .grid-picker button {
  min-height: 31px;
  padding: 4px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}
.segment button:hover, .grid-picker button:hover { color: var(--text); background: var(--surface-2); }
.segment button.active, .grid-picker button.active { border-color: rgba(240, 75, 67, .36); color: #fff0ef; background: var(--accent-soft); }
.grid-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-row, .entity-check { display: flex !important; align-items: center; gap: 8px; min-height: 36px; margin: 5px 0; color: var(--text-soft); font-size: 12px; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.metric { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-0); }
.metric b, .metric span { display: block; }
.metric b { color: var(--text); font: 700 14px/1.2 var(--font-mono); }
.metric span { margin-top: 3px; color: var(--subtle); font-size: 10px; }

.coast-random-actions, .object-studio-actions, .curve-actions, .context-actions, .entity-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.coast-random-actions .random-button { margin: 0; }
.coast-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.coast-preset-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coast-preset-grid button {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  background: var(--surface-0);
  text-align: left;
}
.coast-preset-grid.compact button { min-height: 38px; text-align: center; }
.coast-preset-grid button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.coast-preset-grid button.active { border-color: var(--accent-strong); color: #fff3f2; background: var(--accent-soft); }
.coast-preset-grid b { font-size: 12px; }
.coast-preset-grid small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.apply-coast { margin-top: 8px; }

.preset-summary { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-0); }
.feature-policy { margin: 9px 0 6px; padding: 9px; border: 1px solid rgba(225, 58, 51, .2); border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(225, 58, 51, .09), rgba(255, 255, 255, .015)); }
.feature-policy .section-title { margin-bottom: 7px; }
.feature-policy p { margin: 7px 1px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.preset-summary > b { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 7px; color: #f19791; background: var(--accent-soft); font-size: 17px; }
.preset-summary > span { min-width: 0; }
.preset-summary strong, .preset-summary small { display: block; }
.preset-summary strong { color: var(--text-soft); font-size: 12px; }
.preset-summary small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.terrain-library { display: grid; gap: 10px; max-height: 310px; margin-top: 8px; padding-right: 3px; overflow: auto; scrollbar-width: thin; }
.terrain-library section { display: grid; gap: 5px; }
.terrain-library section > header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.terrain-library section > header strong { color: var(--text-soft); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.terrain-library section > header small { font: 600 10px/1 var(--font-mono); }
.terrain-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.terrain-preset-grid button {
  display: grid;
  grid-template-rows: 34px auto auto;
  place-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-soft);
  background: var(--surface-0);
}
.terrain-preset-grid button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.terrain-preset-grid button.active { border-color: var(--accent-strong); color: #fff3f2; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(240, 75, 67, .14); }
.terrain-preset-grid img { width: 54px; height: 34px; object-fit: contain; opacity: .8; filter: invert(82%) sepia(10%) saturate(650%) hue-rotate(111deg); }
.terrain-preset-grid span { display: grid; place-items: center; width: 34px; height: 34px; color: #f19791; font-size: 18px; }
.terrain-preset-grid strong { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.terrain-preset-grid button > small { max-width: 100%; overflow: hidden; color: var(--muted); font: 600 10px/1.2 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.preset-summary > img, .preset-summary > span[aria-hidden] { flex: 0 0 auto; width: 54px; height: 40px; object-fit: contain; color: #f19791; font-size: 20px; text-align: center; filter: invert(54%) sepia(68%) saturate(1515%) hue-rotate(325deg) brightness(101%); }
.preset-summary > span[aria-hidden] { display: grid; place-items: center; filter: none; }
.object-geometry-note { display: grid; gap: 2px; margin: 0 0 8px; padding: 8px 9px; border-left: 2px solid var(--accent); color: var(--text-soft); background: var(--accent-soft); }
.object-geometry-note strong { font-size: 12px; }
.object-geometry-note small { color: var(--muted); font-size: 10px; line-height: 1.45; }

.edge-audit > div { display: flex; align-items: flex-start; gap: 9px; }
.edge-audit i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.edge-audit.warning { border-color: rgba(208, 163, 95, .44); background: var(--warning-soft); }
.edge-audit.warning i { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.edge-audit span { display: grid; gap: 3px; }
.edge-audit strong { color: var(--text-soft); font-size: 12px; }
.edge-audit small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.edge-audit button { width: 100%; margin-top: 9px; border: 1px solid var(--line-strong); color: var(--text-soft); background: var(--surface-0); }
.edge-audit button:hover { border-color: var(--accent-strong); color: var(--text); }

.object-list, .feature-list, .civilization-list, .entity-groups { display: grid; gap: 6px; }
.object-row {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
}
.object-row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.object-row.active { border-color: var(--accent-strong); box-shadow: inset 3px 0 var(--accent); }
.object-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; color: #f19791; background: var(--accent-soft); }
.object-icon .ui-icon { width: 16px; height: 16px; }
.object-row strong, .object-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-row strong { color: var(--text-soft); font-size: 12px; }
.object-row small { margin-top: 2px; color: var(--subtle); font-size: 10px; }
.object-row > button {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--danger);
  background: transparent;
  font-size: 0;
}
.object-row > button::before, .dialog-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.object-row > button::after, .dialog-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.object-row > button:hover { border-color: rgba(209, 106, 106, .45); background: var(--danger-soft); }
.selected-editor { border-color: rgba(75, 162, 144, .5); background: var(--accent-soft); }
.curve-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.curve-actions button, .object-studio-actions button, .entity-actions button { border: 1px solid var(--line); color: var(--text-soft); background: var(--surface-0); }
.curve-actions button:hover, .object-studio-actions button:hover, .entity-actions button:hover { border-color: var(--accent-strong); color: var(--text); }

.feature-row {
  display: grid;
  grid-template-columns: 26px 72px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-0);
}
.feature-row.active, .civilization-row.active { border-color: var(--accent-strong); box-shadow: inset 3px 0 var(--accent); }
.feature-row > span { color: #f19791; font-size: 15px; text-align: center; }
.feature-row > span .ui-icon { width: 17px; height: 17px; }
.feature-row small { overflow: hidden; color: var(--subtle); font: 650 10px/1.3 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.feature-row input { height: 34px; }
.civilization-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-0); }
.civilization-row input[type="color"] { width: 38px; min-height: 36px; }

.object-search { margin-bottom: 10px; }
.object-studio-actions { margin-bottom: 10px; }
.entity-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.entity-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 7px 9px;
  color: var(--text-soft);
  list-style: none;
}
.entity-group > summary::-webkit-details-marker { display: none; }
.entity-group > summary:hover { background: var(--surface-2); }
.entity-group > summary > span { display: flex; align-items: center; gap: 8px; }
.entity-group > summary .ui-icon { width: 16px; height: 16px; color: #f19791; }
.entity-group > summary strong { font-size: 12px; }
.entity-group > summary small { color: var(--subtle); font: 700 10px/1 var(--font-mono); }
.entity-group[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.entity-group > .object-list { padding: 7px; }
.empty-entity { margin: 0; padding: 9px; color: var(--subtle); font-size: 11px; text-align: center; }

.entity-fields { display: grid; gap: 9px; }
.entity-fields > label { gap: 5px; }
.entity-fields p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.context-callout { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; margin: 0 0 10px; padding: 10px; border: 1px solid rgba(76, 160, 143, .38); border-radius: var(--radius-md); background: var(--accent-soft); }
.context-callout > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: #f4aaa5; background: rgba(100, 24, 21, .52); }
.context-callout p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.context-fields { margin-bottom: 9px; }
.context-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mobile-core-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.context-actions button { border: 1px solid var(--line); color: var(--text-soft); background: var(--surface-1); }
.context-actions button:hover { border-color: var(--accent-strong); color: var(--text); }
.context-actions button.danger, .entity-actions button:last-child { border-color: rgba(209, 106, 106, .42); color: #e69b9b; background: var(--danger-soft); }
.context-actions button.danger:hover, .entity-actions button:last-child:hover { border-color: var(--danger); color: #fff; background: #914d4d; }

.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.style-grid.featured { margin-bottom: 9px; }
.style-card {
  min-width: 0;
  min-height: 94px;
  padding: 0 0 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: var(--surface-1);
  text-align: left;
}
.style-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.style-card.active { border-color: var(--accent-strong); box-shadow: inset 0 -3px var(--accent); }
.style-preview { display: block; height: 53px; background: var(--preview); }
.style-card b, .style-card small { display: block; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-card b { margin-top: 7px; font-size: 12px; }
.style-card small { margin-top: 2px; color: var(--subtle); font-size: 10px; }

.typography-manager { display: grid; gap: 10px; }
.typography-preview { display: grid; place-items: center; min-height: 72px; padding: 13px; border: 1px solid #c7c8c0; border-radius: var(--radius-sm); color: var(--atlas-ink); background: var(--atlas-paper); text-align: center; }
.type-choice { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.type-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.type-colors label { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 42px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-0); font-size: 11px; }
.type-colors input { width: 35px !important; min-height: 28px !important; }
.type-range { display: grid; gap: 5px; }
.type-range > span { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.type-range output { color: #ee8b85; font-family: var(--font-mono); }

.label-style-editor { overflow: hidden; margin: 9px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.label-style-editor > summary { display: flex; align-items: center; min-height: 42px; padding: 7px 9px; color: var(--text-soft); list-style: none; font-size: 12px; font-weight: 650; }
.label-style-editor > summary::-webkit-details-marker { display: none; }
.label-style-editor > summary::before { content: "T"; display: grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; color: #ffd8d5; background: var(--accent-soft); font: 700 10px/1 var(--font-map); }
.label-style-editor > summary small { margin-left: auto; color: var(--subtle); font-size: 10px; }
.label-style-editor[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.label-style-editor > div { display: grid; gap: 8px; padding: 9px; }
.label-style-editor label { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.label-style-editor button { border: 1px solid var(--line-strong); color: var(--text-soft); background: var(--surface-0); }
.label-style-editor button:hover { border-color: var(--accent-strong); color: var(--text); }

/* 对话框与教学 */
dialog { max-width: calc(100vw - 28px); max-height: calc(100dvh - 28px); padding: 0; border: 0; color: var(--text); background: var(--surface-0); }
dialog::backdrop { background: rgba(8, 13, 12, .72); backdrop-filter: blur(7px); }
.dialog-close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: rgba(31, 39, 36, .9);
  font-size: 0;
}
.dialog-close:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.welcome-dialog { width: min(900px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 100px rgba(0, 0, 0, .58); }
.welcome-dialog[open] { display: grid; grid-template-columns: 35% 65%; }
.welcome-art {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  color: #f7f7f8;
  background-color: #120d0e;
  background-image: radial-gradient(circle at 24% 18%, rgba(201, 47, 41, .48), transparent 33%), linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(145deg, #2b1717, #0b0a0b 70%);
  background-size: auto, 28px 28px, 28px 28px, auto;
}
.topo-preview {
  position: absolute;
  top: 43%;
  left: 50%;
  width: 236px;
  max-width: calc(100% - 34px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(220, 241, 234, .32);
  border-radius: 6px;
  background: #9bbbc2;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
  transform: translate(-50%, -50%);
}
.topo-preview svg { display: block; width: 100%; height: 100%; }
.welcome-art > b, .welcome-art > small { position: absolute; z-index: 2; left: 22px; }
.welcome-art > b { bottom: 42px; font: 700 13px/1 var(--font-map); letter-spacing: .18em; }
.welcome-art > small { bottom: 22px; color: rgba(236, 246, 242, .68); font-size: 10px; }
.welcome-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 34px 38px 32px; background: var(--surface-0); }
.welcome-copy[hidden] { display: none !important; }
.welcome-copy > small { color: var(--accent-strong); font: 700 10px/1.3 var(--font-mono); letter-spacing: .1em; }
.welcome-copy h1 { margin: 11px 0 10px; color: var(--text); font: 700 clamp(28px, 3.2vw, 39px)/1.15 var(--font-map); letter-spacing: -.02em; }
.welcome-copy > p { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.project-entry-menu { display: grid; gap: 8px; }
.project-entry-menu > button { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 68px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--text-soft); background: var(--surface-1); text-align: left; }
.project-entry-menu > button:hover { border-color: var(--accent-strong); color: var(--text); background: var(--surface-2); transform: translateY(-1px); }
.project-entry-menu > button.primary { border-color: #a8322c; color: #fff; background: linear-gradient(135deg, #c6322c, #8f211d); }
.project-entry-menu > button > i { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 10px; font: 700 16px/1 var(--font-mono); font-style: normal; opacity: .86; }
.project-entry-menu strong, .project-entry-menu small { display: block; }
.project-entry-menu strong { font-size: 13px; }
.project-entry-menu small { margin-top: 4px; color: inherit; font-size: 11px; line-height: 1.5; opacity: .78; }
.tutorial-menu { display: grid; gap: 7px; }
.tutorial-menu > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text-soft);
  background: var(--surface-1);
  text-align: left;
}
.tutorial-menu > button:hover { border-color: var(--accent-strong); background: var(--surface-2); transform: translateY(-1px); }
.tutorial-menu > button.recommended { border-color: rgba(240, 75, 67, .62); box-shadow: inset 3px 0 var(--accent-strong); background: linear-gradient(90deg, rgba(128, 30, 26, .3), var(--surface-1) 54%); }
.tutorial-menu > button:active { transform: translateY(0); }
.tutorial-menu > button > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #ffd0cd; background: var(--accent-soft); font: 700 10px/1 var(--font-mono); font-style: normal; }
.tutorial-menu strong, .tutorial-menu small { display: block; }
.tutorial-menu strong { color: var(--text); font-size: 13px; }
.tutorial-menu small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.tutorial-menu em { color: var(--subtle); font: 650 10px/1.2 var(--font-mono); font-style: normal; white-space: nowrap; }
.tutorial-menu > button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.tutorial-menu > button:disabled em { color: #d0a66f; }
.welcome-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.welcome-actions button { display: grid; min-height: 58px; padding: 11px 12px; border-radius: var(--radius-md); text-align: left; }
.welcome-actions strong, .welcome-actions span { display: block; }
.welcome-actions strong { font-size: 13px; }
.welcome-actions span { margin-top: 4px; font-size: 11px; line-height: 1.5; opacity: .82; }
.primary { border: 1px solid #a8322c; color: #fff; background: var(--accent); }
.primary:hover { background: var(--accent-hover); }
.secondary { border: 1px solid var(--line-strong); color: var(--text-soft); background: var(--surface-1); }
.secondary:hover { color: var(--text); background: var(--surface-2); }
.demo-boundary { margin-top: 14px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-1); }
.demo-boundary b, .demo-boundary span { display: block; }
.demo-boundary b { color: var(--text-soft); font-size: 11px; }
.demo-boundary span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.55; }

.follow-dialog { position: relative; width: min(430px, calc(100vw - 28px)); padding: 28px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.follow-dialog > small { color: var(--accent-strong); font: 700 10px/1.2 var(--font-mono); letter-spacing: .1em; }
.follow-dialog h2 { margin: 10px 0 7px; font-size: 24px; }
.follow-dialog p { margin: 0 0 19px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.follow-dialog a { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: var(--radius-sm); color: #fff; background: var(--accent); font-size: 12px; font-weight: 750; text-decoration: none; }
.follow-dialog a:hover { background: var(--accent-hover); }

.object-card-dialog { position: relative; width: min(540px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.object-card-hero { display: grid; grid-template-columns: 66px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 3px 14px; min-height: 174px; padding: 25px 27px; background-color: #211516; background-image: radial-gradient(circle at 16% 34%, rgba(225, 58, 51, .22), transparent 30%), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: auto, 22px 22px, 22px 22px; }
.object-card-hero > small { grid-column: 1 / 3; color: #ffaaa4; font: 700 11px/1.2 var(--font-mono); letter-spacing: .1em; }
.object-card-hero > b { grid-row: 2 / 4; display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(219, 239, 232, .24); border-radius: 12px; color: #fff; background: rgba(14, 29, 25, .32); font-size: 28px; }
.object-card-hero > input { align-self: end; min-height: 40px !important; padding: 0 !important; border-width: 0 0 1px !important; border-radius: 0 !important; background: transparent !important; font-size: 24px !important; font-weight: 750; }
.object-card-hero > span { color: #c9c5c6; font-size: 12px; }
.object-card-body { display: grid; gap: 14px; padding: 21px 27px 25px; }
.object-card-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.object-card-meta > span { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-1); }
.object-card-meta small { color: var(--subtle); font: 700 10px/1.2 var(--font-mono); }
.object-card-meta b { color: var(--text-soft); font-size: 12px; }
.object-card-body > p { margin: 0; color: var(--subtle); font-size: 11px; line-height: 1.5; }

.tutorial-layer { display: contents; pointer-events: none; }
.tutorial-layer[hidden] { display: none; }
.tutorial-shade { position: fixed; z-index: 100; inset: 0; background: rgba(7, 13, 11, .46); pointer-events: auto; }
.coach {
  position: fixed;
  z-index: 103;
  width: 310px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: rgba(30, 38, 35, .98);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
}
.coach-progress { display: flex; gap: 4px; margin-bottom: 10px; }
.coach-progress i { flex: 1; height: 3px; border-radius: 999px; background: var(--line-strong); }
.coach-progress i.done { background: var(--accent-strong); }
.coach > small { color: var(--accent-strong); font: 700 10px/1.2 var(--font-mono); }
.coach h2 { margin: 5px 0 6px; font-size: 18px; }
.coach p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.coach .coach-rule { margin-top: 9px; padding: 9px 10px; border-left: 3px solid var(--accent-strong); border-radius: 0 6px 6px 0; color: var(--text-soft); background: var(--accent-soft); }
.coach > div:last-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; }
.coach button { min-height: 38px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; }
.coach-skip { border: 1px solid transparent; color: var(--muted); background: transparent; }
.coach-next { padding: 0 11px; border: 1px solid #a8322c; color: #fff; background: var(--accent); }
.tutorial-parent-focus { position: relative; z-index: 101 !important; }
.tutorial-focus { position: relative !important; z-index: 102 !important; pointer-events: auto !important; box-shadow: 0 0 0 4px #ffe4e1, 0 0 0 8px rgba(240, 75, 67, .82), var(--shadow-2) !important; }
.tutorial-map-focus { z-index: 101 !important; box-shadow: inset 0 0 0 4px #ffe4e1, inset 0 0 0 8px rgba(240, 75, 67, .82) !important; }
.toast { position: fixed; z-index: 130; top: 68px; left: 50%; max-width: min(430px, calc(100vw - 24px)); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: rgba(29, 38, 35, .97); box-shadow: var(--shadow-1); font-size: 12px; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-purpose-control { display: none; }

@media (max-width: 1280px) {
  .brand small, .test-build-badge { display: none; }
  .topbar { grid-template-columns: auto minmax(130px, 180px) minmax(330px, 1fr) auto; }
  .topbar > .test-build-badge { display: none; }
  .touch-tip { display: none; }
}

/* 平板：属性为右侧抽屉 */
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --topbar-h: 52px; }
  .topbar { grid-template-columns: auto minmax(120px, 1fr) auto auto; gap: 7px; padding: 0 8px; }
  .brand > span:last-child, .test-build-badge { display: none; }
  .document-tools { justify-self: end; }
  .workspace-progress { display: none; }
  .map-purpose-control > span { display: none; }
  .top-actions [data-action="open-tutorial-hub"] { display: inline-flex; }
  .workspace { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .inspector {
    position: absolute;
    z-index: 28;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, calc(100vw - var(--rail-w)));
    padding: 17px 15px 24px 58px;
    border-left: 1px solid var(--line-strong);
    box-shadow: -14px 0 38px rgba(4, 9, 8, .32);
    transform: translateX(0);
    transition: transform .2s ease;
  }
  .inspector.collapsed { transform: translateX(calc(100% - 44px)); box-shadow: none; }
  .drawer-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 44px;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--line);
    color: var(--accent-strong);
    background: var(--surface-1);
  }
  .drawer-handle span { display: block; width: 3px; height: 34px; border-radius: 999px; background: currentColor; }
  .inspector.collapsed #inspectorContent { visibility: hidden; }
  .workspace:has(.inspector:not(.collapsed)) .map-toolbar { left: 12px; right: calc(min(360px, calc(100vw - var(--rail-w))) + 12px); max-width: none; transform: none; }
  .tool, .brush-picker button { min-width: 44px; min-height: 44px; }
  .map-toolbar { min-height: 52px; }
}

@media (max-width: 1100px) {
  :root { --status-h: 46px; }
  button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, summary { min-height: 44px; }
  .brand, .icon-button, .zoom-stack button { min-width: 44px; }
  input[type="range"] { height: 44px; }
  .check-row, .entity-check, .layer-row, .object-row, .feature-row, .civilization-row { min-height: 44px; }
  .layer-row { min-height: 45px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .zoom-stack, .zoom-stack button { height: 44px; }
  .layers-popover > header button, .selection-candidates > header button, .object-row > button, .dialog-close { width: 44px; height: 44px; }
  .random-button, .full-button, .text-button, .curve-actions button, .object-studio-actions button, .context-actions button, .entity-actions button, .edge-audit button, .label-style-editor button, .label-style-editor > summary, .advanced-panel > summary { min-height: 44px; }
  .coach button { min-width: 44px; min-height: 44px; }
  .object-row { grid-template-columns: 29px minmax(0, 1fr) 44px; }
  .civilization-row { grid-template-columns: 44px minmax(0, 1fr); }
  .civilization-row input[type="color"], .type-colors input { width: 44px !important; min-height: 44px !important; }
  .object-card-hero > input { min-height: 44px !important; }
  .follow-dialog a { min-height: 44px; }
}

/* 手机：全屏地图、单一底部工作区栏、单一属性抽屉 */
@media (max-width: 760px) {
  :root { --topbar-h: 50px; --status-h: 48px; }
  .app-shell { grid-template-rows: var(--topbar-h) minmax(0, 1fr); }
  .topbar { grid-template-columns: auto minmax(74px, 1fr) auto; gap: 6px; padding: 0 7px; }
  .brand { width: 44px; min-width: 44px; justify-content: center; }
  .brand-mark { width: 36px; height: 36px; }
  .brand > span:last-child, .test-build-badge, .document-tools { display: none; }
  .mobile-purpose-control { display: block; }
  .world-name { height: 40px; }
  .world-name input { padding-inline: 8px; font-size: 11px; }
  .top-actions { gap: 3px; }
  .top-actions [data-action="redo"] { display: none; }
  .top-actions button { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .top-actions [data-action="open-tutorial-hub"] { display: none; }
  .top-actions .ghost[data-action="open-project"], .top-actions .ghost[data-action="export-png"], .top-actions .save-button { position: relative; font-size: 0; }
  .top-actions .ghost[data-action="open-project"]::before, .top-actions .ghost[data-action="export-png"]::before, .top-actions .save-button::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--mobile-icon) center / contain no-repeat;
    mask: var(--mobile-icon) center / contain no-repeat;
  }
  .top-actions .ghost[data-action="open-project"] { --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h7l2 2h9v11H3Z'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
  .top-actions .ghost[data-action="export-png"] { --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4'/%3E%3Cpath d='M5 18v3h14v-3'/%3E%3C/svg%3E"); }
  .top-actions .save-button { --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h12l2 2v16H5Z'/%3E%3Cpath d='M8 3v6h8V3M8 21v-7h8v7'/%3E%3C/svg%3E"); }

  .workspace { display: block; position: relative; min-height: 0; overflow: hidden; }
  .map-stage { position: absolute; inset: 0 0 calc(var(--mobile-stage-h) + env(safe-area-inset-bottom)) 0; width: auto; height: auto; }
  .stage-rail {
    position: absolute;
    z-index: 35;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1px;
    height: calc(var(--mobile-stage-h) + env(safe-area-inset-bottom));
    padding: 4px 5px env(safe-area-inset-bottom);
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-top: 1px solid var(--line);
    background: rgba(25, 32, 30, .98);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .stage-rail::-webkit-scrollbar { display: none; }
  .stage-rail button {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: none;
    grid-template-rows: 25px auto;
    place-items: center;
    width: auto;
    min-width: 58px;
    height: 57px;
    padding: 4px 2px 3px;
    border-radius: 9px;
  }
  .stage-rail button::before { width: 19px; height: 19px; }
  .stage-rail button::after { display: none; }
  .stage-rail button > b { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: currentColor; font-size: 11px; line-height: 1.2; white-space: nowrap; }
  .stage-rail button > small { display: none; }

  .map-heading { top: 9px; left: 9px; max-width: calc(100% - 70px); padding: 7px 9px 8px; }
  .map-heading strong { font-size: 13px; }
  .map-heading span { display: none; }
  .layers-button { top: 9px; right: 9px; width: 44px; height: 44px; justify-content: center; padding: 0; }
  .layers-button::after { display: none; }
  .layers-button b { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; }
  .layers-popover { top: 7px; right: 7px; bottom: 7px; left: 7px; width: auto; max-height: none; border-radius: 13px; }
  .map-legend { display: none; }
  .map-statusbar { gap: 7px; padding-inline: 7px; }
  .map-statusbar .precision-badge, .map-statusbar .touch-tip, #coordinateValue { display: none; }
  .status-readouts { justify-content: flex-start; gap: 8px; }
  #qualityStatus { flex: 0 0 auto; min-width: 48px; max-width: 112px; }
  #statusMode { flex: 1; text-align: left; }
  .zoom-stack { margin-left: auto; }
  .zoom-stack button { width: 44px; min-width: 44px; }
  .map-toolbar { right: 7px; bottom: calc(var(--status-h) + 7px); left: 7px; max-width: none; min-height: 50px; transform: none; justify-content: flex-start; }
  .toolbar-group > small { display: none; }
  .toolbar-group + .toolbar-group { padding-left: 3px; }
  .tool { min-width: 44px; height: 44px; padding: 0 11px; }
  .tool span { font-size: 11px; }
  .brush-picker > span { display: none; }
  .brush-picker button { width: 44px; height: 44px; }

  .inspector {
    position: absolute;
    z-index: 30;
    right: 6px;
    bottom: calc(var(--mobile-stage-h) + env(safe-area-inset-bottom) + 6px);
    left: 6px;
    width: auto;
    max-height: min(50dvh, calc(100% - var(--mobile-stage-h) - 16px));
    padding: 58px 13px 18px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    background: rgba(27, 34, 32, .985);
    box-shadow: 0 -16px 48px rgba(3, 8, 6, .46);
    transform: translateY(0);
    transition: transform .22s ease, background .18s ease, box-shadow .18s ease;
  }
  .drawer-handle {
    position: absolute;
    top: 0;
    left: 10px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 44px;
    padding: 0;
    border: 0;
    color: var(--accent-strong);
    background: transparent;
    transform: none;
  }
  .drawer-handle span { display: block; width: 32px; height: 3px; border-radius: 999px; background: currentColor; }
  .drawer-state-actions { position: absolute; z-index: 3; top: 7px; right: 8px; display: flex; gap: 3px; }
  .drawer-state-actions button { min-width: 52px; height: 44px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
  .drawer-state-actions button.active { border-color: rgba(240, 75, 67, .38); color: #ffd2cf; background: var(--accent-soft); }
  .inspector.sheet-half { max-height: min(50dvh, calc(100% - var(--mobile-stage-h) - 16px)); }
  .inspector.sheet-half .workspace-guide { gap: 2px; margin-bottom: 9px; padding: 8px 9px; }
  .inspector.sheet-half .workspace-guide span { display: none; }
  .inspector.sheet-half .panel-head { margin-bottom: 9px; }
  .inspector.sheet-half .panel-head p { display: none; }
  .inspector.sheet-half[data-inspector-context="selected"] .panel-head h2 { margin-bottom: 0; font-size: 16px; }
  .inspector.sheet-half[data-inspector-context="selected"] .geography-suitability { margin-bottom: 8px; }
  .inspector.sheet-half[data-inspector-context="selected"] .object-core-fields { margin-block: 8px; }
  .inspector.sheet-half[data-inspector-context="selected"] .object-advanced { margin-bottom: 0; }
  .inspector.sheet-half[data-inspector-stage="climate"] .terrain-preset-core .preset-summary small { display: none; }
  .inspector.sheet-half[data-inspector-stage="climate"] .terrain-preset-core .field { margin-block: 8px; }
  .inspector.sheet-expanded { top: 6px; height: auto; max-height: none; border-radius: 15px; }
  .inspector.collapsed {
    height: 44px;
    max-height: 44px;
    padding: 0;
    overflow: hidden;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: translateY(calc(100% - 44px));
    pointer-events: none;
  }
  .inspector.collapsed .drawer-handle { border: 1px solid var(--line-strong); border-radius: 12px 12px 0 0; background: rgba(27, 34, 32, .96); pointer-events: auto; }
  .inspector.collapsed .drawer-handle { right: 0; left: auto; transform: none; }
  .inspector.collapsed .drawer-state-actions { display: none; }
  .inspector.collapsed #inspectorContent { visibility: hidden; }
  .workspace:has(.inspector.collapsed) .map-toolbar { right: 66px; }
  .workspace:has(.inspector.collapsed) .map-statusbar { padding-right: 58px; }
  .workspace:has(.inspector:not(.collapsed)) .map-toolbar { visibility: hidden; opacity: 0; pointer-events: none; }
  .inspector.tutorial-parent-focus { max-height: 58dvh; transition: none !important; }
  .selection-candidates { right: 7px !important; bottom: calc(var(--status-h) + var(--mobile-stage-h) + 8px); left: 7px !important; top: auto !important; width: auto; max-height: 42dvh; }

  .panel-head h2 { font-size: 17px; }
  .coast-preset-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-actions, .curve-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 18px); }
  .welcome-dialog[open] { display: block; overflow-y: auto; }
  .welcome-art { min-height: 154px; }
  .topo-preview { top: 50%; width: 178px; }
  .welcome-art > b { bottom: 18px; }
  .welcome-art > small { display: none; }
  .welcome-copy { padding: 24px 18px 21px; }
  .welcome-copy h1 { font-size: 25px; }
  .tutorial-menu > button { grid-template-columns: 34px minmax(0, 1fr); min-height: 64px; }
  .tutorial-menu em { grid-column: 2; margin-top: -5px; }
  .welcome-actions { grid-template-columns: 1fr; }
  .welcome-actions button { min-height: 62px; }
  .object-card-dialog { width: 100vw; max-width: 100vw; max-height: 86dvh; margin: auto 0 0; overflow-y: auto; border-width: 1px 0 0; border-radius: 15px 15px 0 0; }
  .object-card-hero { min-height: 150px; padding: 21px 18px; grid-template-columns: 54px minmax(0, 1fr); gap: 3px 10px; }
  .object-card-hero > b { width: 54px; height: 54px; }
  .object-card-hero > input { font-size: 20px !important; }
  .object-card-body { padding: 18px; }
  .coach { left: 10px !important; right: 10px !important; top: auto !important; bottom: calc(var(--mobile-stage-h) + env(safe-area-inset-bottom) + 10px) !important; width: auto; }
  .tutorial-layer.target-inspector .coach, .tutorial-layer.target-bottom .coach { top: 58px !important; bottom: auto !important; }
  .coach button { min-width: 44px; min-height: 44px; }
  .toast { top: calc(58px + env(safe-area-inset-top)); }
}

@media (max-width: 380px) {
  .map-heading small { display: none; }
  .status-readouts #coordinateValue { display: none; }
  .zoom-stack output { min-width: 36px; }
  .feature-row { grid-template-columns: 24px 58px minmax(0, 1fr); }
}

@media (min-width: 761px) and (max-height: 500px) {
  .coach {
    width: 292px;
    max-height: calc(100vh - 24px);
    padding: 11px 12px;
    overflow-y: auto;
  }
  .coach-progress { margin-bottom: 6px; }
  .coach h2 { margin: 3px 0 4px; font-size: 15px; }
  .coach p { font-size: 12px; line-height: 1.5; }
  .coach .coach-rule { margin-top: 5px; padding: 5px 7px; }
  .coach > div:last-child { margin-top: 7px; }
}

@media (max-height: 620px) and (max-width: 760px) {
  .inspector { max-height: 64dvh; }
  .welcome-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .tool.active, .stage-rail button.active { outline: 2px solid Highlight; }
  .ui-icon { stroke: currentColor; }
  .stage-rail button::before, .icon-button::before, .zoom-stack button::before, .layers-button::before { background: ButtonText; }
}