*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --bg: #0a0c12;
  --surface: #11141d;
  --surface2: #171b27;
  --surface3: #1e2332;
  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.17);
  --text: #e8edf7;
  --muted: #8491a9;
  --muted2: #7b879c;
  --accent: #f97316;
  --accent-2: #fb923c;
  --accent-strong: #c2410c;
  --accent-dim: rgba(249, 115, 22, 0.14);
  --green: #34d399;
  --red: #f43f5e;
  --yellow: #fbbf24;
  --radius: 9px;
  --side: 396px;
  --top: 54px;
  --map-control-size: 34px;
  --map-control-edge: 12px;
  --map-control-inner-gap: 4px;
  --map-control-stack-gap: 10px;
  --map-control-gap: 6px;
  --topbar-bg: linear-gradient(180deg, rgba(19,23,33,.96), rgba(13,16,24,.96));
  --panel-bg: rgba(17,20,29,.98);
  --panel-bg-strong: rgba(14,17,26,.9);
  --tabs-bg: rgba(15,18,27,.8);
  --footer-bg: rgba(12,15,23,.8);
  --toast-bg: #1f1f1f;
  --drop-card-bg: rgba(11,14,21,.92);
  --map-void: #050811;
  --map-control-bg: rgba(11,14,21,.86);
  --map-control-shadow: 0 6px 18px rgba(0,0,0,.28);
  --map-scale-bg: rgba(8,10,16,.62);
  --map-scale-border: rgba(255,255,255,.18);
  --map-scale-text: rgba(220,232,255,.6);
  --map-tooltip-bg: rgba(9,12,19,.97);
  --cp-input-bg: rgba(0,0,0,.2);
  --cp-input-focus-bg: #0d1018;
  --cp-btn-bg: rgba(0,0,0,.14);
  --input-focus-bg: #1a1e2b;
  --hover-subtle: rgba(255,255,255,.03);
  --preview-bg: #0b0e15;
  --preview-bg-2: #080b12;
  --checker: rgba(255,255,255,.018);
  --checker-strong: rgba(255,255,255,.04);
  --code-bg: #0a0d14;
  --code-text: #c9d6ea;
  --code-inline-text: #ffd0a8;
  --prose-text: #bcc7da;
  --warn-text: #e8d9a8;
  --warn-error-text: #f3c6ce;
  --warn-info-text: #bfe6ff;
  --empty-overlay:
    radial-gradient(circle at 50% 38%, rgba(249,115,22,.09), transparent 56%),
    linear-gradient(180deg, rgba(5,8,17,.35), rgba(5,8,17,.82));
  --empty-card-bg: rgba(14,17,26,.9);
  --backdrop: rgba(3,5,9,.72);
  --scrollbar-thumb: rgba(255,255,255,.12);
  --scrollbar-thumb-hover: rgba(255,255,255,.2);
  --theme-swatch-border: rgba(255,255,255,.08);
  --cp-role-border: rgba(255,255,255,.28);
  --cp-role-ring: rgba(255,255,255,.035);
  --cp-label-bg: rgba(6,9,15,.66);
  --cp-label-shadow: rgba(0,0,0,.65);
  --shadow-menu: 0 18px 50px rgba(0,0,0,.55);
  --shadow-card: 0 30px 90px rgba(0,0,0,.55);
  --shadow-dialog: 0 30px 100px rgba(0,0,0,.7);
  --shadow-toast: 0 6px 16px rgba(0,0,0,.18), 0 3px 6px -4px rgba(0,0,0,.2), 0 9px 28px 8px rgba(0,0,0,.08);
  --shadow-drop: 0 20px 70px rgba(0,0,0,.6);
  --shadow-tooltip: 0 10px 30px rgba(0,0,0,.5);
  --font: "Inter", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface2: #f6f8fc;
  --surface3: #e9eef6;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.22);
  --text: #172033;
  --muted: #5c6a80;
  --muted2: #647184;
  --accent: #ea580c;
  --accent-2: #c2410c;
  --accent-strong: #9a3412;
  --accent-dim: rgba(234, 88, 12, 0.10);
  --green: #047857;
  --red: #dc2626;
  --yellow: #a16207;
  --topbar-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,252,.96));
  --panel-bg: rgba(255,255,255,.99);
  --panel-bg-strong: rgba(255,255,255,.96);
  --tabs-bg: rgba(248,250,252,.9);
  --footer-bg: rgba(248,250,252,.9);
  --toast-bg: #ffffff;
  --drop-card-bg: rgba(255,255,255,.96);
  --map-void: #e9edf4;
  --map-control-bg: rgba(255,255,255,.94);
  --map-control-shadow: 0 6px 18px rgba(15,23,42,.14);
  --map-scale-bg: rgba(255,255,255,.85);
  --map-scale-border: rgba(15,23,42,.2);
  --map-scale-text: rgba(30,41,59,.72);
  --map-tooltip-bg: rgba(255,255,255,.98);
  --cp-input-bg: rgba(15,23,42,.05);
  --cp-input-focus-bg: #ffffff;
  --cp-btn-bg: rgba(15,23,42,.04);
  --input-focus-bg: #ffffff;
  --hover-subtle: rgba(15,23,42,.04);
  --preview-bg: #eef1f6;
  --preview-bg-2: #e8edf4;
  --checker: rgba(15,23,42,.04);
  --checker-strong: rgba(15,23,42,.07);
  --code-bg: #f5f7fb;
  --code-text: #334155;
  --code-inline-text: #b45309;
  --prose-text: #3f4c63;
  --warn-text: #7c5a14;
  --warn-error-text: #9f1239;
  --warn-info-text: #075985;
  --empty-overlay:
    radial-gradient(circle at 50% 38%, rgba(249,115,22,.08), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.82));
  --empty-card-bg: rgba(255,255,255,.94);
  --backdrop: rgba(15,23,42,.42);
  --scrollbar-thumb: rgba(15,23,42,.18);
  --scrollbar-thumb-hover: rgba(15,23,42,.28);
  --theme-swatch-border: rgba(15,23,42,.12);
  --cp-role-border: rgba(15,23,42,.25);
  --cp-role-ring: rgba(15,23,42,.04);
  --cp-label-bg: rgba(6,9,15,.66);
  --cp-label-shadow: rgba(0,0,0,.65);
  --shadow-menu: 0 18px 50px rgba(15,23,42,.16);
  --shadow-card: 0 30px 90px rgba(15,23,42,.16);
  --shadow-dialog: 0 30px 100px rgba(15,23,42,.2);
  --shadow-toast: 0 6px 16px rgba(15,23,42,.08), 0 3px 6px -4px rgba(15,23,42,.12), 0 9px 28px 8px rgba(15,23,42,.05);
  --shadow-drop: 0 20px 70px rgba(15,23,42,.18);
  --shadow-tooltip: 0 10px 30px rgba(15,23,42,.16);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.spacer { flex: 1; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }

