html, body { width: 100%; height: 100%; margin: 0; }
body { font: 14px/1.6 system-ui, sans-serif; background: #edf0ed; color: #202520; }
#editor-viewport { position: absolute; inset: 128px 12px 12px; display: flex; align-items: center; justify-content: center; }
#design-scale-wrapper { position: relative; flex: none; width: 0; height: 0; overflow: hidden; }
#map { position: absolute; top: 0; left: 0; width: 1000px; height: 1000px; transform-origin: top left; overflow: hidden; outline: 1px solid #a5afa5; }
#debug {
  position: absolute; top: 128px; left: 12px; z-index: 2;
  padding: 8px 12px; background: rgba(255,255,255,.92);
  font: 12px/1.7 ui-monospace, monospace; pointer-events: none;
}
#status {
  position: absolute; z-index: 3; top: 218px; left: 12px; right: 12px;
  width: fit-content; max-width: min(520px, calc(100% - 48px));
  margin: 0; padding: 12px 16px; background: #fff; border: 1px solid #bbc4bb;
  overflow-wrap: anywhere;
}
#status[data-kind="error"] { border-color: #b94b38; color: #8c2e20; }
[hidden] { display: none !important; }
noscript { position: absolute; padding: 20px; background: white; }
#search { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 116px; padding: 12px; box-sizing: border-box; background: white; }
#search form, #search p, #search ul { max-width: 640px; margin: 0 auto; }
#search fieldset { display: flex; gap: 8px; border: 0; margin: 0; padding: 0; }
#search input { min-width: 0; flex: 1; padding: 10px; font: inherit; border: 1px solid #a5afa5; border-radius: 4px; }
#search button { font: inherit; cursor: pointer; border: 1px solid #a5afa5; border-radius: 4px; background: #f2f5f2; padding: 8px 16px; }
#search button:disabled { cursor: wait; }
#search p { font-size: 12px; line-height: 20px; }
#search-hint { color: #647064; }
#search [data-kind="error"] { color: #8c2e20; }
#search ul { padding: 0; list-style: none; max-height: min(50vh, 380px); overflow: auto; background: white; border: 1px solid #a5afa5; box-shadow: 0 4px 10px #0002; }
#search li button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #ddd; border-radius: 0; background: white; }
#search li button:hover, #search li button:focus-visible { background: #edf3ed; }
#search li span { display: block; font-size: 12px; color: #566256; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#marker-tools { position: absolute; right: 12px; top: 128px; z-index: 3; max-width: min(308px, calc(100vw - 24px)); text-align: right; }
#marker-tools button { min-width: 44px; min-height: 44px; border: 1px solid #929d92; border-radius: 4px; background: white; color: inherit; font: inherit; cursor: pointer; }
#marker-tools button:disabled { opacity: .5; }
#marker-tools p { margin: 4px 0; background: #fffd; font-size: 12px; }
#icon-panel { width: 288px; max-width: calc(100vw - 36px); max-height: min(45vh, 360px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; margin-top: 6px; background: white; }
.icon-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.icon-more { width: 100%; margin-top: 6px; }
#icon-panel img { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; }
.task-marker { box-sizing: border-box; border: 0; padding: 0; background: transparent; cursor: grab; touch-action: none; user-select: none; }
.task-marker img { width: 100%; height: 100%; pointer-events: none; display: block; object-fit: contain; }
.task-marker.is-selected { outline: 2px solid #172e5c; outline-offset: -2px; background: #ffffffbb; }
.task-marker:active { cursor: grabbing; }
.placing-marker .mapboxgl-canvas-container { cursor: crosshair; }
#marker-debug { position: absolute; left: 12px; bottom: 32px; z-index: 2; background: #fffffff0; max-width: calc(100% - 24px); font: 11px/1.5 ui-monospace, monospace; }
#marker-debug summary { padding: 6px 10px; cursor: pointer; }
#marker-records { margin: 0; padding: 0 10px 8px; max-height: 22vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

#marker-debug { max-height: 35vh; overflow: auto; }
#design-debug { padding: 0 10px 8px; }
#design-debug p { margin: 4px 0; }
#design-data { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22vh; overflow: auto; }

#text-layer { position: absolute; inset: 116px 0 0; z-index: 1; pointer-events: none; overflow: hidden; }
.poster-text { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; user-select: none; cursor: grab; border: 0; padding: 0; background: transparent; color: #202520; font-family: system-ui, sans-serif; line-height: 1.2; white-space: pre; min-width: 12px; min-height: 24px; }
.poster-text.is-selected { outline: 1px dashed #172e5c; }
#text-tools { margin-top: 6px; }
#text-tools [data-text-options] { padding: 6px; background: white; }
#text-tools label { display: block; }
#text-tools input { width: 150px; max-width: 50vw; font: inherit; }

/* 重叠的同尺寸文本层：外描边在下，填充在上，均不接收独立指针事件。 */
.poster-text { display: inline-grid; }
.poster-text > span { grid-area: 1 / 1; pointer-events: none; white-space: pre; }
#text-tools [data-text-options] { max-height: 55vh; overflow-y: auto; }
#text-tools textarea { width: 150px; max-width: 50vw; font: inherit; vertical-align: top; }
#text-tools .stroke-row { display: flex; align-items: center; gap: 4px; }
#text-tools .stroke-row input { width: 52px; min-width: 0; }

.curved-line-box { position: relative; display: block; }
.curved-character { position: absolute; display: block; letter-spacing: 0; text-align: left; pointer-events: auto; transform-origin: center center; }

/* 地图是独立的底层层叠上下文；两个中间容器不创建各自的层叠上下文。 */
#map { isolation: isolate; z-index: 0; }
#map .mapboxgl-canvas-container { z-index: auto; }
#map #text-layer { inset: 0; z-index: auto; overflow: visible; }
#map .mapboxgl-control-container > div { z-index: 2147483647; }

/* 仅 Marker 已按下到释放期间，避免上层文字抢走 SDK 的 move/up 事件。 */
#map.marker-pointer-active .poster-text,
#map.marker-pointer-active .curved-character { pointer-events: none; }

/* 编辑轻水印与选中框均为纯 UI；不参与用户元素排序、命中或作品数据。 */
.editor-watermark, .editor-selection-overlay {
  position: absolute; inset: 0; pointer-events: none; user-select: none;
}
.editor-watermark {
  z-index: 2147483645; display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr); place-items: center; overflow: hidden;
}
.editor-watermark span {
  transform: rotate(-28deg); font: 600 25px/1.2 system-ui, sans-serif;
  letter-spacing: 5px; color: rgba(255,255,255,.36);
  -webkit-text-stroke: .6px rgba(0,0,0,.22);
  pointer-events: none;
}
.editor-selection-overlay { z-index: 2147483646; }
.editor-selection-overlay * { pointer-events: none; }

/* E1-1 Shell：只分配显示空间，作品内部仍固定1000×1000。 */
html, body { overflow: hidden; overscroll-behavior: none; }
#editor-shell, #search input, #editor-dock, .dock-panel { box-sizing: border-box; }
#editor-shell {
  --shell-offset: 0px; --shell-poster: 0px; --shell-gap: 2px; --shell-note: 16px; --shell-toolbar: 48px; --shell-dock: 138px;
  position: relative; height: 100vh; height: 100dvh; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(44px + var(--shell-active-offset, var(--shell-offset))) 44px var(--shell-poster) var(--shell-note) var(--shell-operation, var(--shell-dock)) var(--shell-status, 20px);
  align-content: start;
  gap: var(--shell-gap); padding: calc(4px + env(safe-area-inset-top)) 12px calc(4px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.brand-row { grid-row: 1; align-self: start; height: 44px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.brand-row strong { font-size: 17px; white-space: nowrap; }
.capsule-safe-space { margin-left: auto; flex: 0 0 104px; height: 32px; }
#editor-shell button { min-height: 44px; font: inherit; color: inherit; cursor: pointer; }
#editor-back { width: 44px; border: 0; background: none; font-size: 30px !important; }
#search { display: contents; }
#search form { grid-row: 2; width: 100%; max-width: none; margin: 0; }
#search fieldset { height: 44px; min-width: 0; align-items: center; }
#search input { height: 36px; padding: 4px 10px; font-size: 16px; }
#search button { min-height: 44px; padding: 4px 12px; }
#search [data-message] { grid-row: 6; grid-column: 1; min-width: 0; margin: 0; font-size: 12px; line-height: 20px; overflow: auto; background: #edf0ed; }
#search [data-results] { box-sizing: border-box; grid-row: 5; grid-column: 1; z-index: 5; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; overscroll-behavior: contain; box-shadow: none; }
#editor-viewport { grid-row: 3; position: relative; inset: auto; min-width: 0; min-height: 0; overflow: hidden; }
.watermark-note { grid-row: 4; margin: 0; align-self: center; text-align: center; font-size: 12px; line-height: 16px; color: #647064; }
.watermark-note strong { font-weight: 500; color: #394839; }
#editor-dock { grid-row: 5; grid-column: 1; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#main-actions { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--shell-gap); }
.main-toolbar { display: grid; grid-template-columns: repeat(4, 1fr); height: var(--shell-toolbar); flex: none; }
.main-toolbar button { border: 0; background: transparent; }
button:disabled { opacity: .45; cursor: default !important; }
#editor-finish { flex: none; width: 100%; height: 44px; border: 0; border-radius: 6px; background: #263c30; color: white !important; }
#marker-tools, #text-tools { display: contents; }
.legacy-entry { display: none; }
#icon-panel, #text-tools [data-text-options], #marker-tools [data-marker-options], .dock-panel {
  box-sizing: border-box; position: absolute; inset: 0; z-index: 2; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 6px; overflow: auto; overscroll-behavior: contain; background: #fff; text-align: left;
}
#editor-dock[data-panel-open="true"] #main-actions { visibility: hidden; pointer-events: none; }
#marker-tools [data-marker-message] { position: absolute; bottom: 0; left: 0; right: 70px; margin: 0; line-height: 22px; }
#marker-tools [data-cancel] { position: absolute; bottom: 0; right: 0; }
#text-tools label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0; }
#text-tools input, #text-tools textarea, #text-tools select { min-height: 36px; max-width: 65%; }
#text-tools textarea { width: 65%; }
.dock-panel button { border: 1px solid #929d92; border-radius: 4px; background: white; }
#dev-tools { display: none !important; }
#status { position: fixed; top: auto; bottom: calc(28px + env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 6; width: auto; max-width: none; max-height: 140px; overflow: auto; }

/* E1-2A: old controls remain wired for later adapters, never visible in formal UI. */
#legacy-text-controls { display: none !important; }
#text-edit-mode { padding: 0; }
.text-mode-toolbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.text-mode-toolbar button { padding: 0; min-width: 0; min-height: 44px; border: 0; background: transparent; }
#text-selection-delete {
  position: absolute; z-index: 1; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: radial-gradient(circle, #263c30 0 12px, transparent 13px); color: #fff;
  display: grid; place-items: center;
  font: 22px/44px system-ui, sans-serif; text-shadow: 0 1px 3px #000;
  touch-action: manipulation;
}

/* E1-2B: all views occupy the existing dock; none contribute to shell sizing. */
.text-content-field { display: block; padding: 2px 8px; font-size: 12px; }
.text-content-field textarea { box-sizing: border-box; display: block; width: 100%; height: 48px; resize: none; font: 16px/1.3 system-ui, sans-serif; }
.text-panel-header { display: flex; align-items: center; gap: 8px; }
.text-panel-header strong { flex: 1; text-align: center; }
.text-panel-header button { border: 0; background: transparent; min-width: 44px; }
.font-options { display: flex; gap: 8px; padding: 6px; overflow-x: auto; overscroll-behavior: contain; }
.font-options button { flex: 0 0 auto; padding: 6px 12px; font-size: 24px !important; }
.font-options button[aria-pressed="true"] { outline: 2px solid #263c30; outline-offset: -2px; }
.text-size-controls { display: flex; align-items: center; gap: 6px; padding: 8px; }
.text-size-controls input[type="range"] { flex: 1; min-width: 0; min-height: 44px; }
.text-size-controls input[type="number"] { width: 68px; min-height: 44px; box-sizing: border-box; font-size: 16px; }

.color-options { display: flex; gap: 4px; padding: 6px; overflow-x: auto; overscroll-behavior: contain; }
.color-options button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.color-swatch::before { content: ''; display: block; width: 28px; height: 28px; margin: auto; border-radius: 50%; background: var(--swatch-color); box-shadow: 0 0 0 1px #888; }
.color-swatch[aria-pressed="true"] { outline: 2px solid #263c30; outline-offset: -2px; border-radius: 6px; }
.custom-color { display: flex; align-items: center; gap: 12px; padding: 8px; }
.custom-color input { box-sizing: border-box; min-height: 44px; font-size: 16px; }
.custom-color input[type="color"] { width: 52px; flex: none; }
.custom-color input[type="text"] { width: 112px; }
.custom-color input[aria-invalid="true"] { outline: 1px solid #b94b38; }

.stroke-counts { display: flex; gap: 4px; padding: 4px; }
.stroke-counts button { flex: 1; min-width: 0; padding: 0 4px; }
.stroke-counts button[data-existing="true"] { background: #dfe9e1; border-bottom: 3px solid #657e6c; }
.stroke-counts button[aria-pressed="true"] { outline: 2px solid #263c30; outline-offset: -2px; }
.stroke-edit-row { display: flex; align-items: center; gap: 4px; padding: 4px; }
.stroke-edit-row .color-swatch { flex: 0 0 44px; padding: 0; border: 0; background: transparent; }
.stroke-edit-row input[type="range"] { flex: 1; min-width: 0; min-height: 44px; }
.stroke-edit-row input[type="number"] { box-sizing: border-box; width: 60px; min-height: 44px; font-size: 16px; }

.stroke-section-label { display: block; padding: 2px 4px; font-size: 12px; }

/* Expand only the bottom track; preserve brand/search/poster/note geometry.
   The following status track still reserves 20px inside the safe content box. */
#editor-shell:has(#editor-dock[data-panel-open="true"]) {
  --shell-operation: var(--shell-panel-dock, var(--shell-dock));
}

/* More keeps the existing dock budget and scroll fallback; no shell sizing input. */
.text-more-row { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; }
.text-more-row > span { flex: none; font-size: 12px; }
.text-more-row input { box-sizing: border-box; min-height: 44px; margin: 0; }
.text-more-row input[type="range"] { flex: 1; min-width: 0; }
.text-more-row input[type="number"] { width: 64px; font-size: 16px; }
.text-more-row button { min-width: 44px; padding: 0 4px; }
.text-more-row button[aria-pressed="true"] { outline: 2px solid #263c30; outline-offset: -2px; }

/* More first uses the empty status reserve, then only necessary centering space. */
#editor-shell:has(#text-edit-mode:not([hidden]) [data-more-controls]:not([hidden])):has(#search [data-message]:empty) {
  --shell-operation: var(--shell-more-dock);
  --shell-active-offset: var(--shell-more-offset);
  --shell-status: 0px;
}
#text-edit-mode:has([data-more-controls]:not([hidden])) [data-text-subpanel],
#text-edit-mode:has([data-more-controls]:not([hidden])) .text-panel-header,
[data-more-controls], .text-more-row {
  box-sizing: border-box; margin: 0; border: 0;
}
#text-edit-mode:has([data-more-controls]:not([hidden])) .text-panel-header {
  height: 44px; padding: 0;
}
.text-more-row { height: 44px; }
.text-more-row input, .text-more-row button { box-sizing: border-box; height: 44px; margin: 0; }

/* E1-3: icon grid owns its scroll region, independent from the artwork. */
#icon-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
#icon-panel > header { flex: 0 0 44px; }
[data-icon-scroll] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.icon-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; padding: 4px; }
.icon-grid button { padding: 0; min-height: 44px; }
.icon-grid img { object-fit: contain; }
.marker-toolbar { display: grid; grid-template-columns: 1fr 1fr 44px; }
#marker-selection-delete { position: absolute; z-index: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 0; color: white !important; touch-action: manipulation; }
.icon-grid button:active { background: #dfe9e1; }

#marker-selection-delete::after { content: "×"; position: absolute; left: var(--marker-delete-visual-left, 22px); top: var(--marker-delete-visual-top, 24px); width: 20px; height: 20px; border-radius: 50%; background: #263c30; color: white; font-size: 18px; line-height: 20px; text-align: center; pointer-events: none; }

/* Layer list occupies only the existing dock; artwork tracks are unchanged. */
#shell-layer-panel { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#shell-layer-panel > header { flex: 0 0 44px; }
#layer-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.layer-row { display: flex; min-height: 48px; align-items: center; }
.layer-handle { flex: 0 0 44px; touch-action: none; border: 0 !important; }
.layer-choose { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0 !important; text-align: left; }
.layer-preview { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; text-align: center; }
.layer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-choose[aria-pressed="true"] { background: #dfe9e1; }
.layer-row.is-sorting { opacity: .6; }
.layer-row.is-drop-target { box-shadow: inset 0 -2px #263c30; }

/* E2-1 reuses the same fixed artwork; only the surrounding runtime layout changes. */
#editor-shell[data-preview="true"] { display: block; height: auto; min-height: 0; max-height: 100vh; max-height: 100dvh; box-sizing: border-box; overflow-y: auto; overscroll-behavior-y: none; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
#editor-shell[data-preview="true"] #search,
#editor-shell[data-preview="true"] #editor-dock,
#editor-shell[data-preview="true"] .watermark-note,
#editor-shell[data-preview="true"] #debug,
#editor-shell[data-preview="true"] #marker-debug { display: none !important; }
#editor-shell[data-preview="true"] #editor-viewport { width: 100%; height: auto; aspect-ratio: 1 / 1; margin-top: 8px; }
#editor-shell[data-preview="true"] #marker-selection-delete,
#editor-shell[data-preview="true"] #text-selection-delete { display: none !important; }
#preview-interaction-shield { position: absolute; inset: 0; z-index: 10; touch-action: pan-y pinch-zoom; }
#work-preview { padding: 12px 4px 8px; text-align: center; color: #263c30; }
#work-preview h1 { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 8px 0 12px; }
#work-preview p { font-size: 14px; line-height: 1.7; margin: 8px 0; }
#work-preview .preview-status { font-size: 12px; font-weight: 400; color: #647064; margin: 0; }
#work-preview p strong { font-weight: 500; }
#work-preview h2 { font-size: 15px; font-weight: 500; margin: 12px 0 10px; }
#work-preview .preview-version { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; margin: 10px 0; padding: 10px 16px; border: 1px solid #ccd6cf; border-radius: 8px; background: #f7f9f7; text-align: left; }
#work-preview .preview-physical { background: #e9efe9; }
.preview-version strong { font-size: 17px; }
.preview-version span { font-size: 14px; }
#preview-continue { display: none; margin-left: auto; min-width: 44px; border: 0; background: transparent; padding: 0 8px; }
#editor-shell[data-preview="true"] #preview-continue { display: block; }
#editor-shell[data-preview="true"] .capsule-safe-space { display: none; }