@font-face {
  font-family: "MapEditorCJK";
  src: url("../../../assets/fonts/hk-shao-nu.woff2?v=h0e6e448c6d1e") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-30FF, U+31C0-31EF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
:root {
  color-scheme: dark;
  --left-width: 248px;
  --right-width: 300px;
  --bottom-height: 210px;
  --menu-height: 44px;
  --toolbar-height: 35px;
  --status-height: 22px;
  --splitter: 4px;
  --bg-0: #191919;
  --bg-1: #222;
  --bg-2: #282828;
  --bg-3: #303030;
  --bg-4: #383838;
  --line: #111;
  --line-soft: #454545;
  --text: #d5d5d5;
  --muted: #999;
  --blue: #3f81b5;
  --blue-strong: #4c95cc;
  --danger: #b34a4a;
  font: 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "MapEditorCJK", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg-0); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, input, textarea { border: 1px solid #171717; border-radius: 2px; background: #333; }
button { min-height: 23px; padding: 2px 8px; cursor: default; }
button:hover:not(:disabled), summary:hover { background: #454545; }
button:active:not(:disabled), button.active { background: var(--blue); border-color: #28638d; color: #fff; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 1px solid var(--blue-strong); outline-offset: -1px; }
button:disabled { opacity: .4; }
button.danger:hover { background: var(--danger); }
input, select, textarea { min-height: 21px; padding: 2px 5px; }
input[type="checkbox"] { min-height: auto; accent-color: var(--blue); }
input[type="search"] { background: #1d1d1d; }
textarea { resize: vertical; width: 100%; }
kbd { color: #aaa; font: 10px/1 Consolas, monospace; }
svg { width: 15px; height: 15px; fill: currentColor; vertical-align: middle; }
.icon-sheet { position: fixed; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.grow, .menu-spacer { flex: 1; }

#app { height: 100%; display: grid; grid-template-rows: var(--menu-height) var(--toolbar-height) minmax(0, 1fr) var(--status-height); }
#menu-bar { z-index: 40; display: flex; align-items: stretch; min-width: 0; border-bottom: 1px solid #080808; background: #2d2d2d; }
.brand { display: flex; align-items: center; gap: 7px; min-width: 132px; padding: 0 11px; color: #eee; }
.brand b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: #eee; color: #292929; font-size: 11px; }
.menu { position: relative; }
.menu > summary { display: flex; align-items: center; height: 100%; padding: 0 8px; list-style: none; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--blue); color: white; }
.menu-popup { position: absolute; top: 100%; left: 0; width: max-content; min-width: 190px; padding: 4px; border: 1px solid #111; box-shadow: 0 8px 22px #0009; background: #333; }
.menu-popup button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 24px; border: 0; padding: 3px 18px 3px 10px; text-align: left; background: transparent; }
.menu-popup button:hover, .menu-popup button:focus { background: var(--blue); color: white; outline: 0; }
.menu-separator { height: 1px; margin: 4px 2px; background: #171717; }
.menu-submenu { position: relative; }
.submenu-popup { position: absolute; top: -4px; left: calc(100% - 4px); display: none; min-width: 150px; padding: 4px; border: 1px solid #111; background: #333; box-shadow: 0 8px 22px #0009; }
.menu-submenu:hover > .submenu-popup, .menu-submenu:focus-within > .submenu-popup { display: block; }
.submenu-arrow { margin-left: 24px; }
.menu-popup kbd { margin-left: 28px; }
.collab-archive-menu { z-index: 2; }
.collab-archive-popup { width: min(470px, calc(100vw - 16px)); padding: 6px; }
.collab-archive-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 4px; }
.collab-archive-toolbar button { min-height: 28px; border: 1px solid #151515; background: #3a3a3a; }
.collab-archive-toolbar #collab-archive-save { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-archive-toolbar #collab-archive-save[data-state="saving"] { border-color: #80691d; color: #f1d779; }
.collab-archive-toolbar #collab-archive-save[data-state="saved"] { border-color: #28795d; color: #8ae0bc; }
.collab-archive-toolbar #collab-archive-save[data-state="error"] { border-color: #8f3f49; color: #ff9aa6; }
.collab-archive-toolbar #collab-archive-save:disabled { cursor: wait; opacity: .88; }
.collab-archive-list { display: grid; gap: 4px; max-height: min(520px, calc(100vh - 70px)); overflow: auto; min-width: 0; }
.collab-archive-loading, .collab-archive-empty, .collab-archive-section-title { display: block; padding: 7px 8px; color: #aaa; }
.collab-archive-section-title { padding-top: 9px; border-top: 1px solid #1d1d1d; color: #d4d4d4; font-weight: 700; }
.collab-archive-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 6px 7px; border: 1px solid #202020; background: #303030; }
.collab-archive-row.is-current { border-color: #4b89b3; background: #293a46; }
.collab-archive-info { min-width: 0; }
.collab-archive-info strong, .collab-archive-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-archive-info strong { color: #eee; font-size: 12px; }
.collab-archive-info small { margin-top: 2px; color: #999; font-size: 10px; }
.collab-archive-actions { display: flex; gap: 3px; }
.menu-popup .collab-archive-actions button { width: auto; min-width: 38px; min-height: 25px; padding: 2px 7px; border: 1px solid #171717; background: #3b3b3b; }
.menu-popup .collab-archive-actions .danger { color: #ffadad; }
.menu-popup .collab-archive-actions button:disabled { opacity: .45; }
.unity-version { display: flex; align-items: center; padding: 0 10px; color: #888; font-size: 11px; }
.collab-presence { display: flex; flex: 0 0 auto; align-items: center; align-self: center; gap: 5px; min-height: 23px; margin: 2px 5px 2px 2px; padding: 1px 7px; border: 1px solid #171717; border-radius: 3px; background: #252525; color: #aaa; }
.collab-presence[data-mode="online"] { border-color: #285d4d; color: #9addc4; }
.collab-presence-label { white-space: nowrap; font-size: 10px; }
.collab-presence strong { min-width: 13px; color: #e6fff5; font-size: 10px; text-align: center; }
.collab-local-name { max-width: 90px; overflow: hidden; color: #ddd; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#workspace-bar { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 7px; border-bottom: 1px solid #111; background: #292929; }
#workspace-bar button { min-width: 28px; }
.workspace-title { margin-left: 5px; color: #bdbdbd; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; }
.view-mode-tabs { flex: 0 0 auto; }
.workplane-tabs { display: flex; flex: 0 1 auto; min-width: 0; max-width: 42vw; overflow-x: auto; scrollbar-width: thin; }
.workplane-tab { display: inline-flex; flex: 0 0 auto; }
#workspace-bar .workplane-tab-select { max-width: 190px; overflow: hidden; border-radius: 0; text-overflow: ellipsis; white-space: nowrap; }
#workspace-bar .workplane-tab-delete { min-width: 22px; padding-inline: 4px; border-radius: 0; color: #aaa; }
#workspace-bar .workplane-tab.active .workplane-tab-select { background: var(--blue); border-color: #28638d; color: #fff; }
.compact-field { display: inline-flex; align-items: center; gap: 4px; }
.compact-field input { width: 54px; }
.compact-field select { width: 48px; }

#main { min-height: 0; display: grid; grid-template-columns: var(--left-width) var(--splitter) minmax(260px, 1fr) var(--splitter) var(--right-width); overflow: hidden; }
#left-dock, #inspector-dock, #viewport-shell { min-width: 0; min-height: 0; background: var(--bg-1); }
#left-dock { border-right: 1px solid #0e0e0e; }
#inspector-dock { border-left: 1px solid #0e0e0e; }
.panel-section { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.panel-heading { flex: 0 0 25px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; border-bottom: 1px solid #111; background: #303030; color: #ddd; }
.viewport-tabs { display: flex; align-self: stretch; }
.viewport-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; }
.viewport-tabs button.active { border-bottom-color: var(--blue-strong); background: #383838; }
#viewport-shell.game-view #scene-toolbar { visibility: hidden; }
.panel-actions { display: flex; align-items: center; gap: 2px; }
.panel-actions button { min-width: 22px; padding: 0 4px; }
.panel-actions select { width: 65px; }
#scene-filter { flex: 0 0 auto; margin: 4px; width: calc(100% - 8px); }
#scene-tree { flex: 1; min-height: 0; overflow: auto; padding: 2px 0 18px; }

.tree-row { display: flex; align-items: center; min-width: max-content; height: 22px; padding-right: 4px; color: #c9c9c9; user-select: none; }
.tree-row:hover { background: #ffffff0d; }
.tree-row.selected, [role="treeitem"][aria-selected="true"] > .tree-row { background: #325f81; color: white; }
.tree-row.current { box-shadow: inset 2px 0 #5e96b8; }
.tree-row.asset-context { background: #29343c; color: #c7d1d8; }
.tree-row.drop-before { box-shadow: inset 0 2px var(--blue-strong); }
.tree-row.drop-after { box-shadow: inset 0 -2px var(--blue-strong); }
.tree-row.drop-inside { outline: 1px solid var(--blue-strong); outline-offset: -1px; background: #314e61; }
.tree-toggle, .tree-eye, .tree-lock { display: grid; place-items: center; min-width: 20px; min-height: 20px; padding: 0; border: 0; background: transparent; color: #b8c0c6; }
.tree-toggle:hover, .tree-toggle:focus-visible { color: #8bc7ef; background: #314758; outline: none; }
.tree-toggle.off { color: #687078; }
.tree-toggle svg { width: 15px; height: 15px; }
.tree-arrow-placeholder { display: inline-block; width: 20px; flex: 0 0 20px; }
.tree-icon { width: 17px; text-align: center; color: #aaa; }
.tree-name { overflow: hidden; max-width: 155px; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { margin-left: auto; color: #888; }
.tree-name-input { width: 140px; height: 20px; }

#viewport-shell { container-type: inline-size; display: grid; grid-template-rows: 25px 40px 0 minmax(100px, 1fr) var(--splitter) var(--bottom-height); overflow: hidden; background: #141414; }
.scene-heading { background: #262626; }
.scene-state { color: #8d8d8d; font-size: 11px; }
#scene-toolbar { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; padding: 3px 5px; border-bottom: 1px solid #111; background: #333; }
#scene-toolbar > :not(.grow) { flex-shrink: 0; }
#scene-toolbar button, #scene-toolbar label { white-space: nowrap; }
#scene-toolbar { font-size: 11px; }
#viewport-toolbar { overflow: hidden; }
.tool-group { display: inline-flex; gap: 1px; }
#scene-toolbar button, .tile-palette-toolbar button { min-width: 27px; padding: 2px 5px; }
#scene-toolbar button kbd, .tile-palette-toolbar button kbd { margin-left: 3px; }
.sep { width: 1px; height: 19px; margin: 0 3px; background: #1c1c1c; box-shadow: 1px 0 #484848; }
.mode-toggle { min-width: 64px !important; color: #bbb; }
#scene-toolbar .compact-field input { width: 44px; }
#scene-toolbar .workplane-field { display: inline-flex; align-items: center; gap: 3px; }
#workplane-select { width: 118px; min-width: 82px; }
#workplane-delete { padding-inline: 5px; }
#canvas-wrap { position: relative; min-height: 0; overflow: hidden; background: #1b1b1b; }
#canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; outline: none; }
#canvas.asset-drop-target { outline: 2px solid #8bc7ef; outline-offset: -2px; cursor: copy; }
#canvas-3d { z-index: 0; }

.splitter { z-index: 15; background: #181818; user-select: none; touch-action: none; }
.splitter.vertical { cursor: col-resize; }
.splitter.horizontal { cursor: row-resize; }
.splitter:hover, .splitter.dragging { background: var(--blue); }
#split-left { grid-column: 2; }
#split-right { grid-column: 4; }

.bottom-panel { min-height: 0; display: grid; grid-template-rows: 27px minmax(0, 1fr); border-top: 1px solid #0b0b0b; background: #242424; }
.bottom-tabs { display: flex; align-items: end; gap: 1px; padding-left: 3px; border-bottom: 1px solid #111; background: #2d2d2d; }
.bottom-tabs button { min-width: 86px; height: 26px; border: 0; border-radius: 0; background: transparent; }
.bottom-tabs button.active { border-bottom: 2px solid var(--blue-strong); background: #383838; }
#tile-selection { margin: 0 8px 5px auto; color: #8d8d8d; }
.bottom-content { min-height: 0; overflow: hidden; }
.project-browser { height: 100%; display: grid; grid-template-columns: 130px minmax(0, 1fr); }
.project-sidebar { display: flex; flex-direction: column; gap: 5px; padding: 9px; border-right: 1px solid #111; background: #252525; }
.project-sidebar b { color: #999; font-size: 11px; text-transform: uppercase; }
.project-sidebar .project-source { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0; background: transparent; color: #ccc; text-align: left; }
.project-sidebar .project-source:hover, .project-sidebar .project-source.active { background: #3c3c3c; }
.project-source-children { display: flex; flex-direction: column; gap: 2px; margin-left: 13px; padding-left: 6px; border-left: 1px solid #555; }
.project-source-children .project-source { position: relative; width: 100%; }
.project-source-children .project-source::before { position: absolute; left: -7px; width: 6px; border-top: 1px solid #555; content: ''; }
.project-tree-arrow { width: 9px; color: #aaa; }
.project-folder-glyph { color: #c8a968; }
.project-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 160px)); gap: 6px; align-content: start; padding: 3px; }
.project-folder { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 7px 10px; border: 1px solid transparent; background: #282828; color: #ddd; text-align: left; }
.project-folder:hover, .project-folder:focus-visible { border-color: #76a7ca; background: #323c44; outline: none; }
.project-folder .project-folder-glyph { font-size: 20px; }
.project-assets { min-width: 0; min-height: 0; display: grid; grid-template-rows: 28px min-content 22px 28px minmax(0, 1fr); }
.project-placement-hint { grid-row: 3; display: flex; align-items: center; padding: 1px 6px; border-bottom: 1px solid #151515; color: #a9cbe2; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #26333d; }
.project-assets.drag-target .project-placement-hint { background: #315a76; color: #fff; }
.project-assets.drag-target { outline: 1px solid var(--blue-strong); outline-offset: -1px; }
.project-path { grid-row: 1; display: flex; align-items: center; gap: 5px; padding: 3px 5px; border-bottom: 1px solid #151515; }
.project-path { position: relative; }
.project-path span { color: #aaa; }
.project-path button { margin-left: auto; }
.project-create-menu { position: absolute; z-index: 80; top: 27px; right: 4px; min-width: 135px; padding: 4px; border: 1px solid #111; background: #333; box-shadow: 0 6px 16px #0009; }
.project-create-menu button { display: block; width: 100%; margin: 0; border: 0; background: transparent; text-align: left; }
.project-folder-create { grid-row: 2; display: flex; gap: 4px; padding: 4px 5px; border-bottom: 1px solid #151515; background: #292929; }
.project-folder-create[hidden] { display: none; }
.project-folder-create input { min-width: 0; flex: 1; }
#project-custom-folders { display: contents; }
.prefab-strip { grid-row: 4; display: flex; align-items: center; gap: 5px; padding: 3px 5px; border-bottom: 1px solid #151515; }
.prefab-strip label { display: flex; align-items: center; gap: 5px; min-width: 0; }
.prefab-strip select { min-width: 110px; max-width: 240px; }
#asset-search { width: min(220px, 42%); }
#asset-list { grid-row: 5; min-height: 0; overflow: auto; padding: 5px; }
.rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 4px 0; }
.rule-grid select { min-width: 0; padding: 1px; font-size: 10px; }
.button-row { display: flex; gap: 4px; flex-wrap: wrap; }
.cat-head { height: 24px; padding: 4px 5px; color: #aaa; background: #292929; user-select: none; }
.cat-grid, .asset-virtual-row { display: grid; grid-template-columns: repeat(var(--asset-columns), 220px); justify-content: start; gap: 4px; height: 86px; }
.asset-item { position: relative; min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 5px; height: 80px; padding: 4px; border: 1px solid transparent; background: #282828; cursor: grab; }
.asset-item:active { cursor: grabbing; }
.asset-item:focus-visible { outline: 2px solid #8bc7ef; outline-offset: -2px; }
.asset-item:hover { background: #323232; }
.asset-item.project-selected { border-color: #76a7ca; background: #315e7e; color: #fff; }
.asset-item.placing:not(.project-selected) { border-color: transparent; }
.asset-item img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; background: #1d1d1d; }
.asset-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-item.font-asset { grid-template-rows: auto auto; cursor: default; }
.font-glyph { grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; background: #1d1d1d; color: #ddd; font: 600 21px/1 Georgia, serif; }
.asset-meta { color: var(--muted); font-size: 10px; }
.asset-edit { position: absolute; right: 3px; bottom: 3px; min-height: 18px; padding: 0 4px; opacity: 0; }
.asset-item:hover .asset-edit, .asset-item:focus-within .asset-edit { opacity: 1; }
.virtual-spacer { pointer-events: none; }
.tile-workplane-reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f0be76; }
.tile-cell-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

#tile-palette-panel { grid-template-rows: 31px minmax(0, 1fr) 31px; }
#tile-palette-panel:not([hidden]) { display: grid; }
.tile-palette-toolbar { display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 3px 5px; border-bottom: 1px solid #111; scrollbar-width: thin; }
.tile-palette-toolbar button { flex: 0 0 auto; gap: 3px; min-width: 58px; white-space: nowrap; }
.tile-palette-toolbar .tool-label { font-size: 10px; }
.tile-palette-grid { min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: minmax(62px, auto); align-content: start; gap: 6px; overflow: auto; padding: 6px; background-color: #202020; background-image: linear-gradient(45deg,#262626 25%,transparent 25%),linear-gradient(-45deg,#262626 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#262626 75%),linear-gradient(-45deg,transparent 75%,#262626 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.palette-item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: 38px auto; align-items: center; width: auto; min-width: 0; min-height: 62px; padding: 4px; border: 1px solid #4a4a4a; background: #333c; text-align: left; cursor: pointer; }
.palette-item:hover, .palette-item:focus-visible { border-color: #7eb5dd; background: #394a59; outline: none; }
.palette-item.active { border-color: #8bc7ef; box-shadow: inset 0 0 0 1px #8bc7ef; }
.palette-preview { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; background: #1b1b1b; }
.palette-water-preview { position: relative; overflow: hidden; background: linear-gradient(#43b9f4 0 16%, #258ed6 17%, #1264b7); }
.palette-water-preview::before { content: ''; position: absolute; inset: 4px -8px auto; height: 5px; background: repeating-linear-gradient(90deg, #d9f7ff 0 7px, transparent 7px 12px); animation: palette-water-flow .8s linear infinite; }
.palette-water-preview::after { content: ''; position: absolute; inset: 14px 0 0; background: repeating-linear-gradient(0deg, rgba(190,239,255,.24) 0 2px, transparent 2px 8px); }
@keyframes palette-water-flow { to { transform: translateX(12px); } }
.palette-item img { max-width: 48px; max-height: 48px; image-rendering: pixelated; }
.palette-item img.palette-frame-preview { max-width: none; max-height: none; transform: scale(2); }
.palette-tile-canvas { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.palette-tile-canvas.invalid { opacity: .35; background: repeating-linear-gradient(135deg,#542b2b 0 4px,#242424 4px 8px); }
.palette-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.palette-rule-badge { grid-column: 1 / -1; justify-self: start; padding: 1px 3px; border: 1px solid #4f92b5; color: #9dd8ff; font-size: 9px; line-height: 12px; }
.creation-tools { display: flex; align-items: center; gap: 3px; padding: 3px 6px; overflow-x: auto; border-top: 1px solid #111; }

#property-panel { overflow: hidden; }
#property-panel > :not(.panel-heading) { min-height: 0; overflow-y: auto; }
#map-settings, #layer-props, #camera-props, #props, #asset-editor, #multi-props { padding: 5px; }
.inspector-component { margin-bottom: 5px; border: 1px solid #161616; background: #292929; }
.inspector-component > summary { height: 24px; padding: 4px 6px; list-style-position: inside; background: #363636; font-weight: 600; user-select: none; }
.component-body { padding: 5px; }
.row { display: grid; grid-template-columns: minmax(82px, .9fr) minmax(70px, 1.1fr); align-items: center; gap: 5px; min-height: 26px; }
.row.sprite-none { display: block; min-height: 20px; color: var(--muted); font-style: italic; }
.row input:not([type="checkbox"]), .row select { width: 100%; min-width: 0; }
.row input[type="color"].inspector-color-input { height: 23px; padding: 2px; cursor: pointer; }
.row input[type="color"].inspector-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.row input[type="color"].inspector-color-input::-webkit-color-swatch { border: 1px solid #151515; }
.row .text-value { min-height: 58px; font-family: inherit; }
.empty { padding: 12px 5px; color: var(--muted); }
.wide { width: 100%; margin-top: 4px; }
.selection-summary { padding: 8px 4px; }
.custom-property-row { display: grid; grid-template-columns: minmax(60px, 1fr) minmax(72px, 1fr) minmax(72px, 1fr) auto; gap: 4px; margin-bottom: 4px; }
.custom-property-row.vector2 { grid-template-columns: minmax(60px, 1fr) minmax(72px, 1fr) minmax(50px, .5fr) minmax(50px, .5fr) auto; }
.custom-property-row input, .custom-property-row select { min-width: 0; width: 100%; }
.custom-property-row button { padding: 2px 6px; }
.region-point-row { display: grid; grid-template-columns: 16px minmax(48px, 1fr) minmax(48px, 1fr) auto; gap: 4px; align-items: center; margin-bottom: 4px; }
.region-point-row input { min-width: 0; width: 100%; }
.region-point-row button { padding: 2px 6px; }
.sorting-layer-row { display: grid; grid-template-columns: minmax(72px, 1fr) repeat(3, 24px); gap: 3px; margin-bottom: 3px; }
.sorting-layer-row input { min-width: 0; width: 100%; }
.sorting-layer-row button { min-width: 0; padding: 2px; }

.color-picker { position: fixed; z-index: 160; width: 290px; max-height: calc(100vh - 16px); overflow: auto; border: 1px solid #111; background: #363636; box-shadow: 0 12px 30px #000a; color: #ddd; }
.color-picker[hidden] { display: none; }
.color-picker-head { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; height: 34px; padding-left: 10px; border-bottom: 1px solid #171717; background: #eeeeee; color: #171717; }
.color-picker-head button { width: 30px; height: 30px; border: 0; border-radius: 0; background: #b44; color: #fff; font-size: 18px; }
.color-picker-preview-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 9px 10px 3px; }
.color-picker-preview-row button { min-height: 25px; padding: 2px 7px; }
.color-picker-preview { height: 23px; border: 1px solid #111; }
.color-picker-preview-row code { color: #ddd; font: 11px ui-monospace, monospace; }
.color-hue-ring { position: relative; width: 180px; height: 180px; margin: 10px auto 14px; border-radius: 50%; background: conic-gradient(from 90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); touch-action: none; }
.color-hue-ring::after { position: absolute; inset: 18px; border-radius: 50%; background: #363636; content: ""; }
.color-hue-knob { position: absolute; z-index: 3; top: calc(50% - 6px); left: calc(50% - 6px); width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; pointer-events: none; }
.color-sv-square { position: absolute; z-index: 2; inset: 37px; overflow: hidden; border: 1px solid #111; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--picker-hue, #f00)); touch-action: none; }
.color-sv-knob { position: absolute; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; transform: translate(-50%, -50%); pointer-events: none; }
.color-channel-grid { display: grid; gap: 5px; padding: 0 10px 9px; }
.color-channel-grid label { display: grid; grid-template-columns: 18px minmax(0, 1fr) 34px; align-items: center; gap: 5px; }
.color-channel-grid input[type="range"] { width: 100%; min-width: 0; height: 19px; padding: 0; accent-color: #5b9bc8; }
.color-channel-grid output { text-align: right; font: 10px ui-monospace, monospace; }
.color-channel-grid .color-hex-row { grid-template-columns: 74px minmax(0, 1fr); }
.color-channel-grid .color-hex-row input { text-transform: uppercase; font-family: ui-monospace, monospace; }
.color-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px 10px 10px; border-top: 1px solid #222; }
.color-swatches button { min-width: 0; height: 24px; padding: 0; border: 1px solid #111; background: var(--swatch); }
.color-swatches button[data-color="#FFFFFF"] { --swatch: #fff; }.color-swatches button[data-color="#CFCFCF"] { --swatch: #cfcfcf; }.color-swatches button[data-color="#303030"] { --swatch: #303030; }.color-swatches button[data-color="#111111"] { --swatch: #111; }
.color-swatches button[data-color="#EF476F"] { --swatch: #ef476f; }.color-swatches button[data-color="#FFD166"] { --swatch: #ffd166; }.color-swatches button[data-color="#06D6A0"] { --swatch: #06d6a0; }.color-swatches button[data-color="#118AB2"] { --swatch: #118ab2; }

#statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 7px; border-top: 1px solid #0b0b0b; background: #272727; color: #999; }
.context-menu { position: fixed; z-index: 100; min-width: 150px; padding: 4px; border: 1px solid #111; background: #333; box-shadow: 0 8px 20px #0009; }
.context-menu button { display: block; width: 100%; border: 0; text-align: left; background: transparent; }

.shell-icon-button { display: grid; place-items: center; min-width: 48px; min-height: 44px; padding: 0 13px; border: 0; background: #383838; color: #e8e8e8; line-height: 1; }
.shell-icon-button svg { width: 20px; height: 20px; fill: currentColor; }
.shell-icon-button:hover { background: var(--blue); color: #fff; }
.mobile-panel-toggle { display: none; }
.collab-document-name { min-width: 0; max-width: 180px; overflow: hidden; color: #d8e6ef; text-overflow: ellipsis; white-space: nowrap; }
.collab-status { flex: 0 1 auto; max-width: 220px; overflow: hidden; padding: 2px 6px; border: 1px solid #555; color: #bbb; font-size: 10px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.collab-status[data-state="connected"], .collab-status[data-state="synced"] { border-color: #28795d; color: #8ae0bc; }
.collab-status[data-state="saving"], .collab-status[data-state="syncing"], .collab-status[data-state="connecting"], .collab-status[data-state="reconnecting"] { border-color: #80691d; color: #f1d779; }
.collab-status[data-state="offline"], .collab-status[data-state="error"] { border-color: #8f3f49; color: #ff9aa6; }
.collab-users { display: flex; flex: 0 0 auto; align-items: center; min-width: 0; }
.collab-avatar { display: grid; place-items: center; width: 20px; height: 20px; overflow: hidden; margin-left: -4px; border: 2px solid var(--member-color, #777); border-radius: 50%; background: #30343a; color: #fff; font-size: 9px; font-weight: 700; }
.collab-avatar:first-child { margin-left: 0; }
.collab-avatar img { width: 100%; height: 100%; object-fit: cover; }
.collab-avatar svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
#scene-tree [role="treeitem"].remote-selected > .tree-row { box-shadow: inset 3px 0 var(--remote-selection-color, #ef476f); }
#scene-tree [role="treeitem"].remote-selected > .tree-row::after { margin-left: auto; color: var(--remote-selection-color, #ef476f); content: attr(data-remote-selector); font-size: 9px; }
.remote-cursors { position: absolute; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; }
.remote-cursor { position: absolute; color: var(--member-color, #ef476f); transform: translate(-2px, -2px); }
.remote-cursor i { display: block; width: 0; height: 0; border-top: 13px solid currentColor; border-right: 8px solid transparent; filter: drop-shadow(0 1px 1px #000); }
.remote-cursor .remote-cursor-avatar { width: 22px; height: 22px; margin: -2px 0 0 7px; border-width: 2px; background: #24272c; box-shadow: 0 2px 5px #000a; color: #fff; }
.editor-open-dialog { width: min(520px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 28px)); padding: 0; border: 1px solid #111; border-radius: 4px; background: #2b2b2b; color: #eee; box-shadow: 0 16px 50px #000a; }
.editor-open-dialog::backdrop { background: #0008; }
.editor-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid #111; }
.editor-dialog-head button { min-width: 28px; font-size: 17px; }
.editor-document-list { display: grid; gap: 4px; max-height: 520px; overflow: auto; padding: 8px; }
.editor-document-option { display: grid; gap: 3px; width: 100%; min-height: 52px; padding: 8px 10px; text-align: left; }
.editor-document-option span { color: #aaa; font-size: 10px; }
html[data-document-mode="online"] #collab-share { display: none; }

@media (max-width: 950px) {
  :root { --left-width: 190px; --right-width: 240px; }
  .unity-version, .workspace-title, .project-sidebar, .mode-toggle, #lbl-depth { display: none; }
  .collab-local-name { max-width: 64px; }
  .project-browser { grid-template-columns: minmax(0, 1fr); }
  .asset-item { grid-template-columns: 40px minmax(0, 1fr); }
  .asset-item img { width: 40px; height: 40px; }
}

@media (max-width: 900px) {
  :root { --left-width: min(82vw, 300px); --right-width: min(86vw, 320px); --bottom-height: 180px; }
  #app { grid-template-rows: var(--menu-height) auto minmax(0, 1fr) var(--status-height); }
  #menu-bar { overflow-x: auto; }
  #menu-bar .menu:nth-of-type(n+4), .unity-version { display: none; }
  #workspace-bar { min-height: 39px; overflow-x: auto; scrollbar-width: thin; }
  #workspace-bar > * { flex: 0 0 auto; }
  #workspace-bar .workplane-tabs, #workspace-title, #btn-save-as, #btn-export, #png-scale, #btn-clear, #workspace-bar > label { display: none; }
  .collab-document-name { max-width: 108px; }
  #main { position: relative; display: block; }
  #viewport-shell { position: absolute; inset: 0; display: grid; grid-template-rows: 27px 34px 0 minmax(140px, 1fr) var(--splitter) var(--bottom-height); }
  #left-dock, #inspector-dock { position: absolute; z-index: 30; top: 0; bottom: 0; width: var(--left-width); box-shadow: 12px 0 30px #0009; }
  #left-dock { left: 0; transform: translateX(calc(-100% + 20px)); transition: transform .18s ease; }
  #inspector-dock { right: 0; width: var(--right-width); transform: translateX(calc(100% - 20px)); transition: transform .18s ease; box-shadow: -12px 0 30px #0009; }
  #left-dock:focus-within, #left-dock:hover { transform: translateX(0); }
  #inspector-dock:focus-within, #inspector-dock:hover { transform: translateX(0); }
  body.mobile-hierarchy-open #left-dock { transform: translateX(0); }
  body.mobile-inspector-open #inspector-dock { transform: translateX(0); }
  .mobile-panel-toggle { display: inline-grid; place-items: center; width: 28px; padding: 0; font-size: 15px; }
  .mobile-panel-toggle[aria-pressed="true"] { border-color: #6faed4; background: #315e7e; color: #fff; }
  #split-left, #split-right { display: none; }
  #scene-toolbar { overflow-x: auto; }
  #scene-toolbar .compact-field, #btn-fit-objects, #btn-align-grid, .mode-toggle { display: none; }
  .bottom-panel { min-height: 150px; }
  .project-browser { grid-template-columns: minmax(0, 1fr); }
  .collab-users { padding-inline: 3px; }
}
@media (max-width: 560px) {
  .collab-archive-popup { position: fixed; top: var(--menu-height); left: 4px; right: 4px; width: auto; }
  .collab-archive-row { grid-template-columns: 1fr; }
  .collab-archive-actions { flex-wrap: wrap; }
  .collab-presence-label { display: none; }
  .collab-presence { gap: 3px; padding-inline: 4px; }
  .collab-local-name { max-width: 48px; }
}

@container (max-width: 820px) {
  #btn-align-grid, #btn-fit-map, #btn-fit-objects, #workplane-rebind:disabled, #workplane-delete:disabled { display: none; }
  .transform-tools kbd { display: none; }
}