#ui { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
html.i18n-pending #ui { visibility: hidden; }

/* ── Top bar ─────────────────────────────────────────── */
.topbar {
  height: var(--top);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1100;
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { color: var(--accent); flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(249,115,22,.35)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; gap: 4px; min-width: 0; }
.brand-title { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.brand-sub { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar .actions-toggle { display: none; flex-shrink: 0; }
.action-label { display: none; }
.separator { width: 1px; height: 20px; background: var(--border); }
.icon-menu { flex-shrink: 0; }
.icon-menu > summary { list-style: none; }
.icon-menu > summary::-webkit-details-marker { display: none; }
.icon-menu[open] > summary {
  background: var(--accent-dim);
  border-color: rgba(249,115,22,.55);
  color: var(--accent-2);
}
.icon-menu .menu-panel {
  width: 180px;
  padding: 6px;
  transform-origin: top right;
}
.icon-menu-panel { gap: 3px; }
.icon-option .mi-leading { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.icon-option .mi-check {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--accent-2);
  opacity: 0;
  flex-shrink: 0;
}
.icon-option.active {
  background: var(--accent-dim);
  color: var(--accent-2);
}
.icon-option.active .mi-leading { color: var(--accent-2); }
.icon-option.active .mi-check { opacity: 1; }

/* Dropdown panels animate in and out; closeMenu() keeps them mounted briefly. */
details.menu[open]:not(.is-closing) > .menu-panel { animation: menuIn .17s cubic-bezier(.2,.8,.2,1); }
details.menu.is-closing > .menu-panel {
  animation: menuOut .15s ease forwards;
  pointer-events: none;
}
@keyframes menuIn {
  from { opacity: 0; scale: .97; }
  to { opacity: 1; scale: 1; }
}
@keyframes menuOut {
  from { opacity: 1; scale: 1; }
  to { opacity: 0; scale: .98; }
}
@media (prefers-reduced-motion: reduce) {
  details.menu > .menu-panel { animation: none !important; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  user-select: none;
  transition: background .14s, border-color .14s, color .14s, transform .06s;
}
.btn:hover { background: var(--surface3); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--accent-strong), #9a3412);
  border-color: #fdba74;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(80, 28, 0, .3);
  box-shadow: 0 4px 16px rgba(154, 52, 18, .28);
}
.btn.primary .ico { filter: drop-shadow(0 1px 1px rgba(80, 28, 0, .3)); }
.btn.primary:hover { background: linear-gradient(180deg, #b45309, var(--accent-strong)); }
.btn.small { min-height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 6px; }
.btn.icon-btn { min-width: 34px; padding: 0 9px; font-size: 14px; }
.btn:disabled { opacity: .38; cursor: default; pointer-events: none; }
.btn.active { background: var(--accent-dim); border-color: rgba(249,115,22,.55); color: var(--accent-2); }
.ico { width: 14px; height: 14px; flex-shrink: 0; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .caret { display: inline-flex; align-items: center; font-size: 9px; color: var(--muted); margin-left: 1px; }
.menu .caret .ico { width: 11px; height: 11px; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 290px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-menu);
  z-index: 1000;
}
.menu-loading { padding: 10px; color: var(--muted); font-size: 11.5px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text);
  text-align: left;
}
.menu-item:hover { background: var(--surface3); }
.menu-item .mi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.menu-item .mi-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-item .mi-name { font-size: 12px; font-weight: 600; }
.menu-item .mi-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); }

.sample-panel { width: min(340px, calc(100vw - 24px)); padding: 0; gap: 0; overflow: hidden; }
.sample-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border-bottom: 1px solid var(--border);
  border-radius: 9px 9px 0 0;
  color: var(--muted);
}
.sample-search > .ico { width: 14px; height: 14px; flex-shrink: 0; }
.sample-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.sample-search input::placeholder { color: var(--muted); }
.sample-search input:focus-visible { outline: none; }
.sample-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.sample-panel:focus-within { border-color: var(--accent); }
.sample-search input::-webkit-search-cancel-button { display: none; }
.sample-search-clear {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
}
.sample-search-clear:hover { background: var(--surface3); color: var(--text); }
.sample-search-clear .ico { width: 12px; height: 12px; }
.sample-list {
  position: relative;
  max-height: min(420px, 55vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px;
}
.sample-list-spacer { position: relative; width: 100%; }
.sample-list .menu-item {
  position: absolute;
  left: 5px;
  right: 5px;
  width: auto;
  height: 48px;
  padding: 6px 8px;
  border-radius: 6px;
}
.sample-list .menu-item.is-active { background: var(--surface3); }
.sample-list .mi-name,
.sample-list .mi-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-list .menu-loading,
.sample-empty { position: static; }
.sample-empty { padding: 18px 12px; color: var(--muted); font-size: 11.5px; text-align: center; }
.sample-footer {
  padding: 6px 9px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
}
.chip-btn.chip-more { border-style: dashed; color: var(--muted); }

/* ── Workspace ───────────────────────────────────────── */
#workspace { flex: 1; display: flex; min-height: 0; }
#map-wrap { flex: 1; min-width: 0; position: relative; overflow: hidden; background: var(--map-void); }
#map { width: 100%; height: 100%; background: var(--map-void); outline: none; }
#map:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#map.is-adding, #map.is-adding .leaflet-grab { cursor: crosshair !important; }

/* ── On-map artwork ──────────────────────────────────── */
.map-title {
  position: absolute;
  left: 26px;
  top: 22px;
  z-index: 650;
  max-width: min(62%, 720px);
  padding: 12px 26px 12px 14px;
  border-left: 4px solid var(--mt-accent, #ff2d75);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--mt-bg, rgba(5,8,17,.55)) 0%, var(--mt-bg-soft, rgba(5,8,17,.3)) 58%, transparent 100%);
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
  transition: opacity .15s;
}
.map-title.is-light { text-shadow: 0 1px 12px rgba(255,255,255,.55); }
.mt-eyebrow {
  color: var(--mt-accent, #ff2d75);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.3;
  text-transform: uppercase;
  min-height: 12px;
}
.mt-title {
  color: var(--mt-color, #fff);
  font-size: calc(27px * var(--mt-scale, 1) * var(--mt-title-scale, 1));
  font-weight: 750;
  letter-spacing: -.022em;
  line-height: 1.08;
  margin: 2px 0 4px;
  overflow-wrap: anywhere;
}
.mt-sub {
  color: var(--mt-color, #fff);
  opacity: .72;
  font-size: calc(11.5px * var(--mt-scale, 1) * var(--mt-sub-scale, 1));
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.35;
}

.map-legend {
  position: absolute;
  left: 26px;
  bottom: 22px;
  z-index: 650;
  min-width: 142px;
  padding: 10px 13px;
  border-radius: 9px;
  border: 1px solid rgba(127,127,127,.14);
  backdrop-filter: blur(8px);
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
}
.ml-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.ml-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.ml-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(127,127,127,.26);
  font-family: var(--mono);
  font-size: 9.5px;
  opacity: .66;
  white-space: nowrap;
}

.map-coords {
  position: absolute;
  right: 10px;
  bottom: 32px;
  z-index: 650;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--map-scale-bg);
  border: 1px solid var(--map-scale-border);
  color: var(--map-scale-text);
  font-family: var(--mono);
  font-size: 9.5px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.map-coords.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .map-coords { transition: none; }
}

.map-toolbar {
  position: absolute;
  top: calc(var(--map-control-edge) + var(--map-control-size) + var(--map-control-size) + var(--map-control-inner-gap) + var(--map-control-stack-gap));
  right: var(--map-control-edge);
  z-index: 700;
  display: flex;
  flex-direction: column;
  gap: var(--map-control-gap);
  max-height: calc(100% - 96px);
  overflow-y: auto;
  scrollbar-width: none;
}
.map-toolbar::-webkit-scrollbar { display: none; }
.map-btn {
  width: var(--map-control-size);
  height: var(--map-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--map-control-bg, rgba(11,14,21,.86));
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  backdrop-filter: blur(8px);
  box-shadow: var(--map-control-shadow, 0 6px 18px rgba(0,0,0,.28));
}
.map-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.map-btn.active { background: var(--accent-strong); color: #fff; border-color: var(--accent-2); }
.map-btn.active .ico { filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.map-btn .ico { width: 16px; height: 16px; }
.map-btn-add { font-size: 9.5px; font-weight: 750; letter-spacing: .02em; }

.add-hint {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  pointer-events: none;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  text-shadow: 0 1px 2px rgba(80, 28, 0, .32);
  box-shadow: 0 8px 28px rgba(249,115,22,.35);
  white-space: nowrap;
}
#workspace.add-mode .map-title { opacity: 0; visibility: hidden; }
.add-hint kbd {
  font-family: var(--mono);
  background: rgba(0,0,0,.24);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 4px;
  font-size: 10px;
}
.playback-hud {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 700;
  width: min(270px, calc(100% - 32px));
  padding: 8px 10px;
  border: 1px solid var(--map-scale-border);
  border-radius: 9px;
  background: var(--map-scale-bg);
  color: var(--map-scale-text);
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}
.playback-hud-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; }
#playback-hud-state { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#playback-hud.is-playing #playback-hud-state::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: playback-pulse 1.2s ease-in-out infinite;
}
@keyframes playback-pulse {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #playback-hud.is-playing #playback-hud-state::before { animation: none; opacity: 1; }
}
#playback-hud-pct { font-family: var(--mono); }
.playback-hud-track {
  position: relative;
  height: 3px;
  margin: 7px 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.playback-hud-track::before { content: ''; position: absolute; inset: -8px -5px; }
.playback-hud-track:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
#playback-hud-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .08s linear;
  pointer-events: none;
}
#playback-hud-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 2px var(--map-scale-bg), 0 2px 7px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity .12s ease, left .08s linear;
  pointer-events: none;
}
.playback-hud-track.is-scrubbing #playback-hud-fill,
.playback-hud-track.is-scrubbing #playback-hud-thumb { transition: none; }
.playback-hud-actions { display: flex; justify-content: flex-end; gap: 5px; }
.playback-hud-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--map-scale-border);
  border-radius: 5px;
  background: transparent;
  color: var(--map-scale-text);
}
.playback-hud-btn:hover { color: var(--accent-2); border-color: var(--accent); }
.playback-hud-btn .ico { width: 12px; height: 12px; }
.route-warn-head { margin-top: 10px; margin-bottom: 6px; }
.playback-group .row { margin-bottom: 10px; }
.playback-group .field-block { margin-top: 3px; gap: 7px; }
.playback-group .field-line { margin-bottom: 2px; }
.playback-group .toggle { margin-top: 7px; }

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
  position: absolute;
  inset: 0;
  z-index: 640;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--empty-overlay);
  backdrop-filter: blur(2px);
}
.empty-card {
  width: min(480px, 96%);
  padding: 34px 34px 28px;
  text-align: center;
  background: var(--empty-card-bg);
  border: 1px dashed var(--border-strong);
  border-radius: 17px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
}
.empty-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .32em;
  margin-bottom: 12px;
}
.empty-card h1 { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; margin-bottom: 10px; }
.empty-card p { color: var(--muted); font-size: 12.5px; line-height: 1.75; margin-bottom: 20px; }
.empty-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.empty-hint { margin-top: 18px; color: var(--muted2); font-size: 10.5px; line-height: 1.8; }
.empty-hint code {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--muted);
}
.link-btn {
  background: none;
  border: none;
  color: var(--accent-2);
  font: inherit;
  font-size: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  padding: 0;
}

