:root {
  color-scheme: dark;
  --bg: #0b1018;
  --panel: #131b27;
  --panel-2: #182230;
  --line: #263447;
  --text: #edf3fb;
  --muted: #8d9bae;
  --accent: #57a6ff;
  --accent-2: #2e78cc;
  --danger: #ff667a;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.global-board-nav { height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; border-bottom: 1px solid #314158; background: #0b121c; box-shadow: 0 4px 18px #0005; position: relative; z-index: 26; }
.global-board-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.global-board-title strong { font-size: 13px; white-space: nowrap; }
.global-board-title small { color: #60748b; font-size: 9px; letter-spacing: .12em; }
.global-board-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg, #7bc1ff, #367fda); color: #07111f; font-weight: 900; }
.global-board-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid #2b3b50; border-radius: 10px; background: #111b28; }
.global-board-button { min-width: 116px; height: 34px; padding: 0 18px; border-radius: 7px; background: transparent; color: #7f91a6; font-size: 12px; font-weight: 750; }
.global-board-button:hover { color: #dbe9f7; background: #192739; }
.global-board-button.active { background: #337fc9; color: white; box-shadow: 0 4px 12px #0d67b95c; }
.global-board-status { justify-self: end; color: #64778e; font-size: 10px; }
.app-board { height: calc(100vh - 54px); }
.app-shell { display: grid; grid-template-columns: 330px 1fr; height: 100%; }
.sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #111925; border-right: 1px solid var(--line); z-index: 5; }
.brand { height: 78px; display: flex; align-items: center; gap: 13px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #07111f; font-weight: 900; font-size: 22px; background: linear-gradient(145deg, #7bc1ff, #367fda); box-shadow: 0 7px 22px #2c80df42; }
.brand h1 { margin: 0; font-size: 17px; letter-spacing: .03em; }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.world-directory { min-height: 70px; max-height: 42vh; padding: 11px 14px 10px; overflow: auto; resize: vertical; border-bottom: 1px solid var(--line); background: #0e1621; }
.world-directory-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 7px; color: #92a4b8; font-size: 11px; font-weight: 700; }
.world-add-button { width: 25px; height: 25px; border: 1px solid #34465c; border-radius: 6px; background: #182536; color: #a9c8e8; font-size: 16px; }
.root-map-list { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; scrollbar-color: #40536b transparent; }
.root-map-entry { flex: 0 0 auto; display: flex; align-items: stretch; overflow: hidden; border: 1px solid #29394d; border-radius: 7px; background: #141f2d; }
.root-map-button { max-width: 160px; height: 29px; padding: 0 10px; overflow: hidden; background: transparent; color: #8295aa; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.root-map-button:hover { border-color: #4b6788; color: #d9e7f5; }
.root-map-entry:hover { border-color: #4b6788; }
.root-map-entry.active { border-color: #4a9bf0; background: #1b3b5d; box-shadow: inset 0 0 0 1px #62b1ff28; }
.root-map-entry.active .root-map-button { color: white; }
.root-map-edit-button { width: 29px; border-left: 1px solid #33455a; background: #182536; color: #8fa8c2; font-size: 13px; }
.root-map-edit-button:hover { background: #27415e; color: white; }
.search-box { flex: 0 0 auto; margin: 12px 18px 10px; min-height: 40px; max-height: 22vh; display: flex; align-items: center; gap: 8px; padding: 0 13px; overflow: auto; resize: vertical; border: 1px solid var(--line); border-radius: 9px; background: #0d141e; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.sidebar-tabs { height: 48px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 12px; border-bottom: 1px solid var(--line); }
.sidebar-tab { position: relative; border: 0; background: transparent; color: #6f7e91; font-size: 13px; font-weight: 700; }
.sidebar-tab.active { color: var(--text); }
.sidebar-tab.active::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 0; height: 2px; background: var(--text); }
.sidebar-tab:disabled { cursor: default; opacity: .55; }
.sidebar-section { min-height: 76px; max-height: 48vh; padding: 15px 14px; overflow: auto; resize: vertical; border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #40536b #111925; }
.point-section { flex: 1 1 0; min-height: 90px; max-height: none; display: flex; flex-direction: column; overflow: auto; resize: vertical; border-bottom: 0; }
.section-title { display: flex; justify-content: space-between; align-items: center; padding: 0 5px 11px; font-size: 13px; font-weight: 700; }
.filter-actions { display: flex; gap: 5px; align-items: center; }
.compact-button { width: 34px; height: 29px; padding: 0; border-radius: 7px; background: #242a32; color: white; font-size: 11px; font-weight: 700; }
.compact-button:hover { background: #38485c; }
.enum-button { height: 29px; padding: 0 8px; border-radius: 7px; background: transparent; border: 1px solid #34465c; color: #9eb0c4; font-size: 10px; }
.enum-button:hover { border-color: var(--accent); color: var(--accent); }
.muted { color: var(--muted); font-weight: 400; }
.type-filter-list, .owner-filter-list, .waypoint-filter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 7px; }
.point-list { display: flex; flex-direction: column; gap: 4px; }
.point-list { flex: 1 1 0; min-height: 0; height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #40536b #111925; }
.point-list::-webkit-scrollbar { width: 7px; }
.point-list::-webkit-scrollbar-track { background: #111925; border-radius: 10px; }
.point-list::-webkit-scrollbar-thumb { background: #40536b; border-radius: 10px; }
.point-list::-webkit-scrollbar-thumb:hover { background: #58708e; }
.filter-item, .point-list-item { display: flex; align-items: center; border-radius: 8px; transition: background .15s; }
.filter-item { position: relative; min-width: 0; min-height: 43px; flex-direction: row; align-items: center; gap: 7px; padding: 6px 5px; cursor: pointer; }
.edit-mode .filter-item[data-drag-type-id] { cursor: grab; }
.edit-mode .filter-item[data-drag-type-id]:active { cursor: grabbing; }
.filter-item:hover, .point-list-item:hover, .point-list-item.selected { background: #1a2737; }
.filter-item:has(input:checked) { background: #1a2737; }
.filter-item input { position: absolute; right: 3px; top: 3px; width: 11px; height: 11px; margin: 0; accent-color: var(--accent); opacity: .72; }
.type-symbol { flex: 0 0 auto; width: 27px; height: 31px; display: grid; place-items: center; border-radius: 7px; color: white; font-weight: 800; text-shadow: 0 1px 3px #0008; }
.type-symbol.has-icon { padding: 3px; border: 1px solid #ffffff70; text-shadow: none; box-shadow: inset 0 0 0 1px #00000020; }
.type-symbol img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px #0008); }
.owner-symbol { flex: 0 0 auto; width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid #ffffffc7; border-radius: 50%; background: var(--owner-color); color: white; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #0008; box-shadow: 0 2px 6px #0006; }
.waypoint-list-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; color: #9bc7ff; font-size: 23px; }
.waypoint-list-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px #000a); }
.waypoint-help { margin-top: 10px; padding: 9px 10px; border-radius: 7px; background: #182536; color: #8297ad; font-size: 10px; line-height: 1.5; }
.waypoint-filter-item.selected { outline: 1px solid #57a6ff88; background: #1b3048; }
.edit-mode .waypoint-filter-item[data-drag-waypoint-source-id] { cursor: grab; }
.edit-mode .waypoint-filter-item[data-drag-waypoint-source-id]:active { cursor: grabbing; }
.waypoint-source-drag-ghost { position: fixed; z-index: 100; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; opacity: .9; filter: drop-shadow(0 10px 12px #000e); }
.waypoint-filter-copy { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.waypoint-filter-copy > span, .waypoint-filter-copy > small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.waypoint-filter-copy > small { color: var(--muted); font-size: 10px; }
.waypoint-edit-button { flex: 0 0 auto; width: 27px; height: 27px; margin-right: 1px; border: 1px solid #38506b; border-radius: 6px; background: #172538; color: #91b8dd; font-size: 12px; }
.waypoint-edit-button:hover { border-color: #63adf5; background: #264664; color: white; }
.filter-label { min-width: 0; flex: 1; padding-right: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.filter-count { flex: 0 0 auto; padding: 10px 2px 0 0; color: var(--muted); font-size: 11px; }
.point-list-item { width: 100%; padding: 9px 8px; gap: 9px; border: 0; text-align: left; background: transparent; cursor: pointer; }
.point-list-item .point-copy { min-width: 0; flex: 1; }
.point-list-item strong, .point-list-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.point-list-item strong { font-size: 12px; }
.point-list-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.sidebar-footer { padding: 10px 19px; border-top: 1px solid var(--line); color: #7390ad; font-size: 11px; }

.workspace { min-width: 0; display: flex; flex-direction: column; }
.toolbar { height: 62px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #111925; border-bottom: 1px solid var(--line); }
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.mode-switch { display: flex; padding: 3px; border: 1px solid #2d3e53; border-radius: 9px; background: #0d151f; }
.mode-switch-button { height: 30px; padding: 0 11px; border-radius: 6px; background: transparent; color: #73869b; font-size: 11px; font-weight: 700; }
.mode-switch-button.active { background: #327dc8; color: white; box-shadow: 0 2px 9px #1269bd55; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.primary-button, .tool-button, .danger-button { min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 650; }
.primary-button { background: linear-gradient(180deg, #5baeff, #367fd2); color: white; box-shadow: inset 0 1px #ffffff38; }
.primary-button:hover { filter: brightness(1.08); }
.tool-button { background: #1c2838; border: 1px solid #2b3a4e; color: #c9d5e3; }
.tool-button:hover { border-color: #4f6b8d; }
.tool-button.active { border-color: #e0ad4f; background: #493719; color: #ffdc8d; }
.danger-button { color: #ff8c9b; background: #361c26; border: 1px solid #672a3b; }
.mode-hint { margin-right: 6px; color: var(--muted); font-size: 12px; }
.mode-hint.active { color: #ffd47a; }

.map-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #07101a; cursor: grab; user-select: none; touch-action: none; }
.map-viewport.dragging { cursor: grabbing; }
.map-viewport.add-mode { cursor: crosshair; }
.map-viewport.calibrate-mode { cursor: move; box-shadow: inset 0 0 0 2px #e6b656aa; }
.map-viewport.calibrate-mode.calibrating { cursor: grabbing; }
.map-viewport.region-draw-mode { cursor: crosshair; box-shadow: inset 0 0 0 2px #ff6b6baa; }
.map-viewport.type-drag-over { box-shadow: inset 0 0 0 3px #57a6ff, inset 0 0 45px #237fd833; }
.map-marker.type-drag-ghost { position: fixed; z-index: 100; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; opacity: .92; filter: drop-shadow(0 5px 8px #000d); }
.map-canvas { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; will-change: transform; contain: layout paint style; box-shadow: 0 15px 60px #0009; }
.map-viewport.locating-target .map-canvas { transition: transform .34s cubic-bezier(.2, .78, .25, 1); }
.map-viewport.locating-target .map-marker, .map-viewport.locating-target .map-waypoint { transition: left .34s cubic-bezier(.2, .78, .25, 1), top .34s cubic-bezier(.2, .78, .25, 1), filter .14s ease; }
.map-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.custom-map { display: none; image-rendering: auto; backface-visibility: hidden; transform: translateZ(0); }
.map-loading-overlay { position: absolute; z-index: 18; left: 50%; top: 50%; width: min(360px, calc(100% - 40px)); display: grid; grid-template-columns: 34px 1fr; gap: 3px 12px; align-items: center; transform: translate(-50%, -50%); padding: 17px 19px; border: 1px solid #5b7999; border-radius: 12px; background: #0d1825f2; color: #eef7ff; box-shadow: 0 18px 55px #000b; backdrop-filter: blur(10px); pointer-events: none; }
.map-loading-overlay strong { font-size: 13px; }
.map-loading-overlay small { grid-column: 2; color: #91a8bf; line-height: 1.5; }
.map-loading-spinner { grid-row: 1 / span 2; width: 30px; height: 30px; border: 3px solid #35506d; border-top-color: #65b3ff; border-radius: 50%; animation: map-loading-spin .8s linear infinite; }
@keyframes map-loading-spin { to { transform: rotate(360deg); } }
.region-layer { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.map-region-shape, .map-region-shape > svg { position: absolute; inset: 0; overflow: visible; }
.map-region-polygon { fill: color-mix(in srgb, var(--region-color) 12%, transparent); stroke: var(--region-color); stroke-width: calc(2px * var(--map-inverse-scale, 1)); vector-effect: non-scaling-stroke; }
.map-region-shape.selected .map-region-polygon { fill: color-mix(in srgb, var(--region-color) 19%, transparent); filter: drop-shadow(0 0 calc(5px * var(--map-inverse-scale, 1)) var(--region-color)); }
.map-region-label { position: absolute; transform: scale(var(--map-inverse-scale, 1)); transform-origin: left top; padding: 5px 8px; border-radius: 5px; background: var(--region-color); color: white; white-space: nowrap; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #0008; }
.region-vertex-handle, .region-edge-handle { position: absolute; z-index: 3; padding: 0; transform: translate(-50%, -50%) scale(var(--map-inverse-scale, 1)); transform-origin: center; pointer-events: auto; box-shadow: 0 2px 7px #000b; }
.region-vertex-handle { width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--region-color); cursor: grab; }
.region-edge-handle { width: 14px; height: 14px; border: 1px solid white; border-radius: 3px; background: #142235; color: white; font-size: 10px; line-height: 12px; cursor: copy; opacity: .85; }
.region-vertex-handle:hover, .region-edge-handle:hover { filter: brightness(1.3); }
.map-viewport.region-vertex-dragging, .map-viewport.region-vertex-dragging .region-vertex-handle { cursor: grabbing; }
.marker-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.region-selection-preview { position: absolute; z-index: 7; border: 2px dashed #ff7676; background: #ff5e5e18; pointer-events: none; }
.map-marker { position: absolute; width: 48px; height: 48px; padding: 0; transform: translate(-50%, -50%); background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 4px 5px #000b); transition: filter .14s ease; }
.edit-mode .map-marker, .edit-mode .map-waypoint { cursor: move; }
.map-marker::before { content: ""; position: absolute; inset: 2px; border: 2px solid #ffffffe6; border-radius: 50%; background: var(--marker-color); box-shadow: inset 0 0 0 2px #00000024, 0 2px 8px #0008; transition: transform .14s ease, box-shadow .14s ease; }
.map-marker .marker-icon { position: absolute; inset: 6px; display: grid; place-items: center; z-index: 1; overflow: hidden; border-radius: 50%; font-size: 18px; font-weight: 900; text-shadow: 0 1px 2px #0009; transition: transform .14s ease; }
.map-marker .marker-icon img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; backface-visibility: hidden; filter: drop-shadow(0 1px 2px #000a); }
.map-marker:hover { z-index: 3; filter: drop-shadow(0 5px 8px #000d); }
.map-marker.selected { z-index: 12; filter: drop-shadow(0 8px 12px #000e); }
.map-marker.pressing-marker::before, .map-waypoint.pressing-marker .waypoint-icon { animation: marker-hold-pulse .22s ease-in-out infinite alternate; }
.map-marker.dragging-marker, .map-waypoint.dragging-marker { z-index: 8; cursor: grabbing; transform: translate(-50%, -58%) scale(1.14); filter: drop-shadow(0 13px 15px #000f); }
@keyframes marker-hold-pulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.map-marker:hover::before, .map-marker:hover .marker-icon { transform: scale(1.12); }
.map-marker.selected::before, .map-marker.selected .marker-icon { transform: scale(1.24); }
.map-marker.selected::before { border-color: white; box-shadow: inset 0 0 0 2px #00000024, 0 0 0 6px #ffffff50, 0 0 28px 8px var(--marker-color); }
.map-marker.selected::after { content: ""; position: absolute; inset: -9px; border: 3px solid #fff; border-radius: 50%; pointer-events: none; animation: selected-target-ring 1.15s ease-out infinite; }
.map-marker .marker-tooltip { position: absolute; left: 50%; bottom: 54px; min-width: 150px; padding: 8px 10px; transform: translateX(-50%); border: 1px solid #4a5b70; border-radius: 7px; background: #101923ed; color: white; opacity: 0; pointer-events: none; white-space: nowrap; font-size: 11px; text-align: left; }
.map-marker:hover .marker-tooltip, .map-marker.selected .marker-tooltip { opacity: 1; }
.map-marker.selected .marker-tooltip { border-color: #8bc6ff; box-shadow: 0 7px 24px #000b, 0 0 0 2px #57a6ff35; }
.marker-tooltip strong { display: block; margin-bottom: 3px; }
.marker-tooltip span { color: #aebbd0; }
.marker-tooltip .tooltip-owner { display: block; margin-top: 4px; color: #d8e4f2; }
.map-waypoint { position: absolute; width: 96px; height: 96px; padding: 0; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 8px 9px #000d); transition: filter .15s ease; }
.map-waypoint .waypoint-icon { position: absolute; inset: 4px; display: grid; place-items: center; color: #8fc5ff; font-size: 64px; font-weight: 900; text-shadow: 0 4px 8px #000d; transition: transform .15s ease; }
.map-waypoint .waypoint-icon img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; backface-visibility: hidden; }
.map-waypoint:hover { z-index: 5; filter: drop-shadow(0 10px 14px #000f); }
.map-waypoint.selected { z-index: 14; filter: drop-shadow(0 13px 18px #000f); }
.map-waypoint:hover .waypoint-icon, .map-waypoint.selected .waypoint-icon { transform: scale(1.1); }
.map-waypoint.selected .waypoint-icon { transform: scale(1.2); filter: drop-shadow(0 0 13px #69b3ff); }
.map-waypoint.selected::before { content: ""; position: absolute; inset: -7px; border: 4px solid #8ec9ff; border-radius: 50%; pointer-events: none; animation: selected-target-ring 1.15s ease-out infinite; }
.map-waypoint .marker-tooltip { position: absolute; left: 50%; bottom: 101px; min-width: 170px; padding: 8px 10px; transform: translateX(-50%); border: 1px solid #4a6b91; border-radius: 7px; background: #101923ed; color: white; opacity: 0; pointer-events: none; white-space: nowrap; font-size: 11px; text-align: left; }
.map-waypoint:hover .marker-tooltip, .map-waypoint.selected .marker-tooltip { opacity: 1; }
.map-waypoint.selected .marker-tooltip { border-color: #8bc6ff; box-shadow: 0 8px 28px #000c, 0 0 0 2px #57a6ff35; }
@keyframes selected-target-ring { 0% { transform: scale(.84); opacity: .95; } 75%, 100% { transform: scale(1.28); opacity: 0; } }
.map-hierarchy-bar { position: absolute; z-index: 4; left: 50%; top: 14px; display: flex; align-items: center; gap: 9px; transform: translateX(-50%); padding: 7px 11px; border: 1px solid #ffffff18; border-radius: 8px; background: #0c1521e8; color: #d7e4f2; font-size: 12px; backdrop-filter: blur(8px); }
.hierarchy-back { height: 27px; padding: 0 9px; border-radius: 6px; background: #22344a; color: #b9d7f6; font-size: 11px; }
.parallel-map-tabs { display: flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid #405169; }
.parallel-map-tab { height: 27px; padding: 0 9px; border-radius: 6px; background: transparent; color: #8fa4bb; font-size: 11px; }
.parallel-map-tab:hover { background: #1c2a3c; color: white; }
.parallel-map-tab.active { background: #397fc8; color: white; }
.map-overlay { position: absolute; z-index: 3; padding: 8px 11px; border: 1px solid #ffffff14; border-radius: 8px; background: #0c1521d9; backdrop-filter: blur(8px); color: #adbbca; font-size: 11px; }
.top-left { left: 14px; top: 14px; }
.separator { display: inline-block; width: 1px; height: 10px; margin: 0 9px; background: #435267; vertical-align: -1px; }
.map-controls { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: grid; gap: 7px; }
.map-controls button { width: 38px; height: 38px; border: 1px solid #40516a; border-radius: 9px; background: #111c29e8; color: white; font-size: 21px; }
.empty-state { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); padding: 12px 18px; border-radius: 10px; background: #111b29e8; color: var(--muted); }
.region-panel { position: absolute; z-index: 4; left: 14px; top: 64px; width: 178px; max-height: calc(100% - 88px); overflow: hidden; border: 1px solid #ffffff1f; border-radius: 9px; background: #0c1521e8; backdrop-filter: blur(8px); box-shadow: 0 8px 28px #0006; }
.region-panel-header { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 11px; border-bottom: 1px solid #ffffff14; color: #dce9f6; font-size: 11px; font-weight: 700; }
.region-add-button { width: 25px; height: 25px; border: 1px solid #48617d; border-radius: 6px; background: #1a2b3e; color: #a9cdec; font-size: 16px; }
.region-list { max-height: calc(100vh - 180px); overflow-y: auto; padding: 6px; }
.region-list-item { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; width: 100%; min-height: 34px; padding: 5px 6px; border-radius: 6px; background: transparent; color: #b8c7d7; text-align: left; font-size: 11px; }
.region-list-item:hover, .region-list-item.selected { background: #1b2d42; color: white; }
.region-color-dot { width: 8px; height: 20px; border-radius: 3px; background: var(--region-color); }
.region-list-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.region-list-count { color: #7790a8; font-size: 10px; }
.region-empty-hint { padding: 12px; color: #657a91; text-align: center; font-size: 10px; }
.region-bounds-info { color: #91a7bc; white-space: pre-line; font-size: 11px; line-height: 1.6; }
.hidden { display: none !important; }

.drawer { position: fixed; top: 54px; right: 0; width: 370px; height: calc(100vh - 54px); z-index: 20; display: flex; flex-direction: column; background: #131c28; border-left: 1px solid #304055; box-shadow: -18px 0 50px #0007; transform: translateX(102%); transition: transform .22s ease; }
.drawer.open { transform: translateX(0); }
.drawer-header { min-height: 79px; display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.drawer-header h2 { margin: 2px 0 0; font-size: 18px; }
.eyebrow { margin: 0; color: var(--accent); font-size: 10px; letter-spacing: .14em; }
.icon-button { width: 34px; height: 34px; border-radius: 8px; background: #1d2a3b; color: #a9b8c9; font-size: 21px; }
.drawer-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; overflow-y: auto; }
label { display: flex; flex-direction: column; gap: 7px; color: #aebbc9; font-size: 12px; }
input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid #304157; border-radius: 7px; outline: 0; background: #0e1621; color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #57a6ff18; }
textarea { resize: vertical; }
.owner-multi-select { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border: 1px solid #304157; border-radius: 8px; background: #0e1621; }
.owner-multi-option { min-width: 0; flex-direction: row; align-items: center; gap: 6px; padding: 6px; border-radius: 6px; background: #152131; cursor: pointer; }
.owner-multi-option:has(input:checked) { background: #1d3854; box-shadow: inset 0 0 0 1px #4b91d6; }
.owner-multi-option input { width: auto; margin: 0; accent-color: var(--accent); }
.owner-multi-option .owner-symbol { width: 23px; height: 23px; border-width: 1px; font-size: 10px; }
.owner-multi-option > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.owner-inheritance-note { margin-top: -9px; padding: 8px 10px; border: 1px solid #5b4d2e; border-radius: 7px; background: #2b2416; color: #d9bd78; font-size: 10px; line-height: 1.5; }
.check-field { flex-direction: row; align-items: center; gap: 9px; }
.check-field input { width: auto; accent-color: var(--accent); }
fieldset { margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }
legend { padding: 0 7px; color: #aebbc9; font-size: 12px; }
.coordinate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.battle-count-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.point-version-fields { border-color: #40566c; background: #101923; }
.version-order-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 9px; }
.version-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.version-picker-row select { min-width: 0; padding-right: 30px; border-color: #41637f; background-color: #102434; color: #bfe7ff; font-weight: 750; }
.version-picker-row select:hover { border-color: #5688ad; background-color: #132b3e; }
.version-create-toggle { min-width: 68px; min-height: 38px; padding: 0 10px; border-color: #3e617d; background: #172a3b; color: #9fd6ff; font-size: 11px; white-space: nowrap; }
.version-create-toggle:hover { border-color: #66a9d9; background: #1c3850; color: #e4f5ff; }
.version-create-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; align-items: center; margin-top: 10px; padding: 9px; border: 1px solid #344f67; border-radius: 8px; background: #0c1620; }
.version-create-row input { min-width: 0; height: 36px; padding: 8px 10px; }
.version-create-row button { min-height: 36px; padding: 0 11px; font-size: 11px; }
.point-version-fields > small { display: block; margin-top: 9px; color: #7890a7; font-size: 10px; line-height: 1.5; }
.conditional-point-fields { border-color: #38516c; background: #101b29; }
.task-relation-field { border-color: #4d4775; background: #17172a; }
.task-relation-field select { border-color: #4f4b78; background: #15162a; color: #d8d5ff; }
.task-relation-hint { margin-top: 9px; padding: 8px 10px; background: #22213a; color: #9e9bc6; }
.form-note { padding: 10px 12px; border-radius: 7px; background: #182536; color: #8fa3b9; font-size: 11px; line-height: 1.6; }
.drawer-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 3px; }
.drawer.view-only .drawer-actions, .drawer.view-only .parallel-map-editor-header .tool-button, .drawer.view-only .icon-remove-button, .drawer.view-only .version-create-toggle { display: none; }
.drawer.view-only input:disabled, .drawer.view-only select:disabled, .drawer.view-only textarea:disabled { opacity: 1; border-color: #273648; background: #111a26; color: #dce7f3; cursor: default; }
.drawer.view-only .icon-upload-copy { pointer-events: none; opacity: .55; }
.view-mode .edit-only { display: none !important; }

.data-board { min-height: 0; display: flex; flex-direction: column; padding: 24px 28px 28px; overflow: hidden; background: radial-gradient(circle at 76% -20%, #173558 0, transparent 38%), #0b111a; }
.data-board-header { height: 78px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.data-board-header h2 { margin: 3px 0 4px; font-size: 22px; }
.data-board-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }
.data-board-header-actions { display: flex; align-items: center; gap: 18px; }
.data-auto-save-tools { display: flex; align-items: center; gap: 8px; }
.data-auto-save-label { display: inline-flex; align-items: center; gap: 6px; color: #77c99b; font-size: 10px; white-space: nowrap; }
.data-auto-save-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #62d28e; box-shadow: 0 0 8px #62d28e99; }
.data-undo-button { height: 36px; padding: 0 13px; border: 1px solid #465a72; border-radius: 8px; background: #182536; color: #c2d1e1; font-size: 11px; }
.data-undo-button:hover:not(:disabled) { border-color: #70aee7; background: #22364c; color: white; }
.data-undo-button:disabled { opacity: .42; cursor: not-allowed; }
.data-save-all-button { min-width: 132px; height: 38px; padding: 0 16px; border-radius: 9px; box-shadow: 0 7px 20px #2f8cff2d; font-size: 11px; font-weight: 800; }
.data-board-summary { min-width: 104px; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding-top: 5px; }
.data-board-summary strong { color: #72b9ff; font-size: 28px; }
.data-board-summary span { color: var(--muted); font-size: 11px; }
.data-filter-panel { display: grid; grid-template-columns: minmax(250px, 2fr) repeat(3, minmax(150px, 1fr)); align-items: end; gap: 10px; padding: 14px; border: 1px solid #29394d; border-radius: 12px; background: #111a26e8; box-shadow: 0 10px 35px #0003; }
.data-filter-panel label { gap: 5px; color: #8093a9; font-size: 10px; font-weight: 700; }
.data-filter-panel input, .data-filter-panel select { height: 37px; padding: 7px 9px; font-size: 11px; }
.data-multi-filter-field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 5px; color: #8093a9; font-size: 10px; font-weight: 700; }
.data-filter-label { line-height: 1.2; }
.data-multi-filter-button { width: 100%; height: 37px; padding: 7px 30px 7px 10px; overflow: hidden; border: 1px solid #304157; border-radius: 6px; background: #101923; color: #d8e2ee; white-space: nowrap; text-align: left; text-overflow: ellipsis; font-size: 11px; }
.data-multi-filter-button::after { content: "⌄"; position: absolute; right: 11px; bottom: 10px; color: #8296ac; }
.data-multi-filter-button.has-filter { border-color: #4f91cf; background: #142b42; color: #a9d5ff; }
.data-multi-filter-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); min-width: 220px; max-height: 360px; overflow: hidden; border: 1px solid #40546b; border-radius: 9px; background: #111b28; box-shadow: 0 14px 38px #000a; }
.data-multi-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 8px; border-bottom: 1px solid #29394d; }
.data-multi-filter-actions button { height: 29px; border: 1px solid #3a5069; border-radius: 6px; background: #19283a; color: #9fc5e9; font-size: 10px; }
.data-multi-filter-actions button:hover { border-color: #62adf5; color: white; }
.data-multi-filter-options { max-height: 292px; padding: 7px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #40536b #111925; }
.data-multi-filter-option { min-width: 0; display: grid !important; grid-template-columns: 18px 30px minmax(0, 1fr); align-items: center; gap: 7px !important; padding: 6px 7px; border-radius: 6px; cursor: pointer; color: #c2d0df !important; }
.data-multi-filter-option:hover { background: #1a2a3c; }
.data-multi-filter-option:has(input:checked) { background: #18324b; color: #e6f3ff !important; }
.data-multi-filter-option input { width: 15px !important; height: 15px !important; margin: 0; padding: 0 !important; accent-color: #57a6ff; }
.data-multi-filter-option .type-symbol { width: 28px; height: 30px; }
.data-multi-filter-option > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.data-reset-button { height: 37px; white-space: nowrap; }
.data-table-card { flex: 1 1 0; min-height: 0; margin-top: 14px; overflow: hidden; border: 1px solid #29394d; border-radius: 12px; background: #101824e8; box-shadow: 0 14px 45px #0004; }
.data-table-scroll { position: relative; height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #40536b #111925; }
.data-table-scroll::before, .data-table-scroll::after { content: ""; position: sticky; left: 0; z-index: 5; display: block; width: 100%; height: 0; pointer-events: none; opacity: 0; transition: opacity .12s; }
.data-table-scroll::before { top: 43px; box-shadow: 0 12px 24px 14px #4a9cf05c; }
.data-table-scroll::after { bottom: 0; box-shadow: 0 -12px 24px 14px #4a9cf05c; }
.data-table-scroll.data-auto-scroll-up::before, .data-table-scroll.data-auto-scroll-down::after { opacity: 1; }
.data-table { width: 100%; min-width: 2952px; border-collapse: collapse; table-layout: fixed; }
.data-table th { position: sticky; top: 0; z-index: 2; height: 43px; padding: 0 25px 0 32px; border-bottom: 1px solid #33445b; background: #162232; color: #91a4b9; text-align: left; font-size: 10px; letter-spacing: .03em; }
.data-column-resizer { position: absolute; top: 0; right: -4px; z-index: 4; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.data-column-resizer::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 4px; width: 1px; background: #40546c; transition: width .12s, left .12s, background .12s; }
.data-column-resizer:hover::after, .data-table th.is-resizing .data-column-resizer::after { left: 3px; width: 3px; border-radius: 2px; background: #59aaff; }
.data-column-resizing, .data-column-resizing * { cursor: col-resize !important; user-select: none !important; }
.data-column-drag-handle { position: absolute; left: 7px; top: 50%; z-index: 3; width: 18px; height: 26px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 5px; color: #627b94; cursor: grab; user-select: none; transform: translateY(-50%); font-size: 14px; line-height: 1; }
.data-column-drag-handle:hover { border-color: #42698c; background: #1d344a; color: #9fd5ff; }
.data-column-drag-handle:active { cursor: grabbing; }
.view-mode .data-column-drag-handle { display: none; }
.view-mode .data-table th { padding-left: 12px; }
.data-column-dragging, .data-column-dragging * { cursor: grabbing !important; user-select: none !important; }
.data-table th.data-column-drag-source { opacity: .48; }
.data-table th.data-column-drop-before { box-shadow: inset 4px 0 0 #59aaff; }
.data-table th.data-column-drop-after { box-shadow: inset -4px 0 0 #59aaff; }
.data-table th[data-column-key="order"] { width: 210px; }
.data-table th[data-column-key="type"] { width: 125px; }
.data-table th[data-column-key="configId"] { width: 140px; }
.data-table th[data-column-key="dropConfigId"] { width: 150px; }
.data-table th[data-column-key="name"] { width: 250px; }
.data-table th[data-column-key="version"] { width: 130px; }
.data-table th[data-column-key="versionOrder"] { width: 110px; }
.data-table th[data-column-key="instanceId"] { width: 190px; }
.data-table th[data-column-key="world"] { width: 120px; }
.data-table th[data-column-key="mapLayer"] { width: 150px; }
.data-table th[data-column-key="task"] { width: 230px; }
.data-table th[data-column-key="region"] { width: 145px; }
.data-table th[data-column-key="owner"] { width: 175px; }
.data-table th[data-column-key="recommendedLevel"] { width: 105px; }
.data-table th[data-column-key="battlePlayerCount"] { width: 120px; }
.data-table th[data-column-key="battleEnemyCount"] { width: 120px; }
.data-table th[data-column-key="prerequisite"] { width: 170px; }
.data-table th[data-column-key="coordinate"] { width: 190px; }
.data-table th[data-column-key="manage"] { width: 122px; }
.data-table td { height: 56px; padding: 8px 12px; border-bottom: 1px solid #202e40; color: #c8d5e3; vertical-align: middle; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: #172639; }
.data-order-cell { display: flex; align-items: center; gap: 8px; }
.data-task-parent-row td { background: #18293b; border-top: 1px solid #3a536e; border-bottom-color: #344c65; }
.data-task-parent-row:hover td { background: #1d3248; }
.data-task-parent-row td:first-child { box-shadow: inset 4px 0 #48a4f5; }
.data-task-child-row td { background: #111d2c; border-bottom-color: #29384c; }
.data-task-child-row:hover td { background: #192a3e; }
.data-task-child-row td:first-child { box-shadow: inset 4px 0 #9177e8; }
.data-region-parent-row td { background: #17302f; border-top: 1px solid #3c6865; border-bottom-color: #315553; }
.data-region-parent-row:hover td { background: #1c3b39; }
.data-region-parent-row td:first-child { box-shadow: inset 4px 0 #45c6b9; }
.data-region-child-row td { background: #101f25; border-bottom-color: #294048; }
.data-region-child-row:hover td { background: #173039; }
.data-region-child-row td:first-child { box-shadow: inset 4px 0 #50a9d3; }
.data-task-toggle { display: inline-grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; padding: 0; border: 1px solid #53708e; border-radius: 6px; background: #20364c; color: #d1e8ff; cursor: pointer; }
.data-task-toggle:hover { border-color: #72baff; background: #294966; }
.data-task-toggle span { display: block; font-size: 15px; line-height: 1; transition: transform .16s ease; }
.data-task-toggle[aria-expanded="false"] span { transform: rotate(-90deg); }
.data-task-toggle:disabled { opacity: .62; cursor: default; }
.data-tree-branch { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 0 30px; align-self: stretch; color: #b29eff; font-size: 20px; font-weight: 800; line-height: 1; }
.data-tree-branch i { position: absolute; left: 8px; top: -18px; bottom: 50%; width: 1px; background: #725bc5; }
.data-tree-branch b { font: inherit; transform: translateY(-1px); }
.data-region-branch { color: #71d8cf; }
.data-region-branch i { background: #378b85; }
.data-kind-badge.task-parent { background: #1d4462; color: #8fd0ff; }
.data-kind-badge.region-parent { background: #20504c; color: #90ece2; }
.data-task-child-row .data-kind-badge { background: #352d52; color: #d0c4ff; }
.data-region-child-row .data-kind-badge { background: #1f4654; color: #9fdef7; }
.data-task-child-count { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid #58708b; border-radius: 10px; background: #132334; color: #c3d5e8; font-size: 9px; font-weight: 750; }
.data-region-child-count { border-color: #3f7772; background: #102c2a; color: #a8dfd9; }
.data-order-handle { flex: 0 0 auto; width: 22px; height: 28px; display: grid; place-items: center; border: 1px solid #3a4c61; border-radius: 6px; background: #182536; color: #8db8df; cursor: grab; user-select: none; touch-action: none; font-size: 13px; font-weight: 900; letter-spacing: -4px; text-indent: -4px; }
.data-order-handle:hover { border-color: #62adf5; background: #23415f; color: #d6ecff; }
.data-order-handle:active { cursor: grabbing; }
.data-version-sort-indicator { flex: 0 0 auto; height: 24px; display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid #4c657b; border-radius: 6px; background: #142737; color: #91ccec; font-size: 9px; font-weight: 800; white-space: nowrap; }
.data-row-dragging { opacity: .42; }
.data-drop-before td { box-shadow: inset 0 3px 0 #62adf5; }
.data-drop-after td { box-shadow: inset 0 -3px 0 #62adf5; }
.data-primary { display: block; overflow: hidden; color: #eef5fc; text-overflow: ellipsis; font-size: 12px; font-weight: 750; }
.data-name-value { color: #dce8f5; font-weight: 650; }
.data-field-editor { width: 100%; height: 31px; min-width: 0; padding: 5px 8px; border: 1px solid #30445b; border-radius: 6px; background: #0d1723; color: #d9e6f3; font-size: 10px; }
.data-field-editor:focus { border-color: #58a9f6; outline: none; box-shadow: 0 0 0 2px #2f83d52e; }
.data-drop-config-input { border-color: #365b49; background: #102019; color: #b9f0c8; }
.data-drop-config-input:focus { border-color: #55b982; box-shadow: 0 0 0 2px #55b98225; }
.data-instance-editor input { height: 29px; min-width: 0; padding: 5px 7px; font-size: 10px; }
.data-instance-id { display: block; overflow: hidden; color: #83c7ff; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.data-kind-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 12px; background: #1b3047; color: #93c8fa; font-size: 10px; font-weight: 750; }
.data-kind-badge.waypoint { background: #352b50; color: #c6adff; }
.data-kind-badge.region { background: #49302e; color: #ffb0a9; }
.data-owner-cell { white-space: normal !important; line-height: 1.5; }
.data-type-display { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #dce9f5; }
.data-type-display .type-symbol { width: 29px; height: 31px; }
.data-task-link-select { width: 100%; height: 34px; min-width: 0; padding: 5px 26px 5px 8px; border-color: #4a5272; background: #191d32; color: #cbcfff; font-size: 10px; }
.data-task-link-select:focus { border-color: #8d86ff; box-shadow: 0 0 0 2px #8d86ff22; }
.data-location-select { width: 100%; height: 34px; min-width: 0; padding: 5px 24px 5px 8px; border: 1px solid #34526c; border-radius: 6px; background: #102131; color: #a9d4f7; font-size: 10px; }
.data-location-select:focus { border-color: #58a9f6; outline: none; box-shadow: 0 0 0 2px #2f83d52e; }
.data-task-link-display { display: block; min-width: 0; overflow: hidden; }
.data-task-link-display strong, .data-task-link-display small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.data-task-link-display strong { color: #d7d4ff; font-size: 11px; }
.data-task-link-display small { margin-top: 3px; color: #807cab; font-size: 9px; }
.data-not-applicable { color: #5e7085; }
.data-special-value { color: #ffd782; font-size: 12px; font-weight: 800; }
.data-empty-value { color: #687b90; font-size: 10px; }
.data-special-input { width: 100%; height: 29px; min-width: 0; padding: 5px 7px; border-color: #536043; background: #192116; color: #ffe29a; font-size: 10px; }
.data-special-input:focus { border-color: #d2a84b; box-shadow: 0 0 0 2px #d2a84b22; }
.data-version-select { border-color: #416781; background: #102434; color: #b9e8ff; font-weight: 750; }
.data-version-select:hover { border-color: #5a91b6; background: #142d41; }
.data-version-order-input { color: #ffe0a0; }
.data-coordinate { color: #84a0bb; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.data-manage-button { width: 48px; height: 29px; border: 1px solid #3a5979; border-radius: 6px; background: #19314a; color: #9bcfff; font-size: 10px; }
.data-manage-button:hover { border-color: #62adf5; background: #28527a; color: white; }
.data-row-actions { display: flex; gap: 5px; }
.data-auto-save-state { display: inline-flex; align-items: center; color: #65bd8b; font-size: 9px; white-space: nowrap; }
.data-auto-save-pending .data-auto-save-state { color: #e6b95f; }
.data-auto-save-error .data-auto-save-state { color: #ff7788; }
.data-auto-save-error input, .data-auto-save-error select { border-color: #c54f62 !important; }
.data-save-button { width: 48px; height: 29px; border: 1px solid #3d765d; border-radius: 6px; background: #183b2b; color: #8de0b3; font-size: 10px; }
.data-save-button:hover { border-color: #61c98b; background: #24563e; color: white; }
.marker-tooltip .tooltip-special { display: block; margin-top: 4px; color: #ffd782; font-weight: 750; }
.edit-mode .data-table td { height: 68px; }
.data-table-empty { padding: 80px 20px; color: #697d93; text-align: center; font-size: 13px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 30px; background: #03070cb8; backdrop-filter: blur(5px); }
.modal-card { width: min(760px, 100%); max-height: 82vh; overflow: hidden; border: 1px solid #34445a; border-radius: 14px; background: #131c28; box-shadow: 0 25px 80px #000b; }
.root-map-modal-card { width: min(430px, 100%); }
.root-map-modal-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.type-editor-layout { display: grid; grid-template-columns: 1fr 1fr; height: min(68vh, 620px); min-height: 390px; overflow: hidden; }
.type-editor-list { min-height: 0; padding: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #40536b #111925; border-right: 1px solid var(--line); }
.type-editor-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: transparent; text-align: left; }
.type-editor-item:hover, .type-editor-item.selected { background: #1c293a; }
.type-editor-item .copy { flex: 1; }
.type-editor-item strong, .type-editor-item small { display: block; }
.type-editor-item small { margin-top: 3px; color: var(--muted); }
.type-delete-button { padding: 5px 7px; color: #ff8091; background: transparent; }
.type-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.type-style-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.icon-upload-row { min-height: 46px; display: grid; grid-template-columns: 38px 1fr 25px; align-items: center; gap: 8px; padding: 5px; border: 1px dashed #40536b; border-radius: 8px; background: #0e1621; }
.icon-upload-preview { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #1d2a3a; color: #6f8195; font-size: 10px; }
.icon-upload-preview img { width: 100%; height: 100%; object-fit: contain; }
.large-preview-row { min-height: 68px; grid-template-columns: 58px 1fr 25px; }
.waypoint-icon-preview { width: 56px; height: 56px; }
.map-file-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border: 1px solid #304157; border-radius: 8px; background: #0e1621; color: #8fa3b9; }
.parallel-map-editor { display: flex; flex-direction: column; gap: 10px; }
.parallel-map-editor-header { display: flex; align-items: center; justify-content: space-between; }
.parallel-map-editor-header legend { float: left; }
.parallel-map-editor-list { display: flex; flex-direction: column; gap: 8px; }
.parallel-map-row { display: grid; grid-template-columns: 82px auto auto auto minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: center; gap: 7px; padding: 9px; border: 1px solid #2e4055; border-radius: 8px; background: #0d1621; }
.parallel-map-thumbnail { grid-column: 1; grid-row: 1 / span 3; width: 82px; height: 78px; display: grid; place-items: center; overflow: hidden; border: 1px solid #354a62; border-radius: 6px; background: #09111b; color: #64788d; font-size: 9px; }
.parallel-map-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.parallel-map-row input { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
.parallel-map-upload { height: 34px; padding: 0 9px; border-radius: 6px; border: 1px solid #38516c; background: #19283a; color: #a9c8e8; font-size: 10px; }
.parallel-map-upload { grid-column: 2; grid-row: 2; }
.parallel-map-clear { height: 34px; padding: 0 8px; border: 1px solid #665332; border-radius: 6px; background: #302817; color: #e4c477; font-size: 10px; }
.parallel-map-clear { grid-column: 3; grid-row: 2; }
.parallel-map-clear:hover:not(:disabled) { border-color: #d4a84e; background: #4a3a1d; color: #ffe08e; }
.parallel-map-delete { grid-column: 4; grid-row: 2; width: 34px; height: 34px; border-radius: 6px; background: #321c25; color: #ff8394; }
.parallel-map-status { grid-column: 2 / -1; grid-row: 3; color: #70869c; font-size: 10px; }
.icon-upload-copy { position: relative; overflow: hidden; color: #8fa3b9; font-size: 10px; cursor: pointer; }
.icon-upload-copy input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.icon-remove-button { width: 24px; height: 24px; border-radius: 6px; background: #2c1c25; color: #ff8091; }
.type-main-button { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; transform: translateX(-50%); padding: 10px 16px; border: 1px solid #3d536d; border-radius: 9px; background: #142133ef; box-shadow: 0 8px 25px #0008; font-size: 12px; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 270px 1fr; }
  .toolbar .mode-hint { display: none; }
  .toolbar { overflow-x: auto; }
}


/* Read-only browsing: controls are removed from HTML, not merely concealed. */
.readonly-mode-badge { padding: 7px 12px; border: 1px solid #3e687d; border-radius: 7px; color: #a6dded; background: #163345; white-space: nowrap; font-size: 13px; }
.readonly-mode .global-board-status { color: #addbea; }
.readonly-mode .drawer input:disabled, .readonly-mode .drawer select:disabled, .readonly-mode .drawer textarea:disabled { opacity: 1; color: #dbe6f2; -webkit-text-fill-color: #dbe6f2; cursor: text; }
.readonly-parallel-map { grid-template-columns: 66px 1fr; }
.readonly-parallel-map .parallel-map-status { grid-column: 2; }
.readonly-mode .data-column-drag-handle { display: none; }
.readonly-mode .version-create-actions:empty { display: none; }