/* ── Sidebar ─────────────────────────────────────────── */
#side {
  width: var(--side);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  position: relative;
  z-index: 800;
  transition: width .24s cubic-bezier(.2,.8,.2,1);
}
#workspace.side-collapsed #side { width: 0; border-left: 0; overflow: hidden; }
.side-toggle { flex-shrink: 0; }
.sheet-head { display: none; }
.sheet-handle {
  width: 100%;
  height: 100%;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}
.sheet-head.is-dragging .sheet-handle { cursor: grabbing; }
.sheet-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
.sheet-grip {
  width: 38px;
  height: 4px;
  border-radius: 99px;
  background: var(--border-strong);
}
.sheet-toggle {
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  padding: 0;
}
.sheet-toggle:hover { color: var(--text); background: var(--hover-subtle); }
.sheet-toggle .ico { width: 13px; height: 13px; transition: transform .18s ease; }
#side.is-peek .sheet-toggle .ico { transform: rotate(180deg); }
#side.is-dragging { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #side, .playback-hud, .sheet-toggle .ico, .top-actions.is-open { transition: none !important; animation: none !important; }
}
.tabs {
  flex-shrink: 0;
  display: flex;
  height: 45px;
  border-bottom: 1px solid var(--border);
  background: var(--tabs-bg);
}
.tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  transition: color .13s, border-color .13s;
}
.tab:hover { color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 11px; opacity: .75; }
.tab-ico .ico { width: 14px; height: 14px; }
.tab.active .tab-ico { color: var(--accent); opacity: 1; }

.pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 22px;
  scrollbar-gutter: stable;
}
.pane.active { display: block; animation: paneIn .16s ease; }
@keyframes paneIn { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pane.active, .dot-live.busy { animation: none; }
}

.pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.pane-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.pane-sub { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.chip-ok { color: var(--green); border-color: rgba(52,211,153,.24); background: rgba(52,211,153,.08); }
.chip-warn { color: var(--yellow); border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.08); }
.chip-error { color: var(--red); border-color: rgba(244,63,94,.28); background: rgba(244,63,94,.08); }
.chip-muted { color: var(--muted); }

.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span { color: var(--muted); font-size: 10.5px; font-weight: 550; }
.text, .num, .select {
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: border-color .13s, background .13s;
}
.text:focus, .num:focus, .select:focus { border-color: var(--accent); background: var(--input-focus-bg); }
.num { font-family: var(--mono); font-size: 11.5px; }
.select { cursor: pointer; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.row-tight { margin-top: 2px; }

.group { padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--border); }
.group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface3);
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: 0;
}
.hint { color: var(--muted2); font-size: 10.5px; line-height: 1.6; margin-top: 7px; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 15px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stat {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 9px;
  min-width: 0;
}
.stat .k { color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.stat .v { margin-top: 3px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v.accent { color: var(--accent-2); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
}
.chip-btn:hover { border-color: var(--border-strong); background: var(--surface3); }
.chip-btn .sw { width: 7px; height: 7px; border-radius: 50%; }
.chip-btn .meta { color: var(--muted); font-size: 9.5px; font-family: var(--mono); }

.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cp-head .group-title { flex: 1; margin-bottom: 0; }
.cp-collapse.list-toggle {
  width: auto;
  height: 32px;
  flex: 1;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 6px 0 4px;
}
.cp-collapse.list-toggle .group-title {
  flex: 1;
  margin-bottom: 0;
  text-align: left;
}
.cp-collapse.list-toggle:hover .group-title { color: var(--text); }
.cp-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cp-head-actions .icon-btn { min-width: 26px; padding: 0 6px; }
.cp-history-btn:disabled { opacity: .35; }
.cp-collapse {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
}
.cp-collapse:hover { background: var(--surface3); color: var(--text); }
.cp-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cp-collapse .ico { width: 12px; height: 12px; transition: transform .15s ease; }
.cp-collapse.is-collapsed .ico { transform: rotate(-90deg); }
.cp-body { min-width: 0; }
.cp-list {
  display: block;
  position: relative;
  max-height: min(420px, 52vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.cp-list-spacer { position: relative; width: 100%; }
.cp-row {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 9px;
  padding: 8px 9px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.cp-row:hover { border-color: var(--border-strong); }
.cp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cp-row.is-selected {
  border-color: rgba(249,115,22,.65);
  background: linear-gradient(180deg, rgba(249,115,22,.1), rgba(249,115,22,.03)), var(--surface2);
  box-shadow: inset 3px 0 0 var(--accent);
}
.cp-row.is-offroad { border-color: rgba(251,191,36,.32); }
.cp-role {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 750;
  font-family: var(--mono);
  border: 1.5px solid var(--cp-role-border);
  box-shadow: 0 0 0 3px var(--cp-role-ring);
}
.cp-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cp-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-name { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-snap {
  font-size: 9px;
  font-family: var(--mono);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cp-snap.ok { color: var(--green); border-color: rgba(52,211,153,.24); }
.cp-snap.warn { color: var(--yellow); border-color: rgba(251,191,36,.26); }
.cp-coords { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cp-coord { display: flex; align-items: center; gap: 3px; min-width: 0; }
.cp-coord .axis { color: var(--muted2); font-family: var(--mono); font-size: 8.5px; width: 7px; flex-shrink: 0; }
.cp-input {
  width: 100%;
  min-width: 0;
  height: 23px;
  padding: 0 4px;
  background: var(--cp-input-bg);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  outline: none;
}
.cp-input:hover { border-color: var(--border); }
.cp-input:focus { border-color: var(--accent); background: var(--cp-input-focus-bg); }
.cp-actions { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.cp-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--cp-btn-bg);
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}
.cp-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface3); }
.cp-btn .ico { width: 12px; height: 12px; }
.cp-btn:disabled { opacity: .28; pointer-events: none; }
.cp-btn.danger:hover { color: var(--red); border-color: rgba(244,63,94,.4); }
.cp-empty { padding: 18px 10px; text-align: center; color: var(--muted); font-size: 11.5px; border: 1px dashed var(--border); border-radius: 8px; }

.warn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.warn-head .group-title { flex: 1; margin-bottom: 0; }
.warn-list { display: flex; flex-direction: column; gap: 4px; }
.warn-list.virtual {
  display: block;
  position: relative;
  max-height: min(280px, 38vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.warn-list-spacer { position: relative; width: 100%; }
.warn-list.virtual .warn-item {
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  padding: 6px 8px;
  line-height: 1.4;
  overflow: hidden;
}
.warn-list.virtual .warn-item > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.warn-item {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 7px 9px;
  border-radius: 6px;
  background: rgba(251,191,36,.06);
  border: 1px solid rgba(251,191,36,.14);
  border-left: 2px solid var(--yellow);
  color: var(--warn-text);
  font-size: 10.5px;
  line-height: 1.55;
}
.warn-item.error { background: rgba(244,63,94,.06); border-color: rgba(244,63,94,.16); border-left-color: var(--red); color: var(--warn-error-text); }
.warn-item.info { background: rgba(56,189,248,.05); border-color: rgba(56,189,248,.14); border-left-color: #38bdf8; color: var(--warn-info-text); }
.warn-item .wi-ico { flex-shrink: 0; font-family: var(--mono); font-size: 9px; opacity: .9; margin-top: 1px; }
.warn-item[data-focus] { cursor: pointer; }
.warn-item[data-focus]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.warn-item[data-focus]:hover { border-color: rgba(251,191,36,.35); }
.warn-empty { color: var(--muted2); font-size: 10.5px; padding: 3px 0; }

.pane-note {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--muted2);
  font-size: 10px;
  line-height: 1.6;
}

/* ── Route pane ──────────────────────────────────────── */
.seg {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.seg button {
  flex: 1;
  min-width: 0;
  height: 31px;
  padding: 0 4px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--text); background: var(--hover-subtle); }
.seg button.active { background: var(--accent-dim); color: var(--accent-2); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); }
.seg-2 button { flex-basis: 50%; }
.seg-3 button { flex-basis: 33.33%; }
.seg-4 button { flex-basis: 25%; font-size: 11px; }
.seg-5 button { flex-basis: 20%; font-size: 10.5px; padding: 0 2px; }

.field-block { display: flex; flex-direction: column; gap: 5px; }
.field-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-line label { color: var(--text); font-size: 12px; }
.field-line output { color: var(--accent-2); font-family: var(--mono); font-size: 10.5px; }
.field-line output[role="button"] {
  cursor: text;
  border-bottom: 1px dashed var(--border-strong);
  padding-bottom: 1px;
}
.field-line output[role="button"]:hover { color: var(--accent); border-bottom-color: var(--accent); }
.field-line output[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.field-line output[hidden] { display: none; }
.out-edit {
  width: 70px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  outline: none;
  background: var(--surface2);
  color: var(--accent-2);
  font-family: var(--mono);
  font-size: 10.5px;
  text-align: right;
}
.out-edit:focus { box-shadow: 0 0 0 2px var(--accent-dim); }
.out-edit.is-invalid {
  border-color: #f43f5e;
  box-shadow: 0 0 0 2px rgba(244,63,94,.22);
}
input[type="range"] {
  --range-progress: 50%;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]:focus { outline: none; }
input[type="range"]:disabled { opacity: .42; cursor: default; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent-2) var(--range-progress),
    var(--surface3) var(--range-progress),
    var(--surface3) 100%);
  box-shadow: inset 0 0 0 1px var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent), 0 3px 8px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(.95); }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-dim), 0 3px 8px rgba(0,0,0,.25);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface3);
  box-shadow: inset 0 0 0 1px var(--border);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent), 0 3px 8px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
input[type="range"]:hover::-moz-range-thumb { transform: scale(1.1); }
input[type="range"]:active::-moz-range-thumb { transform: scale(.95); }
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-dim), 0 3px 8px rgba(0,0,0,.25);
}
@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb { transition: none; }
}

.toggle { display: flex; align-items: center; gap: 7px; min-height: 29px; color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; }
.toggle:hover, .toggle:has(:checked) { color: var(--text); }
.toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }

.coverage { display: flex; align-items: center; gap: 9px; }
.coverage + .warn-list { margin-top: 9px; }
.coverage-bar { flex: 1; height: 5px; background: var(--surface3); border-radius: 4px; overflow: hidden; }
.coverage-bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), #86efac); border-radius: 4px; transition: width .25s; }
#coverage-text { color: var(--muted); font-family: var(--mono); font-size: 9.5px; white-space: nowrap; }
#route-time { font-size: 10px; }
#route-stats { margin-top: 10px; }

/* ── Style pane ──────────────────────────────────────── */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  text-align: left;
  color: var(--text);
  transition: border-color .13s, transform .13s;
}
.theme-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(249,115,22,.28), inset 0 0 20px rgba(249,115,22,.06); }
.theme-card-custom { cursor: default; }
.theme-card-custom:hover { border-color: var(--accent); transform: none; }
.theme-swatches { display: flex; height: 16px; border-radius: 5px; overflow: hidden; border: 1px solid var(--theme-swatch-border); }
.theme-swatches i { flex: 1; }
.theme-name { font-size: 11.5px; font-weight: 650; line-height: 1.2; }
.theme-note { color: var(--muted2); font-size: 9px; line-height: 1.3; }

details.section { border-top: 1px solid var(--border); margin-top: 12px; }
details.section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary .chev { display: inline-flex; align-items: center; color: var(--muted); font-size: 9px; transition: transform .15s; }
details.section > summary .chev .ico { width: 12px; height: 12px; }
details.section[open] > summary .chev { transform: rotate(180deg); }
.section-body { display: flex; flex-direction: column; gap: 11px; padding: 1px 0 12px; }
[data-when] { display: flex; flex-direction: column; gap: 11px; }
.section-body .field { gap: 5px; }
.section-body .text { height: 31px; }

.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.color-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.color-field > span:first-child { color: var(--muted); font-size: 10.5px; }
.color-input { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 2px 7px 2px 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; }
.color-input input[type="color"] {
  width: 26px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.color-input input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-input input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-strong); border-radius: 4px; }
.color-input em { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bounds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ── Export pane ─────────────────────────────────────── */
.export-preview-mini {
  position: relative;
  margin-top: 14px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  background:
    linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%) 0 0 / 18px 18px,
    linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%) 9px 9px / 18px 18px,
    var(--preview-bg);
  overflow: hidden;
}
.mini-content { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.export-preview-mini img { max-width: 100%; max-height: 260px; border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.24); display: block; -webkit-user-drag: none; user-select: none; transition: opacity .16s ease, filter .16s ease; }
.export-preview-mini.is-loading img { opacity: .42; filter: saturate(.7); }
.mini-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--preview-bg);
  background: color-mix(in srgb, var(--preview-bg) 74%, transparent);
  backdrop-filter: blur(2px);
  color: var(--text);
  font-size: 11px;
  letter-spacing: .01em;
  pointer-events: none;
}
.mini-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: miniSpin .7s linear infinite;
}
@keyframes miniSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mini-spinner { animation: none; }
  .mini-loading { backdrop-filter: none; }
}
.mini-empty { color: var(--muted2); font-size: 10.5px; text-align: center; padding: 30px 10px; }

.side-footer {
  flex-shrink: 0;
  height: 29px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
  color: var(--muted2);
  font-size: 9.5px;
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
}
.footer-cache {
  margin-left: auto;
  padding: 1px 4px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.footer-cache:hover { color: var(--accent-2); background: var(--surface3); }
.footer-cache:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.footer-github {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: 3px;
  flex-shrink: 0;
}
.footer-github .ico { width: 12px; height: 12px; }
.footer-github:hover { color: var(--accent-2); background: var(--surface3); }
.footer-github:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0; }
.dot-live.busy { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); animation: pulse 1s infinite; }
.dot-live.error { background: var(--red); box-shadow: 0 0 8px var(--red); }
@keyframes pulse { 50% { opacity: .35; } }

/* ── Toast / drop overlay ────────────────────────────── */
.toast-stack {
  position: fixed;
  left: 50%;
  top: calc(var(--top, 54px) + 10px);
  transform: translateX(-50%);
  z-index: 3000;
  width: min(540px, calc(100vw - 20px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast-stack[popover] {
  inset: auto;
  top: calc(var(--top, 54px) + 10px);
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(540px, calc(100vw - 20px));
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: inherit;
}
.toast-stack[popover]:not(:popover-open) { display: none; }
.toast {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--toast-bg);
  border: none;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow: var(--shadow-toast);
  opacity: 0;
  transform: translateY(-14px) scale(.96);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.leaving { opacity: 0; transform: translateY(-8px) scale(.98); }
.toast-icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1677ff;
}
.toast-icon .ico { width: 17px; height: 17px; }
.toast.ok .toast-icon { color: #52c41a; }
.toast.error .toast-icon { color: #ff4d4f; }
.toast-message { min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249,115,22,.06);
  border: 3px dashed var(--accent);
  pointer-events: none;
}
.drop-overlay > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 32px;
  border-radius: 14px;
  background: var(--drop-card-bg);
  border: 1px solid var(--border-strong);
  text-align: center;
  box-shadow: var(--shadow-drop);
}
.drop-overlay strong { font-size: 17px; }
.drop-overlay span { color: var(--muted); font-size: 11.5px; }

/* ── Dialogs ─────────────────────────────────────────── */
.dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, calc(100vw - 32px));
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
  overscroll-behavior: contain;
}
.dialog[open] { animation: dialogIn .22s cubic-bezier(.2,.8,.2,1) both; }
.dialog[open]::backdrop { animation: backdropIn .22s ease both; }
.dialog.is-closing { pointer-events: none; animation: dialogOut .16s ease forwards; }
.dialog.is-closing::backdrop { animation: backdropOut .16s ease forwards; }
.dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); }
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dialogOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.99); }
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dialog[open], .dialog[open]::backdrop, .dialog.is-closing, .dialog.is-closing::backdrop { animation: none; }
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 19px; border-bottom: 1px solid var(--border); }
.dialog-draggable .dialog-head {
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.dialog-draggable .dialog-head::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: var(--border-strong);
  opacity: .55;
  transform: translateX(-50%);
  pointer-events: none;
}
.dialog-draggable.is-dragging .dialog-head { cursor: grabbing; }
.dialog-draggable.is-dragging .dialog-head::before { background: var(--accent); opacity: 1; }
.dialog-draggable .dialog-head .icon-x { cursor: pointer; }
.dialog-head h2 { font-size: 15px; font-weight: 650; display: flex; align-items: baseline; gap: 9px; }
.dialog-body { max-height: calc(88vh - 118px); overflow-y: auto; padding: 18px 20px; }
.dialog-foot { display: flex; align-items: center; gap: 8px; padding: 12px 19px; border-top: 1px solid var(--border); justify-content: flex-end; }
.icon-x { width: 28px; height: 28px; border: none; background: none; color: var(--muted); border-radius: 6px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.icon-x .ico { width: 14px; height: 14px; }
.icon-x:hover { background: var(--surface3); color: var(--text); }

.prose { font-size: 12.5px; line-height: 1.7; color: var(--prose-text); }
.shortcuts-dialog { width: min(680px, calc(100vw - 24px)); }
.shortcuts-body { padding-top: 15px; }
.shortcut-intro { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.shortcut-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.shortcut-section h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.shortcut-section h3 .ico { width: 13px; height: 13px; color: var(--accent-2); }
.shortcut-list { display: flex; flex-direction: column; gap: 1px; margin: 0 0 16px; padding: 0; list-style: none; }
.shortcut-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
}
.shortcut-list li:last-child { border-bottom: none; }
.shortcut-keys { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.shortcut-list kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.shortcut-foot-hint { color: var(--muted); font-size: 11px; }.prose p { margin: 0 0 10px; }
.prose h3 { color: var(--text); font-size: 12.5px; margin: 16px 0 6px; }
.prose ul { margin: 0 0 10px; padding-left: 18px; }
.prose li { margin: 3px 0; }
.prose code { font-family: var(--mono); font-size: 10.5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--code-inline-text); }
.prose pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 10px 0 14px; }
.prose pre code { background: none; border: none; padding: 0; color: var(--code-text); font-size: 10.5px; line-height: 1.6; }

.preview-dialog { width: min(1120px, calc(100vw - 28px)); }
.preview-body { padding: 14px; overflow: auto; }
.preview-frame {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--border);
  background:
    linear-gradient(45deg, var(--checker-strong) 25%, transparent 25%, transparent 75%, var(--checker-strong) 75%) 0 0 / 20px 20px,
    linear-gradient(45deg, var(--checker-strong) 25%, transparent 25%, transparent 75%, var(--checker-strong) 75%) 10px 10px / 20px 20px,
    var(--preview-bg-2);
  overflow: hidden;
}
.preview-frame img { display: block; max-width: 100%; max-height: calc(88vh - 200px); object-fit: contain; cursor: zoom-in; -webkit-user-drag: none; user-select: none; }
.preview-frame img:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.preview-lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #05070d;
  color: #e8edf7;
  box-shadow: none;
}
dialog.preview-lightbox { width: 100vw; height: 100vh; height: 100dvh; max-height: none; }
.lightbox-shell { width: 100%; height: 100%; display: flex; flex-direction: column; background: #05070d; }
.lightbox-shell:fullscreen { width: 100vw; height: 100vh; height: 100dvh; }
.preview-lightbox[open] { display: flex; flex-direction: column; animation: none; }
.preview-lightbox.is-closing { animation: dialogOut .16s ease forwards; }
.preview-lightbox::backdrop { background: #000; }
.lightbox-head {
  flex-shrink: 0;
  height: calc(46px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: env(safe-area-inset-top) 10px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(5,7,13,.96);
}
.lightbox-head h2 { font-size: 13px; font-weight: 650; letter-spacing: .01em; }
.lightbox-zoom { margin-left: auto; color: rgba(232,237,247,.55); font-family: var(--mono); font-size: 10.5px; }
.lightbox-actions { display: flex; align-items: center; gap: 2px; }
.lightbox-head .icon-x { color: rgba(232,237,247,.68); }
.lightbox-head .icon-x:hover { color: #fff; background: rgba(255,255,255,.09); }
.lightbox-btn { width: 30px; height: 30px; }
.lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background:
    linear-gradient(45deg, var(--checker-strong) 25%, transparent 25%, transparent 75%, var(--checker-strong) 75%) 0 0 / 22px 22px,
    linear-gradient(45deg, var(--checker-strong) 25%, transparent 25%, transparent 75%, var(--checker-strong) 75%) 11px 11px / 22px 22px,
    var(--preview-bg-2);
}
.lightbox-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.lightbox-stage.is-dragging { cursor: grabbing; }
#lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
}
.lightbox-hint {
  flex-shrink: 0;
  padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  color: rgba(232,237,247,.45);
  text-align: center;
  font-size: 10px;
  letter-spacing: .02em;
}
@media (max-width: 720px) {
  .lightbox-head { height: calc(44px + env(safe-area-inset-top)); padding-left: 10px; gap: 6px; }
  .lightbox-head h2 { font-size: 12px; }
  .lightbox-zoom { font-size: 9.5px; }
  .lightbox-btn { width: 28px; height: 28px; }
  .lightbox-hint { font-size: 9.5px; }
}

/* ── Leaflet bits ────────────────────────────────────── */
.leaflet-container { font-family: var(--font); background: transparent; }
.leaflet-control-attribution {
  background: var(--map-control-bg) !important;
  color: var(--muted) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--accent-2) !important; }
.leaflet-top .leaflet-control { margin-top: var(--map-control-edge) !important; }
.leaflet-right .leaflet-control { margin-right: var(--map-control-edge) !important; }
.leaflet-control-zoom { border: none !important; box-shadow: var(--map-control-shadow, 0 6px 18px rgba(0,0,0,.28)) !important; }
.leaflet-control-zoom a {
  width: var(--map-control-size) !important;
  height: var(--map-control-size) !important;
  line-height: calc(var(--map-control-size) - 2px) !important;
  background: var(--map-control-bg, rgba(11,14,21,.86)) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  font-size: 17px !important;
  backdrop-filter: blur(8px);
}
.leaflet-control-zoom a:first-child { border-radius: 8px 8px 0 0 !important; margin-bottom: var(--map-control-inner-gap); border-bottom: none !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 8px 8px !important; }
.leaflet-control-zoom a:hover { color: var(--accent-2) !important; border-color: var(--accent) !important; }
.tl-scale { margin: 0 var(--map-control-edge) 8px 0 !important; }
.tl-scale-line {
  position: relative;
  width: 100px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid var(--map-scale-border, rgba(255,255,255,.18));
  border-radius: 4px;
  background: var(--map-scale-bg, rgba(8,10,16,.62));
  color: var(--map-scale-text, rgba(220,232,255,.6));
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--map-control-shadow);
  backdrop-filter: blur(8px);
}
.tl-scale-line::before,
.tl-scale-line::after {
  content: "";
  position: absolute;
  bottom: -4px;
  width: 1px;
  height: 3px;
  background: var(--map-scale-border, rgba(255,255,255,.18));
}
.tl-scale-line::before { left: 0; }
.tl-scale-line::after { right: 0; }

.tl-grid-num {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.tl-grid-num span {
  display: block;
  width: 38px;
  text-align: center;
  white-space: nowrap;
}
.tl-basemap { transition: opacity .15s ease; }
.tl-tint { mix-blend-mode: multiply; }
.tl-cp { background: none; border: none; cursor: grab; filter: drop-shadow(0 3px 7px rgba(0,0,0,.45)); transition: filter .12s ease; }
.tl-cp-wrap { position: relative; width: 100%; height: 100%; transform-origin: center; transition: scale .12s ease; }
.map-heading .tl-cp-wrap { transform: rotate(var(--map-counter-rotate, 0deg)); }
.map-heading .tl-grid-num span { rotate: var(--map-counter-rotate, 0deg); }
.map-heading .tl-tip-inner { rotate: var(--map-counter-rotate, 0deg); transform-origin: center; }
.tl-cp-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--cp-label-bg);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 4px var(--cp-label-shadow);
}
.tl-cp:hover .tl-cp-wrap { scale: 1.12; }
.tl-cp:hover { filter: drop-shadow(0 5px 12px rgba(0,0,0,.55)); }
.tl-cp.is-locked { cursor: default; }
.tl-cp.is-locked:hover:not(.is-selected) .tl-cp-wrap { scale: 1; }
.tl-playback-marker { background: none; border: none; }
.tl-playback-arrow {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(249,115,22,.28), 0 5px 18px rgba(0,0,0,.55);
  transform-origin: 50% 50%;
}
.tl-playback-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tl-cp.is-selected .tl-cp-wrap { scale: 1.18; }
.tl-cp.is-selected { filter: drop-shadow(0 0 12px rgba(249,115,22,.85)) drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.tl-cp:active { cursor: grabbing; }
.tl-arrow { background: none; border: none; pointer-events: none; }
.tl-tooltip {
  background: var(--map-tooltip-bg) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-tooltip) !important;
  padding: 7px 9px !important;
  font-size: 11px !important;
}
.tl-tooltip::before { border-top-color: var(--map-tooltip-bg) !important; }
.tl-tip-title { font-weight: 650; font-size: 11px; }
.tl-tip-coord { margin-top: 2px; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.tl-tip-note { margin-top: 2px; font-size: 9.5px; color: var(--accent-2); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --side: 366px; }
  .map-title { max-width: 54%; }
  .mt-title { font-size: calc(24px * var(--mt-scale, 1) * var(--mt-title-scale, 1)); }
}

@media (max-width: 980px) {
  :root {
    --side: auto;
    --map-control-size: 32px;
    --map-control-edge: 10px;
    --map-control-stack-gap: 9px;
  }
  #workspace { display: block; position: relative; overflow: hidden; }
  #map-wrap { position: absolute; inset: 0; min-height: 0; }
  #side {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: var(--sheet-height, 55%);
    max-height: calc(100% - 64px);
    min-height: 0;
    flex: none;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -14px 38px rgba(0,0,0,.28);
    overflow: hidden;
    transition: height .24s cubic-bezier(.2,.8,.2,1);
  }
  #side.is-dragging { transition: none; }
  .sheet-head {
    display: flex;
    flex-shrink: 0;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .sheet-toggle { position: absolute; right: 8px; top: 1px; }
  .side-toggle { display: none !important; }
  .brand-sub { display: none; }
  .map-title { left: 16px; top: 14px; max-width: 62%; }
  .map-legend {
    left: 16px;
    bottom: calc(var(--sheet-height, 71px) + 16px);
    transition: bottom .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  }
  .map-coords { bottom: calc(var(--sheet-height, 71px) + 16px); }
  .leaflet-bottom.leaflet-right { bottom: calc(var(--sheet-height, 71px) + 8px); }
  .playback-hud {
    bottom: calc(var(--sheet-height, 71px) + 14px);
    transition: bottom .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  }
  #workspace.sheet-full .map-title,
  #workspace.sheet-full .map-legend,
  #workspace.sheet-full .map-coords,
  #workspace.sheet-full .leaflet-top,
  #workspace.sheet-full .leaflet-bottom {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #workspace.sheet-full .playback-hud { opacity: 0; visibility: hidden; pointer-events: none; }
  .map-toolbar { max-height: max(64px, calc(100% - 96px - var(--sheet-height, 0px))); }
  #workspace.sheet-full .map-toolbar { opacity: 0; visibility: hidden; pointer-events: none; }
  .empty-state { z-index: 850; bottom: 0; pointer-events: none; }
  .empty-state .empty-card { pointer-events: auto; }
  .empty-card { padding: 26px 22px 22px; }
  .empty-card h1 { font-size: 19px; }
}

@media (max-width: 720px) {
  :root {
    --side: auto;
    --top: 50px;
    --map-control-size: 30px;
    --map-control-edge: 8px;
    --map-control-stack-gap: 8px;
    --map-control-gap: 5px;
  }
  .topbar { padding: 0 10px; gap: 8px; }
  .brand-title { font-size: 13px; }
  .top-actions { gap: 5px; }
  .top-actions .separator { display: none; }
  .top-actions .btn { padding: 0 9px; min-height: 30px; font-size: 11.5px; }
  .top-actions .btn:not(.icon-btn) .ico { display: none; }
  .sample-panel {
    position: fixed;
    top: calc(var(--top) + 8px);
    left: 50%;
    right: auto;
    width: min(420px, calc(100vw - 16px));
    max-height: calc(100vh - var(--top) - 16px);
    max-height: calc(100dvh - var(--top) - 16px);
    transform: translateX(-50%);
    transform-origin: top center;
    z-index: 1200;
  }
  .pane { padding: 13px 12px 18px; }
  .mt-title { font-size: calc(20px * var(--mt-scale, 1) * var(--mt-title-scale, 1)); }
  .mt-sub { font-size: calc(10.5px * var(--mt-scale, 1) * var(--mt-sub-scale, 1)); }
  .map-legend {
    display: block;
    left: 12px;
    min-width: 0;
    max-width: min(180px, calc(100vw - 96px));
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 10px;
  }
  .ml-row { gap: 6px; margin: 2px 0; }
  .ml-dot { width: 7px; height: 7px; }
  .ml-foot { margin-top: 4px; padding-top: 4px; font-size: 8.5px; }
  .map-coords { display: none; }
  #workspace.hud-active .map-legend { opacity: 0; visibility: hidden; pointer-events: none; }
  .map-btn { font-size: 13px; }
  .cp-list { max-height: min(330px, 48vh); }
  .warn-list.virtual { max-height: min(220px, 32vh); }
  .leaflet-control-zoom a { font-size: 15px !important; }
  .empty-state { padding: 12px; }
  .empty-card { padding: 22px 17px 18px; border-radius: 13px; }
  .empty-card h1 { font-size: 17px; }
  .empty-card p { font-size: 11.5px; }
  .empty-hint { display: none; }
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .theme-grid { grid-template-columns: 1fr 1fr; }
  .dialog { width: calc(100vw - 18px); max-height: 92vh; }
  .dialog-body { max-height: calc(92vh - 118px); }
}

@media (max-width: 720px) {
  .shortcut-groups { grid-template-columns: 1fr; gap: 0 0; }
  .shortcut-list { margin-bottom: 12px; }
}

@media (max-width: 480px) {
  .brand-text { display: none; }
  .tab { gap: 0; font-size: 0; }
  .tab-ico, .tab-ico .ico { width: 16px; height: 16px; }
  .top-actions { gap: 3px; }
  .top-actions .btn { padding: 0 7px; }
  .top-actions [data-action="open-json"],
  .top-actions #samples-menu > summary {
    width: 32px;
    min-width: 32px;
    padding: 0;
    gap: 0;
    font-size: 0;
    justify-content: center;
  }
  .top-actions .btn:not(.icon-btn)[data-action="open-json"] .ico,
  .top-actions #samples-menu > summary.btn .ico {
    display: inline-block;
    width: 14px;
    height: 14px;
  }
  .top-actions #samples-menu > summary .caret { display: none; }
}

@media (max-height: 620px) {
  :root {
    --map-control-size: 26px;
    --map-control-gap: 4px;
    --map-control-edge: 8px;
  }
  .map-btn .ico { width: 14px; height: 14px; }
}

/* ── Compact top actions: hamburger panel ────────────────────────────── */
@media (max-width: 720px) {
  .topbar .actions-toggle { display: inline-flex; margin-left: auto; }
  .top-actions {
    display: none;
    position: fixed;
    top: calc(var(--top) + 8px);
    right: 10px;
    left: auto;
    width: min(320px, calc(100vw - 20px));
    max-height: calc(100vh - var(--top) - 16px);
    max-height: calc(100dvh - var(--top) - 16px);
    margin-left: 0;
    padding: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--panel-bg);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-menu);
    z-index: 1200;
  }
  .top-actions.is-open { display: flex; animation: actionsIn .16s ease; }
  @keyframes actionsIn { from { opacity: 0; } to { opacity: 1; } }
  .topbar .top-actions.is-open .btn {
    width: 100%;
    min-height: 36px;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
    font-size: 12px;
    text-align: left;
  }
  .topbar .top-actions.is-open .btn .ico,
  .topbar .top-actions.is-open .btn:not(.icon-btn) .ico {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  .topbar .top-actions.is-open .action-label {
    display: inline;
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
  }
  .topbar .top-actions.is-open [data-action="open-json"],
  .topbar .top-actions.is-open #samples-menu > summary {
    width: 100%;
    min-width: 0;
    height: 36px;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
    font-size: 12px;
  }
  .topbar .top-actions.is-open #samples-menu { width: 100%; }
  .topbar .top-actions.is-open #samples-menu > summary .caret {
    display: inline-flex;
    margin-left: auto;
  }
  .topbar .top-actions.is-open .icon-menu { width: 100%; }
  .topbar .top-actions.is-open .icon-menu > summary {
    width: 100%;
    min-width: 0;
    height: 36px;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 10px;
    font-size: 12px;
  }
  .topbar .top-actions.is-open .icon-menu .menu-panel {
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
    background: var(--surface2);
  }
  .topbar .top-actions.is-open .icon-menu .menu-panel .menu-item { padding: 8px 9px; }
  .topbar .top-actions.is-open .side-toggle { display: none !important; }
  .topbar .top-actions.is-open .separator {
    display: block;
    width: 100%;
    height: 1px;
    margin: 3px 0;
    background: var(--border);
  }
  .top-actions.is-sample-open {
    max-height: none;
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .top-actions.is-sample-open > *:not(#samples-menu) {
    display: none;
  }
  .top-actions.is-sample-open #samples-menu > summary { display: none; }
}

/* ── Title / legend anchors + fine offsets ──────────────────────────── */
#map-title, #map-legend {
  --overlay-x: 26px;
  --overlay-y: 22px;
  --overlay-bottom: 22px;
  --overlay-control-clear: calc(var(--map-control-edge) + var(--map-control-size) + 10px);
}
@media (max-width: 980px) {
  #map-title, #map-legend {
    --overlay-x: 16px;
    --overlay-y: 14px;
    --overlay-bottom: 16px;
  }
}
@media (max-width: 720px) {
  #map-legend { --overlay-x: 12px; }
}
#map-title[data-pos="tl"],
#map-legend[data-pos="tl"] {
  left: calc(var(--overlay-x) + var(--pos-x, 0%));
  right: auto;
  top: calc(var(--overlay-y) + var(--pos-y, 0%));
  bottom: auto;
  transform: none;
}
#map-title[data-pos="tc"],
#map-legend[data-pos="tc"] {
  left: calc(50% + var(--pos-x, 0%));
  right: auto;
  top: calc(var(--overlay-y) + var(--pos-y, 0%));
  bottom: auto;
  transform: translateX(-50%);
}
#map-title[data-pos="tr"],
#map-legend[data-pos="tr"] {
  left: auto;
  right: calc(var(--overlay-control-clear) - var(--pos-x, 0%));
  top: calc(var(--overlay-y) + var(--pos-y, 0%));
  bottom: auto;
  transform: none;
}
#map-title[data-pos="bl"],
#map-legend[data-pos="bl"] {
  left: calc(var(--overlay-x) + var(--pos-x, 0%));
  right: auto;
  top: auto;
  bottom: calc(var(--sheet-height, 0px) + var(--overlay-bottom) - var(--pos-y, 0%));
  transform: none;
}
#map-title[data-pos="bc"],
#map-legend[data-pos="bc"] {
  left: calc(50% + var(--pos-x, 0%));
  right: auto;
  top: auto;
  bottom: calc(var(--sheet-height, 0px) + var(--overlay-bottom) - var(--pos-y, 0%));
  transform: translateX(-50%);
}
#map-title[data-pos="br"],
#map-legend[data-pos="br"] {
  left: auto;
  right: calc(var(--overlay-control-clear) - var(--pos-x, 0%));
  top: auto;
  bottom: calc(var(--sheet-height, 0px) + var(--overlay-bottom) - var(--pos-y, 0%));
  transform: none;
}