body.phase2-workspace { background: var(--ws-app); color: var(--ws-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", system-ui, sans-serif; }
.workspace-bootstrap-error { position: fixed; z-index: var(--ds-layer-toast); top: 0; left: 0; right: 0; padding: 8px 12px; border-bottom: 1px solid var(--ds-color-danger); background: var(--ds-color-surface); color: var(--ds-color-danger); font: 13px/1.5 var(--ds-font-ui); text-align: center; }
.workspace-entry-status { position: fixed; z-index: var(--ds-layer-modal); inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ds-color-overlay); color: var(--ws-text); font: 650 14px/1.4 var(--ws-font); backdrop-filter: blur(3px); }
.workspace-entry-status.is-failed { flex-direction: column; color: var(--ds-color-danger); }
.workspace-entry-status button { min-height: 34px; padding: 0 14px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-surface); cursor: pointer; }
.workspace-entry-spinner { width: 18px; height: 18px; border: 2px solid var(--ws-border); border-top-color: var(--ws-accent); border-radius: 50%; animation: ws-entry-spin .7s linear infinite; }
@keyframes ws-entry-spin { to { transform: rotate(1turn); } }
body.phase2-workspace > .app-shell { height: 100dvh; min-height: 0; overflow: hidden; }
body.phase2-workspace > .app-shell > .topbar,
body.phase2-workspace > .app-shell > .site-footer { display: none !important; }
body.phase2-workspace .workspace-wrap { position: relative; flex: none !important; max-width: none !important; width: 100%; height: 100dvh !important; min-height: 0; margin: 0; padding: 0 !important; display: grid !important; grid-template-rows: var(--ws-toolbar-height) auto minmax(0,1fr) var(--ws-viewbar-height) !important; overflow: hidden; background: var(--ws-app); }
body.phase2-workspace .workspace-grid[data-workspace-ready="true"] { max-width: none !important; width: 100%; min-height: 0; height: 100%; margin: 0; padding: 0 !important; display: grid !important; grid-template-columns: var(--ws-rail-width) minmax(0,1fr) var(--ws-inspector-width) !important; gap: 0 !important; overflow: hidden; }
.ws-topbar { display: flex; align-items: center; gap: var(--ws-space-3); min-width: 0; height: var(--ws-toolbar-height); padding: 0 var(--ws-space-4); border-bottom: 1px solid var(--ws-border); background: var(--ws-surface); }
.ws-engine-label { display: flex; align-items: center; gap: 6px; color: var(--ws-text-secondary); font-size: 13px; white-space: nowrap; }
.ws-engine-label select { height: 34px; padding: 0 9px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface); color: var(--ws-text); font: inherit; }
.ws-brand { display: flex; align-items: center; gap: 9px; min-width: 200px; font-size: 13px; font-weight: 680; white-space: nowrap; }
.ws-name { min-width: 100px; max-width: 270px; flex: 1; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-text); font-size: 13px; font-weight: 600; }
.ws-name:hover,.ws-name:focus { border-color: var(--ws-border); background: var(--ws-surface-soft); outline: none; }
.ws-status { margin-left: auto; color: var(--ws-text-tertiary); font-size: 13px; white-space: nowrap; }
.ws-membership-status { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--ws-border); border-radius: 999px; background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 13px; white-space: nowrap; }
.ws-export-drawer { width: min(430px, 94vw); overflow-y: auto; }
.ws-export-drawer .ws-field { display: grid; gap: 6px; }
.ws-export-drawer input[type="text"], .ws-export-drawer input:not([type]), .ws-export-drawer select { min-height: 34px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-surface); color: var(--ws-text); padding: 0 9px; }
.ws-export-drawer .ws-export-options { display: grid; gap: 8px; }
.ws-export-drawer .ws-export-options label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ws-text-secondary); font-size: 13px; }
.ws-export-drawer .ws-export-options small, .ws-export-drawer #ws-board-summary { color: var(--ws-text-tertiary); font-size: 13px; line-height: 1.45; }
#ws-poster-preview { display:block; width:min(100%,300px); height:auto; margin:8px auto; border:1px solid var(--ws-border); background:var(--ds-color-surface-soft); }
#ws-poster-solid-controls { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#preview-modal:not(.show):not([open]), #preview-modal[aria-hidden="true"] { pointer-events:none !important; }
.phase2-workspace .ws-old-preview { display:none !important; pointer-events:none !important; }
.ws-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface); color: var(--ws-text); font-size: 13px; font-weight: 620; white-space: nowrap; cursor: pointer; }
.ws-button:hover:not(:disabled) { border-color: var(--ws-border-strong); background: var(--ws-surface-soft); }
.ws-button:active:not(:disabled),.ws-rail-button:active { transform: scale(.98); }
.ws-button:disabled { opacity: .45; cursor: default; }
.ws-button-primary { border-color: var(--ws-accent); background: var(--ws-accent); color: var(--ds-color-on-accent); }
.ws-button-primary:hover:not(:disabled) { border-color: var(--ws-accent-hover); background: var(--ws-accent-hover); }
.ws-button-danger { border-color: var(--ws-danger); background: var(--ws-danger); color: var(--ds-color-on-accent); }
.ws-button-danger:hover:not(:disabled) { border-color: var(--ds-color-danger-hover); background: var(--ds-color-danger-hover); }
.ws-wide { width: 100%; }
.ws-rail { min-width: 0; padding: 10px 6px; display: flex; flex-direction: column; gap: 4px; overflow: auto; border-right: 1px solid var(--ws-border); background: var(--ws-surface-soft); }
.ws-rail-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 58px; padding: 5px 0; border: 1px solid transparent; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-text-secondary); cursor: pointer; }
.ws-rail-button span { font-size: 19px; line-height: 1.2; }.ws-rail-button small { font-size: 13px; font-weight: 600; }
.ws-rail-button:hover { background: color-mix(in srgb, var(--ws-text) 8%, transparent); }.ws-rail-button.active { border-color: var(--ws-accent); background: var(--ws-accent-soft); color: var(--ws-accent); }
.ws-center { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--ws-canvas); }
.ws-center > .ws-old-preview { display: none !important; }
.ws-import,.ws-canvas-area { position: absolute; inset: 0; min-width: 0; min-height: 0; }
.ws-import[hidden],.ws-canvas-area[hidden] { display: none !important; }
.ws-import { display: grid; place-items: center; padding: 24px; background: var(--ws-canvas); }
.ws-import-inner { width: min(720px,100%); text-align: center; }.ws-eyebrow { margin: 0 0 8px; color: var(--ws-accent); font-size: 13px; font-weight: 750; letter-spacing: .15em; }
.ws-import h1 { margin: 0 0 8px; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }.ws-import p { margin: 0 0 20px; color: var(--ws-text-secondary); font-size: 13px; }.ws-import-inner > span { display: block; margin-top: 12px; color: var(--ws-text-tertiary); font-size: 13px; }
.ws-import .ws-drop-slot > #upload-zone { width: 100%; min-height: 230px; max-height: 290px; margin: 0; border: 1.5px dashed var(--ws-border-strong); border-radius: var(--ws-radius-md); background: var(--ws-surface); box-shadow: none; }
.ws-import .ws-drop-slot > #upload-zone:hover,.ws-import .ws-drop-slot > #upload-zone.drag-over { border-color: var(--ws-accent); background: var(--ws-accent-soft); }
.ws-start-options { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.ws-blank-start { min-height: 230px; padding: 28px 20px; border: 1.5px solid var(--ws-border-strong); border-radius: var(--ws-radius-md); background: var(--ws-surface); color: var(--ws-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ws-blank-start:hover { border-color: var(--ws-accent); background: var(--ws-accent-soft); }
.ws-blank-start strong { font-size: 16px; }.ws-blank-start span { color: var(--ws-text-secondary); font-size: 13px; }
.ws-blank-start label,.ws-blank-custom { display: flex; align-items: center; gap: 7px; color: var(--ws-text-secondary); font-size: 13px; }.ws-blank-start select,.ws-blank-start input { min-height: 32px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); }.ws-blank-start input { width: 70px; padding-inline: 8px; }.ws-blank-start > button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 7px; background: var(--ws-accent); color: var(--ds-color-on-accent); font-weight: 700; cursor: pointer; }
@media (max-width: 720px) { .ws-start-options { grid-template-columns: 1fr; }.ws-import { overflow: auto; align-items: start; }.ws-import-inner { padding-block: 24px; }.ws-import .ws-drop-slot > #upload-zone,.ws-blank-start { min-height: 160px; } }
/* 画布区是 4 行：画布 / 用量汇总 / 背景预检条 / 操作提示。
   预检条（B2 §6）是第 3 行 —— 只在开关打开时才有内容，所以用 `auto` 而不是固定值：
   隐藏时 `display:none` 让它整行塌掉，布局与「没有这一行」完全一致。
   最后三行都必须是 `auto`：只要有一行是固定值，多出来的那个 child 就会掉进隐式行，
   把固定值那行抢过去，剩下的一行被压扁（提示行 26px → 17px，文字溢到工具坞下面）。 */
.ws-canvas-area { display: grid; grid-template-rows: minmax(0,1fr) auto auto auto; }
/* 图纸正下方的用量汇总。放在画布与操作提示之间，是画布区的第二行，
   所以「滚轮缩放」那行提示不会被挤掉，也不会盖到画布。
   词间距由标记里的字面空格提供（不另设 gap），这样复制出来的文本就是完整一句。 */
.ws-canvas-stats { display: flex; align-items: baseline; justify-content: center; padding: 7px 12px; border-top: 1px solid var(--ws-border); background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 13px; }
.ws-canvas-stats strong { color: var(--ws-text); font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ws-canvas-stats i { color: var(--ws-text-tertiary); font-style: normal; }
.ws-canvas-stats.is-empty strong { color: var(--ws-text-tertiary); }
.ws-canvas-well { min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; background-color: var(--ws-canvas); background-image: none; background-size: 24px 24px; }
.ws-canvas-well.is-panning { cursor: grabbing; }.ws-canvas-well img { max-width: none; max-height: none; width: auto; height: auto; object-fit: contain; transform-origin: center; user-select: none; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 1px 2px #11111114); }
.ws-canvas-layers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ws-navigator { position: absolute; z-index: 4; right: 14px; bottom: 14px; width: max-content; padding: 2px; border: 1px solid var(--ws-border); border-radius: 5px; background: color-mix(in srgb, var(--ws-surface) 92%, transparent); box-shadow: 0 5px 18px #1111111f; backdrop-filter: blur(8px); cursor: crosshair; }
.ws-navigator[hidden] { display: none; }
.ws-navigator-title { margin: 0 2px 5px; color: var(--ws-text-secondary); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.ws-navigator canvas { display: block; width: 176px; height: 116px; border-radius: 4px; touch-action: none; image-rendering: pixelated; }
.ws-layer { position: absolute; inset: 0; pointer-events: none; }
.ws-birth-toggle { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ws-topbar .ws-birth-toggle { margin-left: auto; font-size: 12px; color: var(--ws-text-secondary); }
.gallery-card .artwork-birth-motion { border-radius: inherit; }
.ws-source-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }.ws-source-canvas[hidden] { display: none; }
.ws-source-preprocess-controls { padding-bottom: 8px; border-bottom: 1px solid var(--ws-border); }
.ws-source-preprocess-controls .ws-source-buttons { gap: 6px; }
.ws-source-preprocess-controls .ws-source-buttons button { white-space: nowrap; min-height: 34px; }
.ws-source-crop-handles { position: absolute; inset: 0; pointer-events: none; }
.ws-source-crop-handles[hidden] { display: none; }
.ws-source-crop-handles > span { position: absolute; width: 24px; height: 24px; transform: translate(-50%,-50%); }
.ws-source-preview { display: block; width: 100%; max-height: 160px; object-fit: contain; border: 1px solid var(--ws-border); border-radius: 7px; background: var(--ws-canvas); }
.ws-source-buttons { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }.ws-source-buttons button { min-height: 29px; padding: 3px 9px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); font-size: 13px; cursor: pointer; }.ws-source-buttons button.ws-button-primary { background: var(--ws-accent); color: var(--ds-color-on-accent); border-color: var(--ws-accent); }
.ws-source-slider { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 7px 0; color: var(--ws-text-secondary); font-size: 13px; }.ws-source-slider input { grid-column: 1/-1; width: 100%; accent-color: var(--ws-accent); }
.ws-source-sample { color: var(--ws-text-secondary); font-size: 13px; }.ws-source-sample > div { display: flex; flex-wrap: wrap; gap: 4px; }.ws-source-sample button { display: flex; align-items: center; gap: 4px; min-height: 27px; border: 1px solid var(--ws-border); border-radius: 5px; background: var(--ws-surface); color: var(--ws-text); cursor: pointer; font-size: 13px; }
.ws-expand-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }.ws-expand-grid label { display: flex; align-items: center; gap: 5px; font-size: 13px; }.ws-expand-grid input { min-width: 0; width: 100%; height: 27px; border: 1px solid var(--ws-border); border-radius: 5px; }
.ws-grid-toolbar-host { position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%); width: min(690px, calc(100% - 32px)); overflow: visible; }
.ws-cell-details { min-height: 66px; padding: 10px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-surface-soft); font-size: 13px; }
.ws-cell-details strong { font-size: 17px; }.ws-cell-details p { margin: 4px 0; }
.ws-current-color-summary { min-height: 42px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-surface-soft); color: var(--ws-text-secondary); font-size: 13px; }
.ws-current-color-summary strong { color: var(--ws-text); font-size: 14px; }.ws-current-color-summary b { margin-left: auto; color: var(--ws-text); font-variant-numeric: tabular-nums; }
.ws-current-color-swatch { width: 22px; height: 22px; flex: 0 0 auto; border: 1px solid #11111135; border-radius: 4px; }
.ws-palette-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 10px; }
.ws-palette-suggestions button { display: grid; justify-items: center; gap: 2px; min-width: 38px; padding: 5px; border: 1px solid var(--ws-border); border-radius: 10px; background: var(--ws-surface); color: var(--ws-text-secondary); cursor: pointer; }
.ws-palette-suggestions button span { width: 24px; height: 18px; border: 1px solid #11111135; border-radius: 4px; }
.ws-palette-diagnostic-list { display: grid; gap: 4px; max-height: 180px; overflow: auto; margin: 7px 0 10px; }
.ws-palette-diagnostic-list button { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; min-height: 30px; padding: 4px 7px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); text-align: left; cursor: pointer; }
.ws-palette-diagnostic-list button span { width: 18px; height: 18px; border: 1px solid #11111135; border-radius: 3px; }.ws-palette-diagnostic-list button small { color: var(--ws-text-secondary); }
.ws-inspection { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--ws-border); border-radius: 8px; background: color-mix(in srgb, var(--ws-surface) 92%, var(--ws-accent) 8%); }
.ws-inspection-head, .ws-inspection-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.ws-inspection button { min-height: 28px; padding: 4px 8px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); cursor: pointer; }
.ws-inspection button:disabled { opacity: .45; cursor: default; }
.ws-inspection-row span { min-width: 46px; color: var(--ws-text-secondary); font-size: 13px; text-align: center; }
.ws-diagnostic-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0 9px; }
.ws-diagnostic-counts button { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 5px 7px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); cursor: pointer; }
.ws-diagnostic-counts button.active { border-color: var(--ws-accent); box-shadow: inset 0 0 0 1px var(--ws-accent); }
.ws-diagnostic-counts b { color: var(--ws-accent); }
.ws-repair-card, .ws-repair-queue { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ds-color-surface); }
/* 同心圆角：队列内层按钮 8px + 间距 10px（padding 9 + border 1）。repair-card 不含同构内层，保持 8px。 */
.ws-repair-queue { border-radius: 18px; }
.ws-repair-queue { margin-top: 8px; }
.ws-repair-actions { display: flex; gap: 6px; }
.ws-repair-actions button, #ws-repair-cancel-preview { flex: 1; min-height: 30px; padding: 5px 7px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); cursor: pointer; }
.ws-repair-actions button:disabled, #ws-repair-cancel-preview:disabled { opacity: .45; cursor: default; }
.ws-smart-status { color: var(--ws-text-secondary); font-size: 13px; white-space: nowrap; }
.ws-color-optimization { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0; }
.ws-color-optimization button { min-height:34px; padding:6px; border:1px solid var(--ws-border); border-radius:6px; background:var(--ws-surface); color:var(--ws-text); cursor:pointer; }
#ws-merge-sources { min-height:108px; }
.ws-repair-counts { color: var(--ws-text-secondary); font-size: 13px; }
.ws-bead-picker { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; max-height: 220px; margin-top: 8px; overflow-y: auto; }
.ws-bead-picker button { display: grid; justify-items: center; gap: 3px; padding: 4px 2px; border: 1px solid var(--ws-border); border-radius: 5px; background: var(--ws-surface); color: var(--ws-text-secondary); cursor: pointer; }
.ws-bead-picker button.active,.ws-bead-picker button:hover { border-color: var(--ws-accent); color: var(--ws-accent); }.ws-bead-picker span { width: 20px; height: 20px; border: 1px solid #11111125; border-radius: 3px; }.ws-bead-picker small { font-size: 13px; }
.ws-palette-categories,.ws-recent-colors,.ws-selection-actions,.ws-outline-options { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.ws-palette-categories button,.ws-recent-colors button,.ws-selection-actions button,.ws-outline-options button { min-height: 27px; padding: 2px 7px; border: 1px solid var(--ws-border); border-radius: 5px; background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 13px; cursor: pointer; }
.ws-palette-categories button.active,.ws-recent-colors button:hover { color: var(--ws-accent); border-color: var(--ws-accent); background: var(--ws-accent-soft); }
.ws-recent-colors { font-size: 13px; color: var(--ws-text-tertiary); align-items: center; }.ws-outline-options label { display: flex; align-items: center; gap: 5px; font-size: 13px; }
/* —— Stage B1 §12：横向用色统计 / 颜色巡检条 ——
   横向滚动而不是竖列：右栏只有 244px，竖列会把色盘挤到屏幕外。
   卡片是「色卡 + 色号 + 颗数」三行，最小宽度按最长色号（4 字符）留够。 */
.ws-usage-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 5px; }
.ws-usage-head > span { font-size: 13px; color: var(--ws-text-secondary); font-variant-numeric: tabular-nums; }
.ws-usage-sort { display: flex; gap: 3px; }
.ws-usage-sort button { min-height: 22px; padding: 1px 5px; border: 1px solid var(--ws-border); border-radius: 4px; background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 13px; cursor: pointer; }
.ws-usage-sort button.active { color: var(--ws-accent); border-color: var(--ws-accent); background: var(--ws-accent-soft); }
.ws-usage-strip { display: flex; gap: 4px; margin: 0 0 6px; padding-bottom: 4px; overflow-x: auto; overflow-y: hidden; }
.ws-usage-strip button.ws-usage-card { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 44px; padding: 4px 3px; border: 0; border-radius: 0; background: transparent; color: var(--ws-text-secondary); cursor: pointer; }
.ws-usage-strip button.ws-usage-card.active { background: transparent; color: var(--ws-accent); }
.ws-usage-strip .ws-swatch { width: 22px; height: 14px; border: 1px solid #11111125; border-radius: 3px; }
.ws-usage-strip small { font-size: 13px; }.ws-usage-strip em { font-size: 13px; font-style: normal; color: var(--ws-text-tertiary); font-variant-numeric: tabular-nums; }
.ws-usage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 6px; }
.ws-usage-actions .ws-usage-current { flex: 1 1 100%; font-size: 13px; color: var(--ws-text-secondary); font-variant-numeric: tabular-nums; }
.ws-usage-actions button { min-height: 24px; padding: 2px 7px; border: 1px solid var(--ws-border); border-radius: 5px; background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 13px; cursor: pointer; }
.ws-usage-actions button:hover { color: var(--ws-accent); border-color: var(--ws-accent); }
.ws-usage-similar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.ws-usage-similar button { display: grid; justify-items: center; gap: 2px; min-width: 52px; padding: 4px 3px; border: 1px solid var(--ws-border); border-radius: 5px; background: var(--ws-surface); color: var(--ws-text-secondary); cursor: pointer; }
.ws-usage-similar button:hover { border-color: var(--ws-accent); color: var(--ws-accent); }
.ws-usage-similar .ws-swatch { width: 22px; height: 14px; border: 1px solid #11111125; border-radius: 3px; }
.ws-usage-similar small { font-size: 13px; }.ws-usage-similar em { font-size: 9px; font-style: normal; color: var(--ws-text-tertiary); font-variant-numeric: tabular-nums; }
.ws-picker-count { margin: 4px 0 0; font-size: 13px; color: var(--ws-text-tertiary); font-variant-numeric: tabular-nums; }
.ws-bead-picker .ws-picker-more { grid-column: 1 / -1; min-height: 26px; border: 1px dashed var(--ws-border); border-radius: 5px; background: transparent; color: var(--ws-text-secondary); font-size: 13px; cursor: pointer; }
.ws-bead-picker .ws-picker-more:hover { color: var(--ws-accent); border-color: var(--ws-accent); }
.ws-editor-actions { display: flex; gap: 8px; margin: 12px 0; }.ws-editor-actions button { flex: 1; min-height: 30px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); cursor: pointer; }.ws-editor-actions button:disabled { opacity: .45; cursor: default; }
.ws-canvas-hint { margin: 0; padding: 3px 12px; color: var(--ws-text-tertiary); font-size: 13px; text-align: center; background: var(--ws-canvas); }
/* 提示行原本靠 `grid-template-rows` 里那个固定 26px 保住高度。改成 auto 之后，
   必须自己声明最小高度 —— 否则预检条一出现，这一行会被挤到 17px，11px 的文字
   按默认行高 1.4 就是 15.4px，直接溢出到工具坞下面。
   用 border-box，26px 才等于「含 padding 的总高」，与改前的视觉高度一致。 */
.ws-canvas-hint { box-sizing: border-box; min-height: 26px; }
/* Stage B2 §6：生成前的背景预检条。
   只在「刚打开去除纯色背景」时出现；三个按钮由 JS 按 status 显隐，
   所以这里必须给 [hidden] 兜底（flex 会无视 hidden 属性）。 */
.ws-bg-preview { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--ws-border); background: var(--ws-surface-soft); color: var(--ws-text); font-size: 13px; }
.ws-bg-preview[hidden] { display: none; }
.ws-bg-preview[data-status="probing"],.ws-bg-preview[data-status="keep"] { color: var(--ws-text-secondary); }
.ws-bg-preview-text { font-weight: 650; }
.ws-bg-preview-actions { display: inline-flex; align-items: center; gap: 6px; }
.ws-bg-preview-actions button { min-height: 28px; padding: 3px 10px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); font-size: 13px; cursor: pointer; }
.ws-bg-preview-actions button[hidden] { display: none; }
.ws-bg-preview-actions button.ws-button-primary { border-color: var(--ws-accent); background: var(--ws-accent); color: var(--ds-color-on-accent); }
.ws-inspector { min-width: 0; min-height: 0; display: grid; grid-template-rows: 56px minmax(0,1fr); overflow: hidden; border-left: 1px solid var(--ws-border); background: var(--ws-surface); }
.ws-inspector-head { display: flex; align-items: baseline; gap: 9px; padding: 18px 16px 13px; border-bottom: 1px solid var(--ws-border); }.ws-inspector-head strong { font-size: 14px; }.ws-inspector-head small { color: var(--ws-text-tertiary); font-size: 13px; }
.ws-inspector-scroll { min-height: 0; overflow-y: auto; padding: 14px 16px 24px; }.ws-panel[hidden] { display: none !important; }
.ws-section-title { margin: 8px 0 12px; padding-top: 12px; border-top: 1px solid var(--ws-border); font-size: 13px; font-weight: 720; }.ws-section-title:first-child { margin-top: 0; padding-top: 0; border: 0; }
.ws-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; color: var(--ws-text-secondary); font-size: 13px; font-weight: 600; }.ws-field input:not([type="range"]),.ws-field select { width: 100%; height: 35px; padding: 0 9px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface); color: var(--ws-text); font: inherit; font-size: 13px; }.ws-field input[readonly] { background: var(--ws-surface-soft); color: var(--ws-text-tertiary); }
.ws-field input:focus,.ws-field select:focus { outline: 2px solid var(--ds-color-success); outline-offset: 1px; }.ws-note { color: var(--ws-text-tertiary); font-size: 13px; line-height: 1.45; }.ws-check { display: flex; align-items: center; gap: 6px; color: var(--ws-text-secondary); font-size: 13px; }
.ws-readout { padding: 10px 12px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface-soft); color: var(--ws-text); font-size: 13px; font-weight: 650; }
.ws-color-list { display: grid; gap: 2px; max-height: 38vh; overflow-y: auto; }.ws-color-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 7px 6px; border: 1px solid transparent; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-text); font-size: 13px; text-align: left; cursor: pointer; }.ws-color-row:hover,.ws-color-row.active { border-color: var(--ds-color-accent); background: var(--ws-accent-soft); }.ws-color-row small { color: var(--ws-text-secondary); font-variant-numeric: tabular-nums; }.ws-swatch { width: 17px; height: 17px; border: 1px solid #0002; border-radius: 3px; }
.ws-check-results { overflow-wrap: anywhere; color: var(--ws-text-secondary); font-size: 13px; line-height: 1.5; }.ws-check-results p { margin: 0 0 7px; }
.ws-project-gallery-slot .gallery-section { display: block !important; margin: 0; padding: 0; max-width: 100%; }.ws-project-gallery-slot .gallery-section .generated-gallery { display: grid; grid-template-columns: 1fr; }.ws-project-gallery-slot .gallery-card { width: 100%; }
.ws-project-gallery-slot .gallery-head { display: block; min-width: 0; margin: 0 0 8px; }.ws-project-gallery-slot .gallery-head h2 { font-size: 13px; line-height: 1.3; letter-spacing: 0; }.ws-project-gallery-slot .gallery-head p { display: none; }.ws-project-gallery-slot .gallery-tools { margin-top: 9px; }.ws-project-gallery-slot .gallery-search input { min-height: 33px; padding: 0 9px; border-radius: var(--ws-radius-sm); font-size: 13px; }.ws-project-gallery-slot .gallery-card { border-radius: var(--ws-radius-sm); }.ws-project-gallery-slot .gallery-card img { height: 118px; object-fit: contain; }.ws-project-gallery-slot .gallery-caption { padding: 7px; font-size: 13px; }
.ws-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: var(--ws-viewbar-height); padding: 0 14px; border-top: 1px solid var(--ws-border); background: var(--ws-surface); }.ws-viewbar button { height: 29px; min-width: 28px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-text-secondary); font-size: 13px; cursor: pointer; }.ws-viewbar button:hover:not(:disabled) { background: var(--ws-surface-soft); border-color: var(--ws-border); }.ws-viewbar button.active { background: var(--ws-accent-soft); color: var(--ws-accent); font-weight: 720; }.ws-viewbar button:disabled { opacity: .4; cursor: default; }
.ws-view-modes,.ws-view-toggles { display: flex; align-items: center; gap: 3px; min-width: 0; }.ws-view-toggles { gap: 12px; }.ws-view-toggles label { display: flex; align-items: center; gap: 5px; color: var(--ws-text-secondary); font-size: 13px; white-space: nowrap; cursor: pointer; }.ws-view-toggles input { accent-color: var(--ws-accent); }
.ws-confirm-dialog { width: min(340px,90vw); padding: 22px; border: 1px solid var(--ws-border); border-radius: 12px; background: var(--ws-surface); color: var(--ws-text); box-shadow: 0 16px 40px #11111130; }
.ws-confirm-dialog::backdrop { background:var(--ds-color-backdrop); }.ws-confirm-dialog p { margin: 0 0 18px; font-size: 13px; line-height: 1.5; }.ws-confirm-dialog div { display: flex; justify-content: flex-end; gap: 8px; }
.ws-confirm-dialog button { min-height: 32px; padding: 0 12px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); cursor: pointer; }
.ws-confirm-dialog #ws-confirm-ok { border-color: var(--ws-accent); background: var(--ws-accent); color: var(--ds-color-on-accent); }
.ws-export-drawer { position: absolute; z-index: 30; top: var(--ws-toolbar-height); right: 0; bottom: var(--ws-viewbar-height); width: min(340px,90vw); padding: 18px; overflow-y: auto; border-left: 1px solid var(--ws-border); background: var(--ws-surface); transform: translateX(101%); visibility: hidden; transition: transform .24s ease, visibility .24s; box-shadow: -10px 0 24px #11111112; }.ws-export-drawer.open { transform: translateX(0); visibility: visible; }.ws-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--ws-border); font-size: 15px; }.ws-drawer-head button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--ws-text-secondary); font-size: 23px; cursor: pointer; }.ws-export-choice { display: flex; flex-direction: column; gap: 5px; width: 100%; margin: 8px 0; padding: 14px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface); color: var(--ws-text); text-align: left; cursor: pointer; }.ws-export-choice:hover { border-color: var(--ws-accent); background: var(--ws-accent-soft); }.ws-export-choice strong { font-size: 13px; }.ws-export-choice small { color: var(--ws-text-tertiary); font-size: 13px; }
.ws-export-options { display: grid; gap: 9px; margin: 18px 0 10px; padding: 12px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface-soft); font-size: 13px; }.ws-export-options strong { font-size: 13px; }.ws-export-options label { display: flex; align-items: center; gap: 7px; color: var(--ws-text-secondary); cursor: pointer; }.ws-export-options input { accent-color: var(--ws-accent); }
/* ============================ 库存面板（B 批） ============================ */
.inv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.inv-search { width: 100%; height: 33px; margin-bottom: 8px; padding: 0 9px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface); color: var(--ws-text); font: inherit; font-size: 13px; }
.inv-list { display: grid; gap: 2px; }
.inv-row-item { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 6px; border: 1px solid transparent; border-radius: var(--ws-radius-sm); background: transparent; color: var(--ws-text); font-size: 13px; text-align: left; cursor: pointer; }
.inv-row-item:hover { border-color: var(--ds-color-accent); background: var(--ws-accent-soft); }
.inv-row-main { display: grid; min-width: 0; }
.inv-row-main strong { font-weight: 650; }
.inv-row-main small { overflow: hidden; color: var(--ws-text-tertiary); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.inv-stock { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.inv-stock small { display: block; color: var(--ws-text-tertiary); font-size: 13px; font-weight: 500; }
.inv-stock.is-low { color: var(--ds-color-warning); }
.inv-stock.is-negative { color: var(--ws-danger); }
.inv-deficit { color: var(--ws-danger); font-size: 13px; font-weight: 650; }
.inv-submission { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; margin-bottom: 4px; padding: 6px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); }
.inv-submission.is-reverted { opacity: .55; }
.inv-submission strong { font-size: 13px; }
.inv-submission small { display: block; color: var(--ws-text-tertiary); font-size: 13px; }
.ws-toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; max-width: min(560px, 88vw); padding: 10px 16px; border: 1px solid var(--ws-border); border-radius: 999px; background: var(--ws-surface); color: var(--ws-text); box-shadow: 0 12px 30px #11111133; font-size: 13px; transform: translateX(-50%); }
.ws-inv-dialog { width: min(520px,94vw); padding: 20px; border: 1px solid var(--ws-border); border-radius: 12px; background: var(--ws-surface); color: var(--ws-text); box-shadow: 0 18px 44px #11111133; }
.ws-inv-dialog::backdrop { background:var(--ds-color-backdrop); }
.ws-inv-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ws-inv-dialog-head strong { font-size: 14px; }
.ws-inv-dialog-head button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ws-text-tertiary); font-size: 18px; cursor: pointer; }
.ws-inv-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 12px; }
.ws-inv-wide { grid-column: 1/-1; }
.ws-inv-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.ws-inv-dialog-foot div { display: flex; gap: 8px; }
.inv-danger { color: var(--ws-danger); }
/* 用豆清单对话框。[open] 不能省：作者样式里的 display 会盖掉浏览器默认的 dialog:not([open]){display:none} */
.ws-usage-dialog[open] { display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; width: min(960px,96vw); max-height: 88vh; padding: 0; border: 1px solid var(--ws-border); border-radius: 12px; background: var(--ws-surface); color: var(--ws-text); box-shadow: 0 18px 44px #11111133; }
.ws-usage-dialog::backdrop { background:var(--ds-color-backdrop); }
.ws-usage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--ws-border); }
.ws-usage-head strong { display: block; font-size: 14px; }
.ws-usage-head small { color: var(--ws-text-tertiary); font-size: 13px; }
.ws-usage-close { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ws-text-tertiary); font-size: 18px; cursor: pointer; }
.ws-usage-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.ws-usage-dialog > .ws-note { margin: 8px 18px 10px; }
.ws-usage-table-host { min-height: 0; margin: 0 18px; overflow: auto; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); }
.ws-usage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ws-usage-table th { position: sticky; top: 0; z-index: 1; padding: 7px 9px; background: var(--ws-surface-soft); color: var(--ws-text-tertiary); font-size: 13px; font-weight: 650; text-align: left; }
.ws-usage-table td { padding: 5px 9px; border-top: 1px solid var(--ws-border); vertical-align: middle; }
.ws-usage-code,input.ws-usage-count { width: 100%; height: 30px; padding: 0 7px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ws-surface); color: var(--ws-text); font: inherit; font-size: 13px; }
.ws-usage-code { width: 92px; }
input.ws-usage-count { width: 84px; font-variant-numeric: tabular-nums; }
.ws-usage-hint { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--ws-text-tertiary); font-size: 13px; }
.ws-usage-badge { padding: 1px 6px; border-radius: 999px; background: var(--ws-surface-soft); border: 1px solid var(--ws-border); color: var(--ws-text-secondary); }
.ws-usage-badge.is-ok { border-color: var(--ds-color-success); background: var(--ds-color-success-soft); color: var(--ds-color-success); }
.ws-usage-badge.is-review { border-color: var(--ds-color-warning); background: var(--ds-color-warning-soft); color: var(--ds-color-warning); }
.ws-usage-badge.is-failed { border-color: var(--ds-color-danger); background: var(--ds-color-danger-soft); color: var(--ws-danger); }
.ws-usage-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ws-usage-warn { color: var(--ds-color-warning); }
.ws-usage-adopt { padding: 1px 7px; border: 1px solid var(--ws-accent); border-radius: 999px; background: var(--ws-accent-soft); color: var(--ds-color-accent); font-size: 13px; cursor: pointer; }
.ws-usage-remove { width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; color: var(--ws-text-tertiary); font-size: 15px; cursor: pointer; }
.ws-usage-remove:hover { background: var(--ws-surface-soft); color: var(--ws-danger); }
.ws-usage-empty { padding: 22px 10px; color: var(--ws-text-tertiary); text-align: center; }
.ws-swatch-empty { background: repeating-linear-gradient(45deg,var(--ds-color-surface),var(--ds-color-surface) 4px,var(--ds-color-surface-soft) 4px,var(--ds-color-surface-soft) 8px); }
.ws-usage-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 16px; }
.ws-usage-foot div { display: flex; gap: 8px; }
@media (max-width: 1100px) { :root { --ws-inspector-width: 280px; } .ws-brand { min-width: 155px; }.ws-status { display: none; } }
@media (max-width: 760px) { body.phase2-workspace .workspace-grid[data-workspace-ready="true"] { grid-template-columns: 56px minmax(0,1fr) !important; }.ws-inspector { position: absolute; z-index: 20; top: var(--ws-toolbar-height); right: 0; bottom: var(--ws-viewbar-height); width: min(300px,calc(100vw - 56px)); box-shadow: -8px 0 18px #11111113; }.ws-brand span:last-child { display: none; }.ws-brand { min-width: 30px; }.ws-topbar { gap: 5px; padding: 0 7px; }.ws-name { min-width: 0; }.ws-viewbar { overflow-x: auto; padding: 0 7px; }.ws-view-modes,.ws-view-toggles { flex: 0 0 auto; } }
@media (prefers-reduced-motion: reduce) { .ws-export-drawer { transition: visibility 0s, opacity .12s; transform: none; opacity: 0; }.ws-export-drawer.open { opacity: 1; } .ws-button:active,.ws-rail-button:active { transform: none; } }
@media (prefers-contrast: more) { .ws-rail-button.active,.ws-color-row.active { border-color: var(--ws-accent); } }

/* ───────── 顶栏参数条：视图缩放 ─────────
   作为 .workspace-wrap 网格第 2 行（auto），横贯整宽，位于工作台上方、底部画笔坞之上。
   Stage C0 §2/§4：生成尺寸（长边草稿 + 派生读数 +「应用尺寸」）已经搬进右栏「生成」面板 ——
   它是生成这一层的 PROPERTY，不该和视图控件挤在同一条横条上。这里只剩 TOOL 层的视图缩放。
   保留 50px 的行高是刻意的：.ws-canvas-area 的行轨契约和底部工具坞的定位都按它算，
   缩它等于顺手动布局；后续视图类开关（网格 / 色号 / 对比）也还有位置。 */
.phase2-workspace .ws-top-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  min-height: 50px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--ws-border);
  background: var(--ws-surface);
  overflow: visible;
}
.phase2-workspace .ws-top-zoom { display: flex; align-items: center; margin-left: auto; }

/* ───────── 右栏「生成」面板：生成尺寸 ─────────
   同一套控件从顶栏搬进窄右栏：预设改两列、滑杆与数字框占满宽度、应用按钮整宽。
   **元素 id 一个都没换**（#ws-size-chips / #ws-size-range / #ws-size-number /
   #ws-size-value / #ws-size-apply / #ws-size-authority / #ws-size-tier），
   所以既有探针仍然按同一套选择器驱动它 —— 搬的只是位置，不是接口。 */
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-block {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  background: var(--ws-surface-soft);
}
/* 收缩空白边距（用户 2026-10-16）：「减少图纸空白格」—— 检测读数 + 三档预设。
   走可撤销结构命令，只数外圈空白；四边全 0 时整行隐藏。 */
body.phase2-workspace .ws-trim-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12px; color: var(--ws-text-secondary); }
body.phase2-workspace .ws-trim-readout { white-space: nowrap; }
body.phase2-workspace .ws-trim-actions { display: flex; gap: 4px; margin-left: auto; }
body.phase2-workspace .ws-trim-actions .ws-button { min-height: 26px; padding: 2px 10px; font-size: 12px; }
body.phase2-workspace .ws-trim-actions .ws-button:disabled { opacity: .5; cursor: not-allowed; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-top-size-label { color: var(--ws-text-tertiary); font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-slider { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-slider output { display: flex; align-items: center; justify-content: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--ws-border); border-radius: 10px; background: var(--ws-accent-soft); color: var(--ws-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-slider input[type="range"] { width: 100%; accent-color: var(--ws-accent); cursor: pointer; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-slider input[type="number"] { width: 100%; height: 30px; padding: 0 6px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-surface); color: var(--ws-text); font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-slider input[type="number"]:focus { outline: 2px solid var(--ws-accent); outline-offset: 1px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .ws-size-slider input[type="number"]:disabled { opacity: .5; }
.phase2-workspace .ws-size-apply { height: 30px; padding: 0 12px; white-space: nowrap; }
.phase2-workspace .ws-size-apply:disabled { opacity: .5; cursor: not-allowed; }
/* 尺寸预设片在窄栏里也要有确定的命中面积（原本靠 44px 最小宽撑开）。 */
.phase2-workspace .ws-size-chip {
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.phase2-workspace .ws-size-chip:hover { border-color: var(--ws-border-strong); color: var(--ws-text); }
.phase2-workspace .ws-size-chip.is-active { border-color: var(--ws-accent); background: var(--ws-accent-soft); color: var(--ws-accent); }
.phase2-workspace .ws-size-chip-auto { min-width: 52px; }


/* 大尺寸分档提示（B0 §8）：301–400 提示大尺寸，>400 提示超大尺寸，都必须显式点「应用尺寸」。 */
.phase2-workspace .ws-size-tier {
  padding: 3px 8px;
  border: 1px solid var(--ws-border-strong);
  border-radius: 8px;
  color: var(--ws-text-secondary);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.phase2-workspace .ws-size-tier[data-tier="large"] { border-color: var(--ds-color-warning); color: var(--ds-color-warning); background: var(--ds-color-warning-soft); }
.phase2-workspace .ws-size-tier[data-tier="xlarge"] { border-color: var(--ds-color-danger); color: var(--ds-color-danger); background: var(--ds-color-danger-soft); }

/* 尺寸权威来源（B0.1）：绝对权威在位时长边不再是自由度，必须说清是谁定的尺寸，
   否则用户会以为滑杆坏了。工程文件 / 人工标定 / 网格识别用同一套中性色。 */
.phase2-workspace .ws-size-authority {
  padding: 3px 8px;
  border: 1px solid var(--ws-border-strong);
  border-radius: 8px;
  color: var(--ws-text-secondary);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.phase2-workspace .ws-size-authority[data-authority="structured-project"] { border-color: var(--ds-color-border-strong); color: var(--ds-color-text); background: var(--ds-color-surface-soft); }
.phase2-workspace .ws-size-authority[data-authority="manual-calibration"] { border-color: var(--ds-color-success); color: var(--ds-color-success); background: var(--ds-color-success-soft); }
.phase2-workspace .ws-size-authority[data-authority="grid-detection"] { border-color: var(--ds-color-border-strong); color: var(--ds-color-text); background: var(--ds-color-surface-soft); }

/* 镜像菜单属于底部工具坞，向上展开，避免被视口底边截断。 */
.phase2-workspace .ws-dock .sl-mirror-menu .sl-tool-menu {
  top: auto;
  right: 0;
  bottom: calc(100% + 8px);
  grid-template-columns: 1fr;
  width: 150px;
}

/* ───────── 右栏「生成」面板：生成模式 + 生成参数 + 生成状态 ─────────
   GenerationPanel 从顶栏搬进窄右栏，撤掉横向卡片布局、回归竖排；预设网格压成 2 列。
   Stage C0 §3：它现在住在**「生成」Tab**（原来挂在「色彩」里，6 个 tab 没有一个叫生成）。 */
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-generation-panel { gap: 12px; margin: 12px 0 4px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-panel-section { padding: 12px; border-radius: 10px; border-color: var(--ws-border); }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-section-heading { margin-bottom: 12px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-section-heading h3 { font-size: 13px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-section-heading p { font-size: 13px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-sampling-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-advanced-content[hidden] { display: none; }

/* 主要动作「重新生成」（Stage C0 §4）。放在面板最上面：它是这一屏唯一的 ACTION，
   不该被 8 张模式卡 + 4 段参数压到最底下要滚三屏才够得着。 */
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-action-section { padding: 0; border: 0; background: transparent; }
.phase2-workspace .sl-primary-action {
  width: 100%; display: grid; gap: 2px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--ws-accent); border-radius: 10px;
  background: var(--ws-accent-soft); color: var(--ws-accent); cursor: pointer;
}
.phase2-workspace .sl-primary-action strong { font-size: 13px; }
.phase2-workspace .sl-primary-action small { color: var(--ws-text-secondary); font-size: 13px; }
.phase2-workspace .sl-primary-action:hover:not(:disabled) { background: var(--ws-accent); color: var(--ws-surface); }
.phase2-workspace .sl-primary-action:hover:not(:disabled) small { color: var(--ws-surface); }
.phase2-workspace .sl-primary-action:disabled { opacity: .45; cursor: not-allowed; }

/* 颜色数量档位（Stage C0 §6）：0 这个内部哨兵值不再直接给用户看。 */
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-color-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-color-presets button {
  height: 28px; border: 1px solid var(--ws-border); border-radius: 8px;
  background: var(--ws-surface); color: var(--ws-text-secondary);
  font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer;
}
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-color-presets button:hover { border-color: var(--ws-border-strong); color: var(--ws-text); }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-color-presets button.is-active { border-color: var(--ws-accent); background: var(--ws-accent-soft); color: var(--ws-accent); }
.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-number-readout { margin: 8px 0 0; color: var(--ws-text-secondary); font-size: 13px; font-weight: 650; }

/* ───────── 右栏「色彩」面板：色卡 + 色号选择 + 用色统计 ─────────
   Stage C0 §3：生成参数已搬到「生成」面板，这里只剩色号本身（OBJECT/PROPERTY）。 */
.phase2-workspace .ws-panel[data-ws-inspector="color"] #ws-color-search { width: 100%; height: 32px; margin-bottom: 8px; padding: 0 9px; border: 1px solid var(--ws-border); border-radius: 6px; font-size: 13px; background: var(--ws-surface); color: var(--ws-text); }

/* ───────── 右栏「材料」面板：本作品用豆 + 底板 + 库存台账 ─────────
   Stage C0 §2/§14：「库存」→「材料」。库存面板的每一项能力都还在（扣料 / OCR 录入 /
   CSV / 缺货 / 单色号明细），它现在是材料面板的最后一节；上面多了备料口径的用豆清单。 */
.phase2-workspace .ws-material-list { display: grid; gap: 2px; margin: 8px 0 4px; max-height: 260px; overflow-y: auto; }
.phase2-workspace .ws-material-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; }
.phase2-workspace .ws-material-row b { min-width: 0; overflow: hidden; color: var(--ws-text); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.phase2-workspace .ws-material-row em { color: var(--ws-text-secondary); font-style: normal; font-variant-numeric: tabular-nums; white-space:nowrap; text-align:right; }
.phase2-workspace .ws-material-row .ws-code-swatch { justify-self:start; max-width:100%; box-sizing:border-box; }
.phase2-workspace .ws-material-row .ws-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--ws-border-strong); }

/* ───────── 右栏「编辑」面板：素材图层（文字 / 二维码） ─────────
   结构照 Pixler 的「添加文字」：上面是浮动图层列表，下面是当前图层的编辑表单。
   素材在画布上只画在 overlay 层（拖动/调参全程不写 grid），锁定后才合成进导出副本。
   二维码面板与文字面板同构，样式并列写在一起 —— 改一处两边同步，不会各自漂移。 */
.phase2-workspace .ws-text-panel,
.phase2-workspace .ws-qr-panel { display: grid; gap: 10px; margin: 10px 0 4px; }
/* 两个面板按当前工具显隐（有图层就常显，没图层只在对应工具下出现）。
   `[hidden]` 的 UA 样式优先级低于上面的类选择器，必须显式补一条，
   否则 hidden 属性会被 display:grid 覆盖掉 —— 面板永远关不上。 */
.phase2-workspace .ws-text-panel[hidden],
.phase2-workspace .ws-qr-panel[hidden] { display: none; }

/* 浮动图层列表 */
.phase2-workspace .ws-text-layers,
.phase2-workspace .ws-qr-layers { display: grid; gap: 6px; }
.phase2-workspace .ws-text-layers-head,
.phase2-workspace .ws-qr-layers-head { color: var(--ws-text-tertiary); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.phase2-workspace .ws-text-layers-head b,
.phase2-workspace .ws-qr-layers-head b { color: var(--ws-text-secondary); }
.phase2-workspace .ws-text-layer,
.phase2-workspace .ws-qr-layer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 8px; width: 100%;
  padding: 7px 9px; border: 1px solid var(--ws-border); border-radius: 8px;
  background: var(--ws-surface); color: var(--ws-text-secondary);
  font-size: 13px; text-align: left; cursor: pointer;
}
.phase2-workspace .ws-text-layer small,
.phase2-workspace .ws-qr-layer small { grid-column: 1 / -1; color: var(--ws-text-tertiary); line-height: 1.45; }
.phase2-workspace .ws-text-object-delete,
.phase2-workspace .ws-qr-object-delete { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ws-text-tertiary); font-size: 18px; line-height: 1; cursor: pointer; }
.phase2-workspace .ws-text-object-delete:hover,
.phase2-workspace .ws-qr-object-delete:hover { background: color-mix(in srgb, var(--ws-danger) 10%, transparent); color: var(--ds-color-danger-hover); }
.phase2-workspace .ws-text-layer:hover,
.phase2-workspace .ws-qr-layer:hover { border-color: var(--ws-border-strong); color: var(--ws-text); }
.phase2-workspace .ws-text-layer.is-active,
.phase2-workspace .ws-qr-layer.is-active { border-color: var(--ws-accent); background: var(--ws-accent-soft); color: var(--ws-accent); }
.phase2-workspace .ws-text-layer-name,
.phase2-workspace .ws-qr-layer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase2-workspace .ws-text-layer-badge,
.phase2-workspace .ws-qr-layer-badge { grid-column: 1 / -1; justify-self: start; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--ws-accent); color: var(--ws-accent); font-size: 13px; font-weight: 700; }

/* 编辑表单：文字内容 / 字体 / 颜色 / 加粗倾斜 / 字号 / 旋转 */
.phase2-workspace .ws-text-editor,
.phase2-workspace .ws-qr-editor { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--ws-border); border-radius: 10px; background: var(--ws-surface-soft); }
.phase2-workspace .ws-text-label { color: var(--ws-text-secondary); font-size: 13px; }
.phase2-workspace .ws-text-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.phase2-workspace .ws-text-swatch {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px 3px 3px; border: 1px solid var(--ws-border); border-radius: 6px;
  background: var(--ws-surface); color: var(--ws-text-secondary);
  font-size: 13px; font-weight: 650; cursor: pointer;
}
.phase2-workspace .ws-text-swatch i { width: 16px; height: 16px; border: 1px solid var(--ws-border); border-radius: 3px; }
.phase2-workspace .ws-text-swatch:hover { border-color: var(--ws-border-strong); color: var(--ws-text); }
.phase2-workspace .ws-text-swatch.is-on { border-color: var(--ws-accent); background: var(--ws-accent-soft); color: var(--ws-accent); }
.phase2-workspace .ws-text-swatch-pick,
.phase2-workspace .ws-text-swatch-add { padding: 3px 9px; font-size: 13px; line-height: 1; }
.phase2-workspace .ws-text-style { display: flex; gap: 6px; }
.phase2-workspace .ws-text-toggle {
  width: 34px; height: 30px; border: 1px solid var(--ws-border); border-radius: 8px;
  background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 13px; cursor: pointer;
}
.phase2-workspace .ws-text-toggle:hover { border-color: var(--ws-border-strong); color: var(--ws-text); }
.phase2-workspace .ws-text-toggle.is-on { border-color: var(--ws-accent); background: var(--ws-accent-soft); color: var(--ws-accent); }
.phase2-workspace .ws-text-actions,
.phase2-workspace .ws-qr-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.phase2-workspace .ws-text-delete,
.phase2-workspace .ws-qr-delete { color: var(--ws-danger); }
.phase2-workspace .ws-text-delete:hover:not(:disabled),
.phase2-workspace .ws-qr-delete:hover:not(:disabled) { border-color: var(--ws-danger); background: var(--ws-surface); color: var(--ws-danger); }

/* 二维码专属：两列成对的字段、可扫性读数与警告。
   读数区用等宽字体 —— 这里全是「21 × 21」「3:1」这类要对齐比较的数字。 */
.phase2-workspace .ws-qr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phase2-workspace .ws-qr-readout { display: grid; gap: 4px; font-size: 13px; }
.phase2-workspace .ws-qr-readout > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
.phase2-workspace .ws-qr-readout dt { color: var(--ws-text-tertiary); }
.phase2-workspace .ws-qr-readout dd { margin: 0; color: var(--ws-text-secondary); font-variant-numeric: tabular-nums; }
.phase2-workspace .ws-qr-readout dd b { color: var(--ws-text); }
/* 「不达标」用红色。用显式类而不是 :only-child —— 落豆数的 <b> 也是 dd 里唯一的
   元素子节点，:only-child 会把它一起染红，读数就分不清哪一条是警告了。 */
.phase2-workspace .ws-qr-readout dd b.ws-qr-bad { color: var(--ws-danger); }
.phase2-workspace .ws-qr-warnings { margin: 0; padding-left: 18px; color: var(--ds-color-warning, #b26a00); font-size: 13px; line-height: 1.5; }
.phase2-workspace .ws-qr-diagnostic-error { margin: 0; color: var(--ws-danger); font-size: 13px; line-height: 1.5; }

@media (max-width: 760px) {
  /* 小屏：顶栏改为纵向堆叠（Stage C0 之后这里只剩视图缩放，尺寸控件已在右栏「生成」里） */
  .phase2-workspace .ws-top-controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .phase2-workspace .ws-top-zoom { margin-left: 0; justify-content: flex-end; }
}

/* Stage A product shell */
.phase2-workspace .ws-topbar { gap: 10px; padding-inline: 12px; }
.phase2-workspace .ws-brand { min-width: 170px; }
.phase2-workspace .ws-brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.phase2-workspace .ws-brand span { display: grid; line-height: 1.05; }
.phase2-workspace .ws-brand strong { color: var(--ws-text); font-size: 13px; }
.phase2-workspace .ws-brand small { margin-top: 3px; color: var(--ws-text-muted); font-size: 9px; }
.phase2-workspace .ws-project-identity { min-width: 190px; display: grid; grid-template-columns: minmax(110px,220px) auto; align-items: center; column-gap: 8px; }
.phase2-workspace .ws-project-identity .ws-name { grid-row: 1 / span 2; }
.phase2-workspace .ws-project-identity > span { min-width: 0; overflow: hidden; color: var(--ws-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.phase2-workspace .ws-history-actions { display: flex; gap: 3px; }
.phase2-workspace .ws-history-actions button,.phase2-workspace .ws-rail-collapse { width: 34px; height: 34px; border: 1px solid var(--ws-border); background: var(--ws-surface); color: var(--ws-text); font-size: 18px; }
.phase2-workspace .ws-history-actions button{display:inline-flex;align-items:center;justify-content:center;padding:0}
.phase2-workspace .ws-history-actions button svg{display:block;width:19px;height:19px}
.phase2-workspace .ws-project-menu { position: relative; }
.phase2-workspace .ws-project-menu > summary { list-style: none; }
.phase2-workspace .ws-project-menu > summary::-webkit-details-marker { display: none; }
.phase2-workspace .ws-project-popover { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; width: 230px; padding: 6px; border: 1px solid var(--ws-border); background: var(--ws-surface); box-shadow: 0 14px 36px rgba(24,26,34,.16); }
.phase2-workspace .ws-project-popover button { width: 100%; display: grid; gap: 3px; padding: 10px 11px; border: 0; background: transparent; color: var(--ws-text); text-align: left; }
.phase2-workspace .ws-project-popover button:hover { background: var(--ws-accent-soft); }
.phase2-workspace .ws-project-popover small { color: var(--ws-text-muted); font-size: 13px; }
.phase2-workspace .ws-rail { width: 58px; padding: 6px; transition: width 180ms ease; }
.phase2-workspace .ws-rail-collapse { flex: 0 0 auto; align-self: flex-end; width: 28px; height: 28px; margin-bottom: 4px; font-size: 16px; }
.phase2-workspace .ws-rail .ws-grid-toolbar-host { min-height: 0; flex: 0 0 auto; width: 100%; }
.phase2-workspace .sl-grid-toolbar-rail { display: grid; gap: 4px; align-content: start; }
.phase2-workspace .sl-grid-toolbar-rail .sl-tool-button { width: 100%; min-height: 44px; display: grid; place-items: center; gap: 2px; padding: 4px; border: 1px solid transparent; background: transparent; color: var(--ws-text-secondary); }
.phase2-workspace .sl-grid-toolbar-rail .sl-tool-button:hover,.phase2-workspace .sl-grid-toolbar-rail .sl-tool-button.is-active,.phase2-workspace .sl-grid-toolbar-rail details[open] > summary { border-color: var(--ws-border); background: var(--ws-accent-soft); color: var(--ws-accent); }
.phase2-workspace .sl-grid-toolbar-rail .sl-tool-icon svg { width: 20px; height: 20px; }
.phase2-workspace .sl-grid-toolbar-rail .sl-tool-label { display: block; font-size: 13px; }
.phase2-workspace .sl-rail-menu { position: relative; width: 100%; }
.phase2-workspace .sl-rail-menu > summary { list-style: none; }
.phase2-workspace .sl-rail-menu > summary::-webkit-details-marker { display: none; }
/* Stage C0 §18：左轨子菜单改为「就地展开」，不再向右浮出。
   ── 为什么必须改 ────────────────────────────────────────────────────
   浮出版本和 .ws-rail 的 `overflow-x: hidden !important` **物理上互斥**：
   `.sl-tool-menu` 是 `.sl-rail-menu`（position: relative，在左轨内部）的绝对定位
   子元素，包含块落在裁剪框里面，所以「从 100% 再往右 8px」那一整块被裁掉。
   实测证据：按钮有 37×38 的盒子、display=flex、visibility=visible，
   但中心点 elementFromPoint 命中的是 `div#ws-canvas-well` —— 真鼠标点不到。
   「形状」「选择」「镜像」三组共 9 个工具入口全部不可达，而且任何用
   `element.click()` 驱动的探针都会说它们 PASS。
   就地展开没有这个问题，也不再和 overflow-x: hidden 打架。
   （移动端 ≤760px 是另一回事：横向条 overflow-y: hidden，改用 fixed 浮上去，
     见文件末尾的媒体查询。） */
.phase2-workspace .sl-rail-menu .sl-tool-menu { position: static; z-index: auto; left: auto; top: auto; width: 100%; margin: 4px 0 2px; padding: 2px 0 2px 8px; border: 0; border-left: 2px solid var(--ws-accent-soft); background: transparent; box-shadow: none; }
.phase2-workspace .sl-rail-menu .sl-tool-menu .sl-tool-button { min-height: 36px; display: flex; justify-content: flex-start; padding-inline: 10px; }
.phase2-workspace .sl-rail-help { width: 100%; min-height: 34px; margin-top: 4px; border: 0; background: transparent; }
.phase2-workspace .ws-rail.is-collapsed { width: 58px; }
.phase2-workspace .ws-rail.is-collapsed .sl-tool-label,.phase2-workspace .ws-rail.is-collapsed .ws-rail-mode small { display: none; }
.phase2-workspace .ws-rail.is-collapsed .sl-grid-toolbar-rail .sl-tool-button { min-height: 42px; }
.phase2-workspace .ws-rail,
body.phase2-workspace .workspace-grid[data-workspace-ready="true"] > .ws-rail {
  box-sizing: border-box; min-width: 0; max-width: 100%; overflow-x: hidden !important; overflow-y: auto;
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
}
body.phase2-workspace .ws-rail .ws-grid-toolbar-host { box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%; overflow: visible; }
body.phase2-workspace .ws-rail .sl-grid-toolbar-rail {
  box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%;
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px;
  overflow: visible;
}
body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-tool-button,
body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-rail-menu,
body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-rail-menu > summary.sl-tool-button {
  box-sizing: border-box; flex: 0 0 auto !important; min-width: 0 !important; max-width: 100%; width: 100% !important;
}
body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-tool-button,
body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-rail-menu > summary.sl-tool-button {
  height: 44px !important; min-height: 44px !important; display: flex !important; flex-direction: column !important; align-items: center; justify-content: center;
}
body.phase2-workspace .ws-rail.is-collapsed .sl-grid-toolbar-rail > .sl-tool-button,
body.phase2-workspace .ws-rail.is-collapsed .sl-grid-toolbar-rail > .sl-rail-menu > summary.sl-tool-button { height: 44px !important; min-height: 44px !important; }
/* ── Stage C0 §18：桌面端左轨子菜单「就地展开」 ───────────────────────────
   ⚠️ 这条规则**必须**被 `min-width: 761px` 包住，不是可选的美化。
   ── 为什么（2026-10-05 四档视口 QA 抓出来的移动端回归）───────────────────
   这条规则的选择器是 `body.phase2-workspace .ws-rail .sl-rail-menu .sl-tool-menu`
   = (0,4,1)，而移动端那条（文件末尾 `@media (max-width: 760px)` 里）
   `.phase2-workspace .sl-rail-menu .sl-tool-menu` = (0,3,0)。
   **两条都带 `!important`，所以决定权完全在特异性上，与源码顺序无关** ——
   于是这条 `position: static` 赢过移动端的 `position: fixed`，
   移动端那条成了死代码。后果：≤760px 时子菜单按 static 排进只有 58px 高的
   贴底横条（`overflow-y: hidden`）里，被裁掉且落到视口外。
   实测（390×844）：三个菜单的 `.sl-tool-menu` 计算 `position: static`，
   矩形 y=897 / 997（视口只有 844 高），9 个工具的
   `elementFromPoint` 全返回 `null` —— 真鼠标点不到。
   C0 之前这条规则是 `.sl-rail-menu .sl-tool-menu`（0,2,0、无 `!important`），
   移动端的 `!important` 能压住它，所以移动端本来是好的。
   **这是 C0 §18 引入的回归**，不是历史遗留。
   用媒体查询切开比调特异性稳：桌面规则在 ≤760px 根本不存在，没有优先级可打。 */
@media (min-width: 761px) {
  body.phase2-workspace .ws-rail .sl-rail-menu .sl-tool-menu { position: static !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important; width: 100% !important; }
}

.phase2-workspace .ws-resize-current { display:flex; align-items:center; justify-content:space-between; margin:8px 0 10px; padding:10px; border:1px solid var(--ws-border); background:var(--ws-surface-soft); }
.phase2-workspace .ws-resize-current strong { font-size:16px; }.phase2-workspace .ws-resize-current span { color:var(--ws-text-muted); font-size: 13px; }
.ws-resize-dialog { width:min(460px,calc(100vw - 28px)); padding:0; border:1px solid var(--ws-border); background:var(--ws-surface); color:var(--ws-text); box-shadow:0 24px 70px rgba(20,22,30,.24); }
.ws-resize-dialog::backdrop { background:var(--ds-color-backdrop); backdrop-filter:blur(2px); }
.ws-resize-card { display:grid; }.ws-resize-head,.ws-resize-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--ws-border); }
.ws-resize-head > div { display:grid; gap:3px; }.ws-resize-head small { color:var(--ws-text-muted); }.ws-resize-head button { border:0; background:transparent; font-size:22px; }
.ws-resize-body { display:grid; gap:12px; padding:16px; }.ws-resize-body input[type="number"] { width:110px; min-height:36px; padding:0 9px; border:1px solid var(--ws-border); background:var(--ws-surface); }
.ws-resize-presets { display:flex; gap:6px; flex-wrap:wrap; }.ws-resize-presets button,.ws-resize-foot button { min-height:34px; padding:0 12px; border:1px solid var(--ws-border); background:var(--ws-surface); }.ws-resize-presets span { align-self:center; color:var(--ws-text-muted); font-size: 13px; }
.ws-resize-modes { display:flex; gap:18px; margin:0; padding:12px; border:1px solid var(--ws-border); }.ws-resize-modes legend { padding:0 5px; color:var(--ws-text-muted); font-size: 13px; }
.ws-anchor-grid { display:grid; grid-template-columns:repeat(3,34px); gap:5px; width:max-content; }.ws-anchor-grid label { position:relative; width:34px; height:34px; }.ws-anchor-grid input { position:absolute; opacity:0; }.ws-anchor-grid span { display:block; width:100%; height:100%; border:1px solid var(--ws-border); background:var(--ws-surface-soft); }.ws-anchor-grid input:checked + span { border-color:var(--ws-accent); background:var(--ws-accent-soft); box-shadow:inset 0 0 0 5px var(--ws-surface); }
.ws-resize-warning { min-height:42px; margin:0; padding:10px 12px; background:var(--ds-color-surface-soft); color:var(--ds-color-warning); font-size: 13px; line-height:1.55; }.ws-resize-foot { justify-content:flex-end; border-top:1px solid var(--ws-border); border-bottom:0; }.ws-resize-foot .ws-button-primary { border-color:var(--ws-accent); background:var(--ws-accent); color:var(--ds-color-on-accent); }
.phase2-workspace .ws-editor-group { padding: 12px 0; border-bottom: 1px solid var(--ws-border); }
.phase2-workspace .ws-text-objects { display: grid; gap: 6px; }
@media (max-width: 1180px) { .phase2-workspace .ws-brand { min-width: 125px; }.phase2-workspace .ws-brand small,.phase2-workspace .ws-project-identity .ws-status { display:none; }.phase2-workspace .ws-project-identity { min-width:150px; grid-template-columns:minmax(100px,1fr); }.phase2-workspace .ws-project-identity .ws-name { grid-row:auto; } }
@media (max-width: 900px) { .phase2-workspace .ws-project-identity > #ws-project-meta { display:none; }.phase2-workspace .ws-project-identity { min-width:105px; }.phase2-workspace .ws-topbar { overflow:visible; } }
@media (max-width: 760px) {
  body.phase2-workspace .workspace-grid[data-workspace-ready="true"] { grid-template-columns:minmax(0,1fr) !important; padding-bottom:58px; }
  body.phase2-workspace .workspace-grid[data-workspace-ready="true"] > .ws-rail { position:fixed; z-index:72; left:0; right:0; bottom:0; width:100% !important; height:58px; flex-direction:row !important; align-items:center; overflow-x:auto !important; overflow-y:hidden; border-right:0; border-top:1px solid var(--ws-border); background:var(--ws-surface); }
  .phase2-workspace .ws-rail-collapse,.phase2-workspace .ws-rail .ws-rail-mode small { display:none; }
  .phase2-workspace .ws-rail .ws-grid-toolbar-host { flex:1; }.phase2-workspace .sl-grid-toolbar-rail { display:flex !important; flex-direction:row !important; width:max-content; }
  .phase2-workspace .sl-grid-toolbar-rail .sl-tool-button { width:48px; min-width:48px; min-height:46px; }.phase2-workspace .sl-grid-toolbar-rail .sl-tool-label { display:none; }.phase2-workspace .sl-rail-menu { width:48px; }
  body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-tool-button,body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-rail-menu,body.phase2-workspace .ws-rail .sl-grid-toolbar-rail > .sl-rail-menu > summary.sl-tool-button { width:48px !important; min-width:48px !important; height:46px !important; min-height:46px !important; }
  /* ≤760px 时左轨是贴底的横向条（overflow-y: hidden，高度 58px），
     就地展开会被条高裁掉。和坞的镜像菜单同样的处理：fixed 浮到条上方，脱离裁剪。
     （pixler-skin.css 里对坞的 .sl-tool-menu 踩过同一个坑：注释写着
     「实测 18 个工具只有 6 个能点到」。） */
  .phase2-workspace .sl-rail-menu .sl-tool-menu { position: fixed !important; left: 8px !important; right: 8px !important; bottom: 64px !important; top: auto !important; width: auto !important; z-index: 90; }.phase2-workspace .ws-brand { min-width:36px; }.phase2-workspace .ws-brand span { display:none; }
  .phase2-workspace .ws-project-identity { min-width:90px; }
}
.ws-canvas-well { touch-action: none; }
.ws-touch-bar { position:absolute; bottom:68px; left:50%; transform:translateX(-50%); z-index:25; display:flex; gap:12px; align-items:center; padding:10px 14px; background:var(--ds-color-surface); border:1px solid var(--ds-color-border); border-radius:14px; box-shadow:0 4px 20px #0002; }
.ws-touch-bar[hidden], .ws-touch-cursor[hidden] { display:none; }
.ws-touch-bar button { min-height:44px; padding:8px 18px; touch-action:none; }
.ws-touch-bar button:active { background:var(--ds-color-accent-soft); }
.ws-touch-cursor { position:absolute; z-index:12; width:24px; height:24px; transform:translate(-50%,-50%); border:2px solid var(--ds-color-accent); border-radius:50%; box-shadow:0 0 0 2px white; pointer-events:none; }
.ws-version-list { display:grid; gap:8px; margin-top:10px; }
.ws-version-card { border:1px solid var(--ds-color-border); border-radius:10px; padding:10px; }
.ws-version-card small { display:block; margin:4px 0 8px; }
.ws-available-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(95px,1fr)); gap:6px; max-height:55vh; overflow:auto; }
.ws-available-grid label { display:flex; gap:5px; align-items:center; min-height:36px; }
.ws-available-grid i { width:18px; height:18px; border:1px solid var(--ds-color-border); border-radius:4px; }
.ws-mobile-panel-close { display:none; }
/* Contextual controls and live palette share the warm-white chrome. */
.phase2-workspace { font-size: 14px; line-height: 1.45; }
.phase2-workspace :is(button, input, select, textarea, output) { font-family: var(--ds-font-ui); }
.phase2-workspace .ws-inspector-scroll { padding: 12px 14px 18px; }
.phase2-workspace .ws-section-title { color: var(--ws-text); font-size: 13px; font-weight: 650; }
.phase2-workspace .ws-rail-mode { width: 44px; min-height: 44px; border-radius: 8px; }
.phase2-workspace .ws-rail-mode.active { color: var(--ws-accent); border-color: var(--ws-accent); background: var(--ws-accent-soft); }
#ws-tool-options { min-width: 0; min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 6px 12px; border-bottom: 1px solid var(--ws-border); background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 13px; }
#ws-tool-options .ws-context-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
#ws-tool-options .ws-context-group[hidden] { display: none; }
#ws-context-tool-label { color: var(--ws-text); font-weight: 650; white-space: nowrap; }
#ws-tool-options :is(select, input[type="number"], button) { min-height: 30px; border: 1px solid var(--ws-border); border-radius: 6px; background: var(--ws-surface); color: var(--ws-text); padding: 3px 8px; font-size: 13px; }
#ws-tool-options input[type="range"] { width: 100px; }
#ws-selection-buttons { display:flex; flex-wrap:wrap; gap:5px; }
#ws-tool-options .ws-context-group > label[hidden] { display:none!important; }
#ws-tool-options #ws-selection-buttons button[aria-pressed="true"] { background:var(--ws-accent);color:var(--ds-color-on-accent);border-color:var(--ws-accent); }
.ws-output-menu { position: relative; flex: 0 0 auto; }
.ws-output-menu > summary { list-style: none; cursor: pointer; }
.ws-output-menu > summary::-webkit-details-marker { display: none; }
.ws-output-menu > :not(summary) { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 8px; border: 1px solid var(--ws-border); border-radius: 15px; background: var(--ws-surface); box-shadow: var(--ds-shadow-overlay); z-index: 2200; }
.ws-output-menu > :not(summary) button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; text-align: left; border-radius: 6px; }
/* 无类名按钮的安全样式：UA 默认 buttonface(#efefef) 会在暗色主题下露白 */
.ws-output-menu > :not(summary) button { background: transparent; }
.ws-output-menu > :not(summary) button:hover { background: var(--ds-color-surface-soft); }
body.phase2-workspace .sl-panel-section > button:not([class]),
body.phase2-workspace .sl-generation-panel button:not([class]),
body.phase2-workspace .ws-project-information button:not([class]),
body.phase2-workspace .ws-color-picker button:not([class]) { min-height: 30px; padding: 0 12px; border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm); background: var(--ds-color-surface); color: var(--ws-text); font-size: 13px; cursor: pointer; }
body.phase2-workspace .sl-panel-section > button:not([class]):hover,
body.phase2-workspace .sl-generation-panel button:not([class]):hover,
body.phase2-workspace .ws-project-information button:not([class]):hover,
body.phase2-workspace .ws-color-picker button:not([class]):hover { border-color: var(--ds-color-border-strong); background: var(--ds-color-surface-soft); }
#ws-canvas-stats.ws-usage-band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; justify-content: stretch; padding: 6px 12px; background: var(--ws-surface); border-top: 1px solid var(--ws-border); }
.ws-usage-band .ws-usage-totals { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: 13px; }
.ws-usage-band .ws-usage-totals strong { font-size: 14px; }
.ws-usage-band .ws-usage-band-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ws-usage-band #ws-usage-strip { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: row; gap: 6px; margin: 0; padding: 2px 0 4px; overflow-x: auto; overscroll-behavior-inline: contain; }
.ws-usage-band #ws-usage-strip .ws-usage-card { display: grid; grid-template-columns: 20px auto; align-items: center; justify-items: start; gap: 3px 6px; min-width: 78px; min-height: 40px; padding: 5px 8px; border-radius: 0; }
.ws-usage-band .ws-usage-card .ws-swatch { grid-row: 1 / 3; width: 20px; height: 26px; border-radius: 4px; }
.ws-usage-band .ws-usage-card small, .ws-usage-band .ws-usage-card em { font-size: 12px; }
.ws-usage-band #ws-usage-actions, .ws-usage-band #ws-usage-similar-list { grid-column: 1 / -1; }
body.ws-output-preview .ws-canvas-well { background: var(--ws-canvas); }
#ws-build-return { min-height: 34px; padding: 6px 12px; border-radius: 7px; color: var(--ws-accent); background: var(--ws-accent-soft); border: 1px solid var(--ws-accent); }
@media (max-width: 1024px) { #ws-tool-options { gap: 6px 10px; padding-inline: 10px; } }
@media (max-width: 768px) { #ws-tool-options { font-size: 13px; max-height: 100px; overflow-y: auto; } #ws-tool-options input[type="range"] { width: 78px; } #ws-canvas-stats.ws-usage-band { padding: 6px 8px; gap: 5px; } .ws-usage-band .ws-usage-totals { font-size: 12px; } .ws-usage-band .ws-usage-band-tools { font-size: 12px; } .ws-output-menu > :not(summary) { max-width: calc(100vw - 20px); } }
@media (prefers-reduced-motion: reduce) { .phase2-workspace * { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; } }
/* Rail menus live outside the scrolling rail, so neither overflow clipping nor
   narrow two/three-column menu rules can compress their action rows. */
body.phase2-workspace .sl-tool-menu.sl-rail-popover {
  position:fixed !important; right:auto !important; bottom:auto !important; margin:0 !important;
  display:grid; grid-template-columns:minmax(0,1fr) !important; gap:4px;
  max-height:65dvh; overflow-y:auto; overflow-x:hidden; padding:8px;
  border:1px solid var(--ws-border); border-radius:12px;
  background:var(--ds-color-surface); color:var(--ws-text); box-shadow:0 10px 32px #1111111f; z-index:2200;
}
body.phase2-workspace .sl-tool-menu.sl-rail-popover .sl-tool-button {
  box-sizing:border-box; display:flex !important; flex-direction:row !important;
  align-items:center; justify-content:flex-start; gap:12px; width:100% !important;
  min-width:0; min-height:44px !important; height:auto !important; flex-basis:auto;
  padding:9px 12px; border-radius:7px; white-space:nowrap;
}
body.phase2-workspace .sl-tool-menu.sl-rail-popover .sl-tool-label { display:block !important; font-size:13px; }
body.phase2-workspace .sl-tool-menu.sl-rail-popover .sl-tool-icon { flex:0 0 24px; }
@media(max-width:768px) {
  body.phase2-workspace .workspace-grid[data-workspace-ready="true"] > .ws-rail { z-index:2001; }
  body.phase2-workspace .ws-rail .sl-grid-toolbar-rail { flex-direction:row !important; width:max-content; max-width:none; }
  body.phase2-workspace .ws-dock { position:fixed; left:0; right:0; bottom:58px; height:36px; }
  body.phase2-workspace .workspace-grid[data-workspace-ready="true"] > .ws-inspector { position:fixed; z-index:70; left:8px; right:8px; bottom:100px; top:auto; width:auto; max-height:65dvh; border:1px solid var(--ws-border); border-radius:16px 16px 8px 8px; box-shadow:0 -4px 20px #0001; }
  body.phase2-workspace .ws-inspector:not(.is-mobile-panel-open) .ws-inspector-head,
  body.phase2-workspace .ws-inspector:not(.is-mobile-panel-open) .ws-inspector-scroll { display:none; }
  body.phase2-workspace .ws-inspector .ws-inspector-scroll { min-height:0; max-height:calc(70dvh - 85px); overflow:auto; }
  body.phase2-workspace .ws-inspector .ws-side-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; flex-shrink:0; }
  body.phase2-workspace .ws-inspector .ws-side-tabs button { flex-shrink:0; }
  .ws-mobile-panel-close { display:block; margin-left:auto; min-height:36px; }
  .ws-touch-bar { position:fixed; bottom:150px; width:max-content; max-width:calc(100% - 24px); }
  .ws-version-dialog, .ws-available-dialog { width:calc(100vw - 20px); max-width:none; max-height:90dvh; margin:auto auto 0; border-radius:18px 18px 0 0; }
}
/* QA: content-sized tools, a real two-row mobile header and reserved fixed chrome. */
body.phase2-workspace .ws-rail .sl-grid-toolbar-rail { height: auto !important; justify-content: flex-start !important; }
#ws-context-text-controls { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
#ws-context-text-controls .ws-field { display: flex; align-items: center; gap: 6px; margin: 0; width: auto; }
#ws-context-text-controls .ws-field :is(input, select, textarea) { max-width: 150px; min-width: 0; }
#ws-context-text-controls .ws-source-slider { display: flex; align-items: center; gap: 5px; margin: 0; }
#ws-context-text-controls .ws-source-slider input { width: 90px; }
#ws-context-text-controls :is(.ws-recent-colors, .ws-source-buttons) { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.ws-canvas-secondary-hint { display: none; }
.ws-color-picker { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.ws-color-picker > input { min-width: 0; flex: 1; }
.ws-color-picker-preview { flex: 0 0 22px; height: 22px; border: 1px solid var(--ws-border); border-radius: 4px; }
.ws-color-picker > button { min-height: 34px; padding: 5px 8px; border: 1px solid var(--ws-border); border-radius: 6px; }
.ws-color-picker-popup { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 100; background: var(--ws-surface); border: 1px solid var(--ws-border); padding: 8px; border-radius: 8px; box-shadow: var(--ds-shadow-overlay); }
.ws-color-picker-popup[hidden] { display: none; }
.ws-color-picker-results { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; max-height: 220px; overflow: auto; }
.ws-color-picker-option { display: flex; align-items: center; gap: 5px; min-height: 38px; padding: 4px; border: 1px solid var(--ws-border); border-radius: 5px; font-size: 12px; }
.ws-color-picker-option i { width: 18px; height: 22px; flex-shrink: 0; border: 1px solid #0002; border-radius: 3px; }
@media (max-width: 768px) {
  body.phase2-workspace .workspace-wrap { grid-template-rows: 80px auto minmax(0,1fr) 0 !important; }
  body.phase2-workspace .ws-topbar { height: 80px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; grid-template-rows: 34px 34px; gap: 4px 6px; padding: 4px 8px; }
  .phase2-workspace .ws-topbar .ws-brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .phase2-workspace .ws-topbar .ws-project-identity { grid-column: 2 / 5; grid-row: 1; min-width: 0; width: 100%; }
  .phase2-workspace .ws-topbar .ws-name { max-width: none; width: 100%; }
  .phase2-workspace .ws-topbar .ws-topbar-spacer { display: none; }
  .phase2-workspace .ws-topbar .ws-history-actions { grid-column: 1 / 3; grid-row: 2; }
  .phase2-workspace .ws-topbar .ws-project-menu { grid-column: 3; grid-row: 1; }
  .phase2-workspace .ws-topbar #ws-edit-actions { grid-column: 3; grid-row: 2; }
  .phase2-workspace .ws-topbar #ws-output-menu { grid-column: 4; grid-row: 2; }
  .phase2-workspace .ws-topbar .ws-project-identity { grid-column: 2; }
  .phase2-workspace .ws-topbar .ws-membership-status { grid-column: 4; grid-row: 1; max-width: 82px; font-size: 11px; padding: 3px; }
  .phase2-workspace .ws-topbar :is(.ws-project-menu, .ws-output-menu) > summary { padding: 4px 7px; font-size: 12px; }
  body.phase2-workspace .workspace-grid[data-workspace-ready="true"] { box-sizing: border-box; padding-bottom: 146px !important; height: 100%; }
  body.phase2-workspace .ws-rail .ws-grid-toolbar-host { flex: 1 0 auto; width: auto; }
  #ws-context-text-controls { gap: 6px; }
  #ws-context-text-controls .ws-field :is(input, textarea) { max-width: 110px; }
  #ws-context-text-controls .ws-source-slider input { width: 64px; }
}
/* Cell recommendations share canonical palette identity; these are presentation-only overlays. */
.ws-cell-color-popover{position:absolute;z-index:35;width:max-content;max-width:calc(100% - 16px);box-sizing:border-box;padding:4px;background:var(--ds-color-overlay);border:1px solid var(--ds-color-border);border-radius:8px;box-shadow:0 4px 16px #1111111f;color:var(--ds-color-text)}
.ws-cell-color-popover[hidden]{display:none}
.ws-cell-color-popover-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;margin-bottom:3px}
.ws-cell-color-popover-head button{border:0;background:transparent;font-size:20px;line-height:20px;cursor:pointer}
.ws-cell-color-groups{display:flex;gap:0;flex-wrap:nowrap;overflow-x:auto;max-width:390px}
.ws-cell-color-group{min-width:0;flex:0 0 auto}
.ws-cell-color-group+.ws-cell-color-group{border-left:1px solid var(--ds-color-border);padding-left:3px;margin-left:3px}
.ws-cell-color-group-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ws-cell-color-suggestions{display:flex;gap:var(--swatch-gap)}
.ws-cell-color-reason{display:block;margin-top:6px;font-size:10px;color:var(--ds-color-text-secondary)}
.ws-cell-color-suggestions button{width:24px;height:24px;min-height:0;flex:0 0 24px;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
/* 目标色块（正在被替换的那个）：同款框线，只是换成实线粗框 + 更重的调和 —— 与虚线候选一眼分开。
   2026-10-19 前这里是 1px 虚线 outline；用户要求色块一律用实线框标选中/目标。 */
.ws-cell-color-suggestions button.is-target span{
  border:var(--swatch-frame-on) solid rgba(20,18,15,.72);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-on-tint),var(--swatch-frame-ink))}
.ws-cell-color-suggestions span{display:grid;place-items:center;width:100%;height:100%;aspect-ratio:1;border-radius:0;box-sizing:border-box;
  border:var(--swatch-frame-idle) dashed rgba(20,18,15,.45);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-tint),var(--swatch-frame-ink))}
.ws-cell-color-suggestions small{display:block;margin:0;font-size:10px;font-weight:400;line-height:1;white-space:nowrap}
.ws-cell-color-actions{display:flex;gap:5px;margin-top:4px}
.ws-cell-color-actions button{flex:none;width:28px;height:28px;min-height:0;padding:4px;border:1px solid var(--ds-color-border);border-radius:0;background:var(--ds-color-surface);cursor:pointer}
.ws-cell-color-actions svg{width:100%;height:100%}
.ws-cell-color-target{display:grid;place-items:center;flex:none;width:24px;height:24px;min-width:0;min-height:0;padding:0;aspect-ratio:1;font-size:10px;font-weight:400;white-space:nowrap;box-sizing:border-box;cursor:pointer;
  border:var(--swatch-frame-on) solid rgba(20,18,15,.5);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-on-tint),var(--swatch-frame-ink))}
.ws-cell-color-target[hidden]{display:none}
body.phase2-workspace .workspace-wrap .ws-cell-color-popover{display:flex;align-items:center;gap:3px;padding:4px;border-radius:0}
body.phase2-workspace .workspace-wrap .ws-cell-color-popover[hidden]{display:none}
body.phase2-workspace .workspace-wrap .ws-cell-color-popover :is(.ws-cell-color-suggestions button,.ws-cell-color-suggestions span,.ws-cell-color-actions button){border-radius:0;transform:none;transition:none}
body.phase2-workspace .workspace-wrap .ws-cell-color-popover .ws-cell-color-suggestions button{width:24px;height:24px;min-width:0;min-height:0;padding:0;border:0;flex:0 0 24px}
body.phase2-workspace .workspace-wrap .ws-cell-color-popover :is(.ws-cell-color-suggestions small,.ws-cell-color-target){font-size:10px;font-weight:400;line-height:1;white-space:nowrap;overflow-wrap:normal;word-break:normal}
.ws-cell-color-actions button:disabled{opacity:.45;cursor:default}
.ws-cell-selected-marker{position:absolute;z-index:34;pointer-events:none;overflow:visible}
.ws-cell-selected-marker rect{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.ws-cell-ant-base{stroke:#fff}.ws-cell-ant-dashes{stroke:var(--ds-color-text);stroke-dasharray:5 5;animation:ws-cell-ants 6s linear infinite}
@keyframes ws-cell-ants{to{stroke-dashoffset:-20}}
.ws-usage-strip button.ws-usage-card.active { position: relative; }
.ws-usage-card.active::after { content: ""; pointer-events: none; position: absolute; inset: -1px; border-radius: inherit; background: repeating-linear-gradient(90deg,var(--ws-accent) 0 5px,transparent 5px 10px) top left/200% 1px no-repeat,repeating-linear-gradient(90deg,var(--ws-accent) 0 5px,transparent 5px 10px) bottom right/200% 1px no-repeat,repeating-linear-gradient(0deg,var(--ws-accent) 0 5px,transparent 5px 10px) left bottom/1px 200% no-repeat,repeating-linear-gradient(0deg,var(--ws-accent) 0 5px,transparent 5px 10px) right top/1px 200% no-repeat; animation: ws-usage-ants 24s linear infinite; }
@keyframes ws-usage-ants { to { background-position: top right,bottom left,left top,right bottom; } }
@media(prefers-reduced-motion:reduce){.ws-usage-card.active::after{animation:none}}
@media(prefers-reduced-motion:reduce){.ws-cell-ant-dashes{animation:none}}

/* Work areas change panel visibility, never the canvas/history instance. */
.ws-topbar{flex-wrap:wrap;height:auto;min-height:58px;gap:7px}
.ws-workareas,.ws-output-tasks{display:flex;align-items:center;gap:4px}
.ws-workareas{margin-left:auto;background:var(--ws-canvas);padding:3px;border-radius:8px}
.ws-workareas button,.ws-output-tasks button{border:1px solid transparent;background:transparent;color:var(--ws-text-secondary);border-radius:6px;min-height:34px;padding:6px 9px;white-space:nowrap;font-size:12px;cursor:pointer}
.ws-workareas button.active,.ws-output-tasks button.active{background:var(--ws-surface);color:var(--ws-accent);border-color:var(--ws-border);box-shadow:0 1px 3px #00000008}
.ws-side-tabs [hidden],.ws-export-drawer [data-output-panel][hidden],.ws-field[hidden]{display:none!important}
.ws-selection-actionbar[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.ws-side-tabs{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
.ws-project-identity #ws-project-info{font-size:10px;padding:2px 4px;min-height:22px;border:0;background:none;color:var(--ws-text-secondary);cursor:pointer}
.ws-selection-actionbar{display:flex;align-items:center;gap:5px;padding:5px 9px;background:var(--ws-surface);border-bottom:1px solid var(--ws-border);overflow-x:auto;white-space:nowrap}
.ws-selection-actionbar strong{font-size:11px;color:var(--ws-text-secondary);margin-right:auto}
.ws-selection-actionbar button,.ws-shape-kinds button{font-size:11px;padding:4px 7px;border:1px solid var(--ws-border);background:var(--ws-surface);color:var(--ws-text);border-radius:5px;white-space:nowrap;cursor:pointer}
.ws-canvas-area:has(#ws-selection-actionbar){grid-template-rows:auto minmax(0,1fr) auto auto auto}
.ws-export-drawer{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto}
.ws-output-tasks{position:sticky;top:0;z-index:2;background:var(--ws-surface);padding:6px 0;border-bottom:1px solid var(--ws-border);margin-bottom:10px}
.ws-output-tasks button{flex:1;padding:5px;font-size:11px}
.ws-export-drawer[data-output-current="poster"]{width:min(760px,calc(100vw - 24px))}
.ws-export-drawer [data-output-panel="poster"]>.ws-export-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;align-items:start}
.ws-export-drawer [data-output-panel="poster"]>.ws-export-options>strong{grid-column:1/-1}
.ws-export-drawer [data-output-panel="poster"] #ws-poster-preview{grid-column:1;grid-row:2/span 18;width:100%;height:auto;position:sticky;top:58px}
.ws-export-drawer [data-output-panel="poster"]>.ws-export-options>:not(strong):not(canvas){grid-column:2}
.ws-feature-search{width:min(420px,calc(100vw - 32px));max-height:80dvh;border:1px solid var(--ws-border);border-radius:12px;padding:16px;color:var(--ws-text);background:var(--ws-surface)}
.ws-feature-search::backdrop{background:var(--ds-color-backdrop)}
.ws-feature-search input{box-sizing:border-box;width:100%;padding:10px;border:1px solid var(--ws-border);border-radius:7px;margin:10px 0}
.ws-feature-results{display:grid;gap:5px;max-height:55dvh;overflow:auto}
.ws-feature-results button{text-align:left;min-height:38px;border:1px solid var(--ws-border);border-radius:6px;padding:7px 10px;color:var(--ws-text);background:var(--ws-canvas);cursor:pointer}
.phase2-workspace .sl-grid-toolbar-rail .sl-tool-label{display:block;font-size:9px;line-height:12px;margin-top:1px}
@media(max-width:760px){
  .ws-workareas{order:10;margin-left:0;flex:1 0 100%;justify-content:space-between}
  .ws-workareas button{flex:1;font-size:11px;min-height:40px;padding:5px 3px}
  .ws-topbar{padding:5px 8px;gap:5px}
  .ws-selection-actionbar button{min-height:36px}
  .ws-output-tasks button{min-height:44px}
  .ws-export-drawer{max-height:calc(100dvh - 12px)}
  .ws-export-drawer [data-output-panel="poster"]>.ws-export-options{grid-template-columns:1fr}
  .ws-export-drawer [data-output-panel="poster"] #ws-poster-preview{grid-column:1;grid-row:auto;position:static;max-width:300px;justify-self:center}
  .ws-export-drawer [data-output-panel="poster"]>.ws-export-options>:not(strong):not(canvas){grid-column:1}
  .ws-feature-results button{min-height:44px}
}

/* Final six-step workspace overrides (kept after legacy responsive rules). */
@media(min-width:1201px){body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:var(--ws-pal-col,240px) minmax(0,1fr) var(--ws-task-col,300px)!important}body.phase2-workspace .workspace-grid>.ws-center{grid-column:2;grid-row:1}body.phase2-workspace .workspace-grid>.ws-rail{display:none!important}body.phase2-workspace .workspace-grid>.ws-palette-summary{grid-column:1;grid-row:1}}
@media(max-width:1200px) and (min-width:761px){body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:270px minmax(0,1fr) 250px!important}body.phase2-workspace .workspace-grid>.ws-center{grid-column:2;grid-row:1}body.phase2-workspace .workspace-grid>.ws-rail{display:none!important}body.phase2-workspace .workspace-grid>.ws-palette-summary{grid-column:3;grid-row:1}}
body.phase2-workspace .ws-parameter-inspector .ws-inspector-scroll{display:flex;flex-direction:column;gap:12px;padding:12px;overflow:auto}
body.phase2-workspace .ws-top-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:36px 24px;align-items:center;gap:2px 8px;padding:4px 10px;overflow:hidden}
body.phase2-workspace .ws-top-controls>#gridEditorToolbar{grid-column:1;grid-row:1;min-width:0;overflow-x:auto;overflow-y:hidden}
body.phase2-workspace .ws-top-controls>.ws-history-actions{grid-column:2;grid-row:1}
body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:3;grid-row:1}
body.phase2-workspace .ws-top-controls>#ws-tool-options{grid-column:1/-1;grid-row:2;display:flex;align-items:center;min-width:0;height:24px;min-height:24px;max-height:24px;overflow-x:auto;overflow-y:hidden;gap:6px;padding:0;border:0;background:transparent}
body.phase2-workspace .ws-top-controls>#ws-tool-options[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options>strong{display:none}
body.phase2-workspace .ws-icon-tool-options{display:flex;align-items:center;gap:4px;flex:0 0 auto}
body.phase2-workspace .ws-icon-tool-options[hidden],body.phase2-workspace .ws-context-group[hidden]{display:none!important}
body.phase2-workspace .ws-icon-tool-options-button,body.phase2-workspace .ws-icon-tool-options>button{display:inline-grid;place-items:center;position:relative;box-sizing:border-box;width:26px;height:24px;min-height:24px;padding:1px;border:1px solid var(--ws-border);border-radius:7px;background:var(--ws-surface);color:var(--ws-text-secondary);cursor:pointer}
body.phase2-workspace .ws-icon-tool-options-button[aria-pressed="true"],body.phase2-workspace .ws-icon-tool-options>button[aria-pressed="true"]{background:var(--ws-accent);border-color:var(--ws-accent);color:var(--ds-color-on-accent)}
body.phase2-workspace .ws-icon-tool-options svg{width:16px;height:16px}
body.phase2-workspace .ws-step-content>.ws-panel:not([hidden]){display:block!important;min-width:0}
body.phase2-workspace #ws-tool-options .ws-icon-tool-options-button,body.phase2-workspace #ws-tool-options .ws-icon-tool-options>button{height:24px;min-height:24px!important;padding:1px}
body.phase2-workspace #ws-size-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
body.phase2-workspace #ws-size-controls .ws-size-chips{display:flex;gap:4px}
body.phase2-workspace #ws-size-controls .ws-size-slider{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
body.phase2-workspace #ws-size-controls .ws-size-slider input[type="number"]{width:68px}
@media(max-width:760px){body.phase2-workspace .ws-top-controls{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px 24px}body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:2}body.phase2-workspace .ws-top-controls>.ws-history-actions{display:none}}

/* Final ID-specific override: legacy #ws-top-controls rules above used to
   constrain tool parameters to 24px and clip their overflow. */
body.phase2-workspace #ws-top-controls{height:auto!important;min-height:42px!important;max-height:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;grid-template-rows:minmax(40px,auto) auto!important;align-items:start!important;overflow:visible!important}
body.phase2-workspace #ws-top-controls>#gridEditorToolbar{grid-column:1!important;grid-row:1!important;min-width:0;overflow-x:auto;overflow-y:hidden}
body.phase2-workspace #ws-top-controls>.ws-v3-shortcuts{grid-column:2!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>.ws-history-actions{grid-column:3!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>#zoomControls{grid-column:4!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>#ws-tool-options:not([hidden]){grid-column:1/-1!important;grid-row:2!important;display:flex!important;height:auto!important;min-height:30px!important;max-height:none!important;overflow:visible!important;align-self:start}
body.phase2-workspace #ws-top-controls>#ws-tool-options[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options .ws-context-group[hidden],body.phase2-workspace #ws-tool-options .ws-icon-tool-options[hidden]{display:none!important}
@media(max-width:760px){body.phase2-workspace #ws-top-controls{grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:minmax(38px,auto) auto!important}body.phase2-workspace #ws-top-controls>.ws-v3-shortcuts{grid-column:2!important}body.phase2-workspace #ws-top-controls>.ws-history-actions{display:none!important}body.phase2-workspace #ws-top-controls>#zoomControls{grid-column:3!important}}

/* Final ID-specific override: legacy #ws-top-controls rules above used to
   constrain tool parameters to 24px and clip their overflow. */
body.phase2-workspace #ws-top-controls{height:auto!important;min-height:42px!important;max-height:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;grid-template-rows:minmax(40px,auto) auto!important;align-items:start!important;overflow:visible!important}
body.phase2-workspace #ws-top-controls>#gridEditorToolbar{grid-column:1!important;grid-row:1!important;min-width:0;overflow-x:auto;overflow-y:hidden}
body.phase2-workspace #ws-top-controls>.ws-v3-shortcuts{grid-column:2!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>.ws-history-actions{grid-column:3!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>#zoomControls{grid-column:4!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>#ws-tool-options:not([hidden]){grid-column:1/-1!important;grid-row:2!important;display:flex!important;height:auto!important;min-height:30px!important;max-height:none!important;overflow:visible!important;align-self:start}
body.phase2-workspace #ws-top-controls>#ws-tool-options[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options .ws-context-group[hidden],body.phase2-workspace #ws-tool-options .ws-icon-tool-options[hidden]{display:none!important}
@media(max-width:760px){body.phase2-workspace #ws-top-controls{grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:minmax(38px,auto) auto!important}body.phase2-workspace #ws-top-controls>.ws-v3-shortcuts{grid-column:2!important}body.phase2-workspace #ws-top-controls>.ws-history-actions{display:none!important}body.phase2-workspace #ws-top-controls>#zoomControls{grid-column:3!important}}

/* Final flow sizing: tool parameters occupy a real second row and never overlap the canvas. */
body.phase2-workspace .ws-top-controls{height:auto!important;min-height:42px;max-height:none;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-rows:minmax(40px,auto) auto;align-items:start;overflow:visible!important}
body.phase2-workspace .ws-top-controls>#gridEditorToolbar{grid-column:1;grid-row:1;min-width:0;overflow-x:auto;overflow-y:hidden}
body.phase2-workspace .ws-top-controls>.ws-v3-shortcuts{grid-column:2;grid-row:1}
body.phase2-workspace .ws-top-controls>.ws-history-actions{grid-column:3;grid-row:1}
body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:4;grid-row:1}
body.phase2-workspace .ws-top-controls>#ws-tool-options:not([hidden]){grid-column:1/-1;grid-row:2;height:auto!important;min-height:30px;max-height:none!important;overflow:visible!important;align-self:start}
body.phase2-workspace .ws-top-controls>#ws-tool-options[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options .ws-context-group[hidden],body.phase2-workspace #ws-tool-options .ws-icon-tool-options[hidden]{display:none!important}
body.phase2-workspace .ws-text-font-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}
body.phase2-workspace .ws-text-font-load{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 10px;border:1px solid var(--ws-border);border-radius:8px;white-space:nowrap;cursor:pointer}
body.phase2-workspace .ws-text-font-load input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
body.phase2-workspace .ws-text-editor textarea,
body.phase2-workspace .ws-qr-editor textarea{width:100%;min-height:68px;resize:vertical;box-sizing:border-box}
body.phase2-workspace .ws-text-style{align-items:center;flex-wrap:wrap}
body.phase2-workspace .ws-text-style>label{display:inline-flex;align-items:center;gap:5px}
body.phase2-workspace .ws-text-style input[type=number]{width:76px}
body.phase2-workspace .ws-text-style input[type=color],body.phase2-workspace .ws-text-effect-group input[type=color]{width:38px;height:32px;padding:2px}
body.phase2-workspace .ws-text-effect-group{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0;padding:8px;border:1px solid var(--ws-border);border-radius:8px}
body.phase2-workspace .ws-text-effect-group legend{padding:0 5px;font-weight:650}
body.phase2-workspace .ws-text-effect-group input[type=range]{width:min(150px,35vw)}
/* 文字渐变预设（2026-10-19）：一排带预览的小色条，「看样子选」而不是读色号。
   色点全部由当前色卡派生，预览条方向与真实渐变一致。 */
body.phase2-workspace .ws-text-gradient-presets{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin:0 0 6px}
body.phase2-workspace .ws-text-gradient-preset{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border:1px solid var(--ws-border);border-radius:999px;background:var(--ws-surface);color:var(--ws-text);font-size:11px;line-height:1.4;cursor:pointer}
body.phase2-workspace .ws-text-gradient-preset:hover{border-color:var(--ws-accent)}
body.phase2-workspace .ws-text-gradient-preset .ws-text-gradient-preview{display:block;width:28px;height:14px;border-radius:999px;border:1px solid rgba(20,18,15,.18)}
body.phase2-workspace .ws-text-gradient-preset.is-on{border-color:var(--ws-accent);box-shadow:0 0 0 1px var(--ws-accent)}
body.phase2-workspace .ws-text-gradient-preset:disabled{opacity:.45;cursor:default}
@media(max-width:760px){body.phase2-workspace .ws-top-controls{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:minmax(38px,auto) auto}body.phase2-workspace .ws-top-controls>.ws-v3-shortcuts{grid-column:2}body.phase2-workspace .ws-top-controls>.ws-history-actions{display:none}body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:3}}

/* Final flow contract: expansion always pushes the parameter row down. */
body.phase2-workspace .ws-top-controls{height:auto;min-height:40px;max-height:none;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-rows:minmax(40px,auto) auto;align-items:start;overflow:visible}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-grid-toolbar-rail{justify-content:flex-start!important;gap:3px;width:max-content;min-width:0;max-width:none}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-toolbar-group{justify-content:flex-start;flex:0 0 auto}
body.phase2-workspace .ws-top-controls>.ws-v3-shortcuts{grid-column:2;grid-row:1;align-self:center}
body.phase2-workspace .ws-top-controls>.ws-history-actions{grid-column:3;grid-row:1}
body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:4;grid-row:1}
body.phase2-workspace .ws-top-controls>#ws-tool-options:not([hidden]){grid-column:1/-1;grid-row:2;min-height:30px;height:auto!important;max-height:none!important;overflow:visible;align-self:start}
@media(max-width:760px){body.phase2-workspace .ws-top-controls{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:minmax(38px,auto) auto}body.phase2-workspace .ws-top-controls>.ws-v3-shortcuts{grid-column:2}body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:3}body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-grid-toolbar-rail{min-width:max-content}}

/* Context toolbar: one compact icon row, followed by its own flow-sized
   parameter row. Active tool names expand horizontally; siblings stay icons. */
body.phase2-workspace .ws-top-controls{
  height:auto;min-height:40px;max-height:none;
  grid-template-rows:minmax(40px,auto) auto;align-items:start;overflow:visible
}
body.phase2-workspace .ws-top-controls>#gridEditorToolbar{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-grid-toolbar-rail{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;
  gap:3px;width:max-content;min-width:100%;max-width:none;height:40px;overflow:visible
}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-toolbar-group{display:flex;flex:0 0 auto;align-items:center;gap:2px}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-toolbar-divider{flex:0 0 1px;width:1px;height:24px;margin:0 4px;background:var(--ws-border-strong)}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-button{
  box-sizing:border-box;display:inline-flex!important;flex:0 0 auto!important;flex-direction:row!important;
  align-items:center;justify-content:center;gap:6px;width:36px!important;min-width:36px!important;
  max-width:none;height:36px!important;min-height:36px!important;padding:4px 6px;
  border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ws-text-secondary);
  white-space:nowrap;text-align:left;box-shadow:none
}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-button:hover:not(:disabled),
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-button:focus-visible,
body.phase2-workspace .ws-top-controls #gridEditorToolbar [data-tool-menu][aria-expanded="true"]{
  border-color:var(--ws-border-strong);background:var(--ws-accent-soft);color:var(--ws-accent)
}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-button.is-active{
  width:auto!important;min-width:72px!important;padding-inline:9px;border-color:var(--ws-accent);
  background:var(--ws-accent-soft);color:var(--ws-accent);font-weight:650
}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-label{display:none!important;margin:0;font-size:12px;line-height:1;white-space:nowrap}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-button.is-active .sl-tool-label,
body.phase2-workspace .ws-top-controls #gridEditorToolbar [data-tool-menu][aria-expanded="true"] .sl-tool-label{display:inline!important}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-icon{display:inline-flex;flex:0 0 20px;width:20px;height:20px;align-items:center;justify-content:center}
body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-icon svg{width:20px;height:20px}
body.phase2-workspace .ws-top-controls>#ws-tool-options:not([hidden]){
  display:flex!important;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:5px 10px;
  box-sizing:border-box;height:auto!important;min-height:30px;max-height:none!important;overflow:visible;
  padding:4px 8px;border-top:1px solid var(--ws-border);border-bottom:0
}
body.phase2-workspace #ws-tool-options .ws-context-group{display:flex;flex:0 1 auto;align-items:center;flex-wrap:wrap;gap:5px 8px;min-width:0}
body.phase2-workspace #ws-tool-options .ws-icon-tool-options{display:inline-flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;gap:4px}
body.phase2-workspace #ws-tool-options .ws-icon-tool-options>button,
body.phase2-workspace #ws-tool-options .ws-icon-tool-options-button{
  display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;width:34px;height:30px;min-height:30px;padding:3px 7px;overflow:hidden;
  border:1px solid var(--ws-border);border-radius:7px;background:var(--ws-surface);color:var(--ws-text-secondary);
  white-space:nowrap
}
body.phase2-workspace #ws-tool-options .ws-icon-tool-options>button[aria-pressed="true"],
body.phase2-workspace #ws-tool-options .ws-icon-tool-options-button[aria-pressed="true"]{
  width:auto;min-width:76px;border-color:var(--ws-accent);background:var(--ws-accent-soft);color:var(--ws-accent);font-weight:650
}
body.phase2-workspace #ws-tool-options .ws-tool-option-label{display:none;font-size:12px;line-height:1;white-space:nowrap}
body.phase2-workspace #ws-tool-options .ws-icon-tool-options>button[aria-pressed="true"] .ws-tool-option-label,
body.phase2-workspace #ws-tool-options .ws-icon-tool-options-button[aria-pressed="true"] .ws-tool-option-label{display:inline}
body.phase2-workspace .ws-top-controls :is(.sl-tool-button,.ws-icon-tool-options-button,.ws-icon-tool-options>button):focus-visible{
  outline:2px solid var(--ws-accent)!important;outline-offset:1px!important;box-shadow:0 0 0 1px var(--ws-surface)
}
@media(max-width:760px){
  body.phase2-workspace .ws-top-controls{grid-template-rows:auto auto;gap:3px 6px}
  body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-grid-toolbar-rail{height:38px;gap:2px}
  body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-button{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:3px}
  body.phase2-workspace .ws-top-controls #gridEditorToolbar .sl-tool-button.is-active{width:auto!important;min-width:68px!important;padding-inline:7px}
  body.phase2-workspace #ws-tool-options .ws-icon-tool-options{flex-wrap:wrap}
}

/* Override the earlier fixed-height desktop/mobile header contract: wrapping
   controls must take up their own grid row rather than paint over tool options. */
body.phase2-workspace .workspace-wrap{grid-template-rows:auto auto minmax(0,1fr) var(--ws-viewbar-height)!important}
body.phase2-workspace .ws-topbar{display:flex;flex-wrap:wrap;height:auto!important;min-height:58px;box-sizing:border-box;overflow:visible;align-content:center;padding-block:6px;gap:7px}
body.phase2-workspace .ws-top-controls{height:auto;min-height:50px;box-sizing:border-box}
.ws-export-drawer [data-output-panel="poster"]>.ws-export-options>label{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;white-space:nowrap;gap:8px;min-width:0}
.ws-export-drawer [data-output-panel="poster"]>.ws-export-options>label :is(select,input){min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.ws-export-drawer [data-output-panel="poster"]>.ws-export-options>label:has(input[type="checkbox"]){display:flex;justify-content:flex-start;white-space:normal}
.ws-export-drawer [data-output-panel="poster"]>.ws-export-options>label input[type="checkbox"]{width:auto;flex:0 0 auto}
@media(max-width:760px){
  body.phase2-workspace .workspace-wrap{grid-template-rows:auto auto minmax(0,1fr) 0!important}
  body.phase2-workspace .ws-topbar{display:flex;height:auto!important;min-height:0;padding:5px 8px;gap:5px}
  body.phase2-workspace .ws-topbar .ws-brand{flex:0 0 34px}
  body.phase2-workspace .ws-topbar .ws-project-identity{flex:1 1 calc(100% - 45px);width:auto}
  body.phase2-workspace .ws-topbar .ws-workareas{order:10;flex:1 0 100%}
  body.phase2-workspace .ws-topbar .ws-project-menu,body.phase2-workspace .ws-topbar .ws-output-menu{flex:0 0 auto}
  body.phase2-workspace .ws-top-controls{height:auto;min-height:44px}
}

/* Context changes never resize the canvas. Scroll options inside this row;
   symmetry is a fixed overlay, outside the scroll clipping rectangle. */
body.phase2-workspace .ws-top-controls{height:72px;min-height:72px;max-height:72px;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;padding:6px 12px;overflow:visible}
body.phase2-workspace #ws-tool-options,body.phase2-workspace #ws-generation-top-controls{flex:1 1 0;min-width:0;max-height:100%;height:100%;display:flex;align-items:center;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;box-sizing:border-box;padding:0;border:0}
body.phase2-workspace #ws-tool-options[hidden],body.phase2-workspace #ws-generation-top-controls[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options .ws-context-group{flex-wrap:nowrap;flex-shrink:0}
body.phase2-workspace #ws-tool-options>strong{flex-shrink:0}
body.phase2-workspace .ws-top-zoom{flex:0 0 auto;margin-left:auto}
body.phase2-workspace .ws-context-symmetry> :not(summary){position:fixed;z-index:100;box-sizing:border-box;width:min(460px,calc(100vw - 16px));max-height:calc(100dvh - 160px);overflow:auto;padding:12px;border:1px solid var(--ws-border);border-radius:10px;background:var(--ws-surface);box-shadow:0 8px 24px #1111111f}
body.phase2-workspace #ws-generation-top-controls .ws-size-block{display:flex;flex:0 0 auto;align-items:center;gap:8px;margin:0;padding:0;border:0;background:transparent}
body.phase2-workspace #ws-generation-top-controls .ws-size-chips{display:flex;gap:4px}
body.phase2-workspace #ws-generation-top-controls .ws-size-slider{display:flex;align-items:center;gap:6px}
body.phase2-workspace #ws-generation-top-controls .ws-size-slider output{display:flex;gap:4px;white-space:nowrap;font-weight:650}
body.phase2-workspace #ws-generation-top-controls .ws-size-slider input[type="range"]{width:110px}
body.phase2-workspace #ws-generation-top-controls .ws-size-slider input[type="number"]{width:60px;min-height:30px;box-sizing:border-box;border:1px solid var(--ws-border);border-radius:6px;padding:3px 6px;background:var(--ws-surface);color:var(--ws-text)}
body.phase2-workspace #ws-generation-background-host{flex:0 0 auto}
body.phase2-workspace #ws-generation-background-controls{margin:0;padding:0;border:0}
/* 阶段 3：背景卡已整体搬进右栏步进卡（step 4），卡片说明文字必须可见。
   原规则按 ID 隐藏 small，权重压过一切类名放行规则（实测三卡说明全被藏）。
   收窄为「仅在紧凑顶栏内」生效 —— moveToStep 用 append 移动语义，搬走后
   容器祖先链里没有 #ws-generation-top-controls，规则自然失效。 */
body.phase2-workspace #ws-generation-top-controls #ws-generation-background-controls small{display:none}
body.phase2-workspace #ws-generation-top-controls :is(.ws-size-authority,.ws-size-tier){max-width:200px;white-space:normal;font-size:11px}
@media(max-width:760px){
  body.phase2-workspace .ws-top-controls{height:72px;min-height:72px;max-height:72px;padding:5px 8px;gap:8px}
  body.phase2-workspace .ws-top-zoom{max-width:46%;overflow-x:auto}
}

/* Stable three-panel studio: palette (left) / canvas (center) / task panels (right).
   阶段 1 对调（原先是 参数检查器 / 画布 / 色板）。列宽走 CSS 变量：
   折叠只改变量表（:has() 规则见「阶段 1」区段），JS 不写布局数字。 */
body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:var(--ws-pal-col,196px) minmax(0,1fr) var(--ws-task-col,240px)!important;position:relative}
body.phase2-workspace .workspace-wrap .ws-parameter-inspector{position:relative;inset:auto;width:auto;grid-column:3;grid-row:1;border-left:1px solid var(--ws-border);border-right:0;display:flex;flex-direction:column;height:100%;max-height:none;border-radius:0;box-shadow:none}
body.phase2-workspace .ws-parameter-inspector .ws-side-tabs,body.phase2-workspace .ws-parameter-inspector .ws-inspector-head{flex:0 0 auto}
body.phase2-workspace .ws-parameter-inspector .ws-inspector-scroll{flex:1 1 0;min-height:0;overflow:auto}
body.phase2-workspace .workspace-grid>.ws-center{grid-column:3;grid-row:1}
body.phase2-workspace .workspace-grid>.ws-rail{grid-column:2;grid-row:1}
.ws-palette-summary{grid-column:1;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px;box-sizing:border-box;overflow:hidden;border-left:0;border-right:1px solid var(--ws-border);background:var(--ws-surface);color:var(--ws-text)}
.ws-palette-summary h2{margin:0;font-size:16px;font-weight:700}
.ws-summary-palette{display:flex;flex-direction:column;gap:3px}.ws-summary-palette>span{font-size:12px;color:var(--ws-text-secondary)}
.ws-summary-totals{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ws-summary-totals>div{display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--ws-surface-soft);border:1px solid var(--ws-border);border-radius:8px}.ws-summary-totals strong{font-size:24px;font-variant-numeric:tabular-nums}.ws-summary-totals span{font-size:12px;color:var(--ws-text-secondary)}
#ws-summary-specs{display:flex;flex-direction:column;gap:6px;font-size:12px}#ws-summary-specs .ws-status{margin:0;font-size:12px}#ws-summary-specs .ws-field{margin:0;font-size:12px}#ws-summary-specs .ws-readout{padding:8px;font-size:12px}#ws-summary-specs #ws-project-meta{white-space:normal;line-height:1.5}
.ws-summary-filter{display:flex;gap:5px}.ws-summary-filter input{min-width:0;width:100%;}.ws-summary-filter :is(input,select){height:32px;box-sizing:border-box;padding:4px 6px;border:1px solid var(--ws-border);border-radius:6px;background:var(--ws-surface);color:var(--ws-text)}
#ws-summary-usage{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain}#ws-summary-usage .ws-color-row{min-height:40px;border-bottom:1px solid var(--ws-border)}
.ws-summary-mobile-open{display:none}
.ws-summary-mobile-close{display:none;float:right;padding:4px 8px;border:1px solid var(--ws-border);border-radius:6px;background:var(--ws-surface);color:var(--ws-text)}
/* 用量带高度改为内容驱动（约 36~46px），不再固定 80px 两行布局 —— 用户反馈
   「高度过高、占据位置过多」：空态时色块条只有一行提示文字，下面全是空白。
   单行布局：左＝色块条（横向滚动），右＝排序组，两者同行。 */
body.phase2-workspace #ws-canvas-stats.ws-usage-band{height:auto;min-height:38px;box-sizing:border-box;overflow:visible;align-content:center;position:relative}
/* 画布区行轨：带子行改 auto（内容驱动）；末行 26px 是画布提示行的残留模板
   （#ws-canvas-hint 挂载后即被 .ws-canvas-secondary-hint 永久隐藏），
   改 auto 让它收起，不再白占 26px。bg-preview 是绝对定位，0 行无影响。 */
body.phase2-workspace .ws-canvas-area:has(#ws-selection-actionbar){grid-template-rows:minmax(0,1fr) auto 0 auto}
body.phase2-workspace #ws-selection-actionbar{position:absolute;z-index:6;top:8px;left:8px;right:8px;max-height:90px;overflow:auto;box-sizing:border-box;border:1px solid var(--ws-border);border-radius:8px;box-shadow:0 3px 12px #0001}
/* 参考图调整态浮动工具条：画布底部居中（与顶部选区浮动条错开，不重叠）。
   节点从右栏隐藏组搬家而来（缩放滑杆/适配/恢复默认），样式在本上下文里重排成一行。
   用户 2026-10-16 决策：不进右栏。 */
body.phase2-workspace .ws-ref-adjustbar{position:absolute;z-index:7;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;max-width:min(680px,92%);padding:7px 14px;box-sizing:border-box;border:1px solid var(--ws-border);border-radius:999px;background:var(--ws-surface);box-shadow:0 4px 16px #00000026;font-size:12px;color:var(--ws-text-secondary)}
body.phase2-workspace .ws-ref-adjustbar .ws-ref-adjustbar-hint{white-space:nowrap}
body.phase2-workspace .ws-ref-adjustbar .ws-ref-adjustbar-field{display:flex;align-items:center;gap:6px;white-space:nowrap;margin:0;padding:0;border:0;background:transparent}
body.phase2-workspace .ws-ref-adjustbar input[type="range"]{width:110px;min-width:80px;accent-color:var(--ws-accent);cursor:pointer}
body.phase2-workspace .ws-ref-adjustbar select{height:26px;padding:0 6px;box-sizing:border-box;border:1px solid var(--ws-border);border-radius:6px;background:var(--ws-surface);color:var(--ws-text);font-size:12px;cursor:pointer}
body.phase2-workspace .ws-ref-adjustbar .ws-button{min-height:26px;padding:2px 12px;font-size:12px}
body.phase2-workspace #ws-bg-preview{position:absolute;z-index:6;bottom:110px;left:8px;right:8px;max-height:100px;overflow:auto}
#ws-summary-grid{font-size:16px;white-space:nowrap}.ws-summary-totals #ws-physical-size{padding:0;border:0;font-size:12px;line-height:1.5;background:transparent;white-space:nowrap}
/* Compact controls retain the existing DOM nodes and event owners. */
body.phase2-workspace #ws-generation-top-controls{overflow:hidden;gap:6px;flex-wrap:wrap;align-content:center}
body.phase2-workspace #ws-generation-top-controls .ws-size-block{flex:0 1 auto;min-width:0;gap:5px;flex-wrap:wrap}
body.phase2-workspace #ws-generation-top-controls .ws-size-chip{min-width:0;padding:3px 8px;min-height:28px}
body.phase2-workspace #ws-generation-top-controls .ws-size-slider{gap:5px}
body.phase2-workspace #ws-size-range{display:none!important}
body.phase2-workspace #ws-generation-top-controls .ws-size-apply{padding:3px 8px;min-height:28px}
body.phase2-workspace #ws-generation-top-controls .ws-top-size-label{display:none}
body.phase2-workspace #ws-generation-top-controls :is(.ws-size-authority,.ws-size-tier){max-width:160px;font-size:10px;line-height:1.2}
body.phase2-workspace #ws-dock-view{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow-x:auto}
body.phase2-workspace #ws-dock-view #ws-usage-actions{flex:0 0 auto;flex-wrap:nowrap;margin:0 0 0 var(--ws-usage-align,14px);gap:3px}
body.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-number-setting{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
body.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-number-setting>div:first-child{min-width:0;width:100%}
body.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-number-stepper{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;width:100%;min-width:0;box-sizing:border-box}
body.phase2-workspace .ws-panel[data-ws-inspector="generation"] .sl-number-stepper :is(button,input){width:100%;min-width:0;box-sizing:border-box}
/* Compact steppers leave the majority of the row available for precise sliding. */
body.phase2-workspace .workspace-wrap .sl-range-row{grid-template-columns:28px minmax(0,1fr) 28px;gap:6px;min-width:0;margin-top:8px}
body.phase2-workspace .workspace-wrap .sl-range-row button{width:28px;height:28px;min-width:0;min-height:0;padding:0;border-radius:6px;font-size:16px}
body.phase2-workspace .workspace-wrap .sl-range-heading{gap:8px;min-width:0}
body.phase2-workspace .workspace-wrap .sl-range-heading>div{min-width:0;flex:1}
body.phase2-workspace .workspace-wrap .sl-range-heading output{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ws-accent)}
body.phase2-workspace .workspace-wrap input[type="range"]{min-width:0;max-width:100%;height:24px;margin:0;box-sizing:border-box;accent-color:var(--ws-accent);cursor:pointer}
body.phase2-workspace .workspace-wrap .sl-range-row input[type="range"],body.phase2-workspace .workspace-wrap .ws-source-slider input[type="range"]{width:100%}
body.phase2-workspace .workspace-wrap input[type="range"]::-webkit-slider-thumb{width:16px;height:16px}
body.phase2-workspace .workspace-wrap input[type="range"]::-moz-range-thumb{width:16px;height:16px}
@media(pointer:coarse){body.phase2-workspace .workspace-wrap .sl-range-row{grid-template-columns:36px minmax(0,1fr) 36px}body.phase2-workspace .workspace-wrap .sl-range-row button{width:36px;height:36px}body.phase2-workspace .workspace-wrap input[type="range"]{height:36px}}
body.phase2-workspace #ws-dock-view .ws-usage-current{flex:0 0 auto;white-space:nowrap;font-size:12px}
body.phase2-workspace #ws-dock-view #ws-usage-actions button{font-size:12px;padding:2px 5px;min-height:25px;white-space:nowrap}
body.phase2-workspace #ws-dock-view :is(.ws-view-modes,.ws-view-toggles){flex:0 0 auto;gap:5px}
body.phase2-workspace #ws-dock-view [hidden]{display:none!important}
body.phase2-workspace #ws-grid-mode{font-size:12px;max-width:82px;padding:2px;border:1px solid var(--ws-border);border-radius:5px;background:var(--ws-surface);color:var(--ws-text)}
body.phase2-workspace .ws-summary-totals{grid-template-columns:1fr}
body.phase2-workspace .ws-summary-totals>div{flex-direction:row;align-items:center;justify-content:space-between;gap:5px;padding:8px}
body.phase2-workspace .ws-summary-totals strong{font-size:20px}
body.phase2-workspace #ws-summary-grid{font-size:17px}
body.phase2-workspace .ws-palette-summary :is(.ws-summary-filter,#ws-summary-usage,#ws-project-meta)[hidden]{display:none!important}
body.phase2-workspace #ws-usage-similar-list{position:absolute;z-index:8;bottom:100%;left:8px;right:8px;max-height:180px;overflow:auto;background:var(--ws-surface);border:1px solid var(--ws-border);border-radius:8px;padding:8px}
@media(max-width:760px){
  body.phase2-workspace #ws-generation-top-controls .ws-size-chip:not(.ws-size-chip-auto){display:none}
  body.phase2-workspace #ws-generation-top-controls :is(.ws-size-authority,.ws-size-tier){display:none}
  body.phase2-workspace .ws-top-controls:has(#ws-generation-top-controls:not([hidden])) .ws-top-zoom{max-width:115px}
  body.phase2-workspace .ws-top-controls:has(#ws-generation-top-controls:not([hidden])) .ws-top-zoom input[type="range"]{display:none}
  body.phase2-workspace #ws-generation-top-controls .ws-size-block{gap:3px}
  body.phase2-workspace #ws-generation-top-controls .ws-size-slider output{font-size:11px}
}

/* Six numbered task groups and a two-row, on-demand icon toolbar. The
   72px context row stays fixed so the usage/color strip does not shift. */
body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:300px var(--ws-rail-width) minmax(0,1fr) 240px!important}
body.phase2-workspace .ws-parameter-inspector .ws-side-tabs[hidden],
body.phase2-workspace .ws-parameter-inspector .ws-inspector-head[hidden]{display:none!important}
body.phase2-workspace .ws-parameter-inspector .ws-inspector-scroll{display:flex;flex-direction:column;gap:12px;padding:12px;overflow:auto}
.ws-step-card{flex:0 0 auto;min-width:0;padding:12px;border:1px solid var(--ws-border);border-radius:12px;background:var(--ws-surface);color:var(--ws-text)}
.ws-step-card h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;font-weight:750;color:var(--ws-text)}
.ws-step-card h2>span{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:7px;background:var(--ws-accent-soft);color:var(--ws-accent);font-size:12px}
.ws-step-content{display:grid;gap:9px;min-width:0}
.ws-step-content>.ws-panel{display:block!important;min-width:0}
.ws-step-content>[data-ws-inspector="generation"]>.ws-section-title:first-child{display:none}
body.phase2-workspace .ws-top-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:36px 24px;align-items:center;gap:2px 8px;padding:4px 10px;overflow:hidden}
body.phase2-workspace .ws-top-controls>#gridEditorToolbar{grid-column:1;grid-row:1;min-width:0;overflow-x:auto;overflow-y:hidden}
body.phase2-workspace .ws-top-controls>.ws-history-actions{grid-column:2;grid-row:1}
body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:3;grid-row:1}
body.phase2-workspace .ws-top-controls>#ws-tool-options{grid-column:1/-1;grid-row:2;display:flex;align-items:center;min-width:0;height:24px;min-height:24px;max-height:24px;overflow-x:auto;overflow-y:hidden;gap:6px;padding:0;border:0;background:transparent}
body.phase2-workspace .ws-top-controls>#ws-tool-options[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options>strong{display:none}
body.phase2-workspace .ws-icon-tool-options{display:flex;align-items:center;gap:4px;flex:0 0 auto}
body.phase2-workspace .ws-icon-tool-options[hidden],body.phase2-workspace .ws-context-group[hidden]{display:none!important}
body.phase2-workspace .ws-icon-tool-options-button,body.phase2-workspace .ws-icon-tool-options>button{display:inline-grid;place-items:center;position:relative;width:28px;height:26px;min-height:26px;padding:2px;border:1px solid var(--ws-border);border-radius:7px;background:var(--ws-surface);color:var(--ws-text-secondary);cursor:pointer}
body.phase2-workspace .ws-icon-tool-options-button:hover,body.phase2-workspace .ws-icon-tool-options>button:hover{border-color:var(--ws-accent);color:var(--ws-accent)}
body.phase2-workspace .ws-icon-tool-options-button[aria-pressed="true"],body.phase2-workspace .ws-icon-tool-options>button[aria-pressed="true"]{background:var(--ws-accent);border-color:var(--ws-accent);color:var(--ds-color-on-accent)}
body.phase2-workspace .ws-icon-tool-options svg{width:18px;height:18px}
.ws-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ws-step-card .ws-context-group[hidden],#ws-tool-options .ws-context-group[hidden]{display:none!important}
@media(max-width:760px){body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns: minmax(0,1fr) 220px!important}body.phase2-workspace .ws-parameter-inspector{grid-column:1!important;grid-row:2!important;z-index:20}body.phase2-workspace .ws-top-controls{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px 24px}body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:2}body.phase2-workspace .ws-top-controls>.ws-history-actions{display:none}}
/* ── 色块框线语言（2026-10-19 定稿，全站统一）────────────────────────────────
   从三张参考图（截屏 09.08.30 / 09.08.23 / 09.08.51）反解出来的规则：
   · 未选中 = 1px 虚线细框；选中 = 2px 实线粗框，色块本身再放大一点；
   · 相邻色块之间 3px 间隙（参考图实测：块 32px、间隙 3px —— 不是无缝隙连排）；
   · 框色 = 该色块自己的颜色，不是固定深灰：
       color-mix(该色 78% + 22% 主题墨色)
     反解依据：参考图里 #FFB7CF→#D597AA 差 17%、#CE658C→#AE5674 差 16%、
     淡薄荷→#AFADAB 差 28%，取 22% —— 浅块出浅框、深块出深框、黄块出黄框。
   ★ --pick-base 由 JS 内联注入（colorChip 与色板 span 都带），缺失时回落 --ws-border-strong。
   ★ 不写死 rgba() 当唯一值：先给一条朴素降级声明，再给 color-mix 覆盖。 */
:root{
  --swatch-gap:3px;            /* 色块间隙（参考图实测 3px） */
  --swatch-frame-idle:1px;     /* 未选中虚线框宽度 */
  --swatch-frame-on:2px;       /* 选中实线框宽度（30px 块上 2px ≈ 参考图 45px 块上 3px） */
  /* 框色调和墨色：恒定偏暗，不跟随明暗主题翻转。
     框是压在色块边缘上的，对比对象是「色块自己的填充」而不是面板底色 ——
     暗色主题下若翻成浅墨，浅色块（A01/A02 这种）的框会比填充还浅，当场消失。
     实测：暗色下翻面版 127 块里有 100+ 块框不可见。 */
  --swatch-frame-ink:rgb(0,0,0);       /* 框色调和墨色：恒定偏暗，不跟随明暗主题翻转（原因见上） */
  /* 未选中虚线框 = 该色 78% + 22% 墨；选中实线框 = 该色 60% + 40% 墨 ——
     ★ 用户 2026-10-19：「实线框的逻辑应该是比选中色暗一个色来做当前色边框的，这样才有明显的对比度」。
       22% 那一版实测对比度不够：亮黄块的框 (199,199,167) 贴著填充 (254,255,139)，几乎看不出来。
       现在只有「选中/目标」那一颗吃 40% 墨，邻居仍是 22% 虚线，所以加重不会把整片色板压暗。 */
  --swatch-frame-tint:78%;
  --swatch-frame-on-tint:60%;
}
/* Codes live directly on their true-color swatches, with computed contrasting ink. */
.ws-code-swatch{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:22px;padding:0 4px;border:1px dashed rgba(20,18,15,.45);border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-tint),var(--swatch-frame-ink));border-radius:4px;font-size:11px;font-weight:650;font-style:normal;white-space:nowrap;vertical-align:middle;box-sizing:border-box}
.ws-mobile-brush-options{display:none}
.ws-summary-picker{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;gap:6px;overflow-y:auto;overscroll-behavior:contain}
.ws-summary-picker h3{margin:0;font-size:13px;font-weight:650}
body.phase2-workspace .workspace-wrap .ws-palette-summary .ws-summary-picker{min-width:0;max-width:100%;overflow-x:hidden}
body.phase2-workspace .workspace-wrap .ws-palette-summary .ws-summary-picker>*{min-width:0;max-width:100%;box-sizing:border-box;flex-shrink:0}
body.phase2-workspace .workspace-wrap .ws-palette-summary .ws-summary-picker :is(button,.ws-note,.ws-panel){min-width:0;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}
body.phase2-workspace .workspace-wrap .ws-palette-summary #ws-available-open{width:100%;padding:5px 8px;font-size:12px;white-space:normal}
body.phase2-workspace .workspace-wrap #ws-tool-options{background:transparent!important;border:0!important;box-shadow:none!important}
.ws-summary-picker #ws-color-search{width:100%;min-width:0;box-sizing:border-box;height:30px;padding:4px 7px;border:1px solid var(--ws-border);border-radius:6px;color:var(--ws-text);background:var(--ws-surface)}
.ws-summary-picker .ws-bead-picker{flex:0 0 auto;max-height:none;margin:0}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-bead-picker{width:100%;min-width:0;grid-template-columns:repeat(8,minmax(0,1fr));overflow-x:hidden;gap:var(--swatch-gap)}
/* ★ 正方形修复：button 不能用 display:grid。span 是 grid item 时 `height:100%` 解析到的是
   「网格区高度（被同行其它格子/行高撑到 28px）」，不是 button 自己的 21.375px ——
   于是色块变成 21×28 的竖长方形。改成 display:block 后 span 回归普通块，
   width:100% + aspect-ratio:1/1 就是正方形。 */
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-bead-picker button{display:block;position:relative;width:100%;min-width:0;padding:3px;box-sizing:border-box}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-bead-picker button[data-ws-pick]{aspect-ratio:1/1;height:auto!important;min-height:0!important;padding:0;gap:0;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-bead-picker button span{position:relative;display:grid;place-items:center;width:100%;min-width:0;max-width:100%;height:auto;align-self:start;aspect-ratio:1/1;box-sizing:border-box;border:var(--swatch-frame-idle) dashed rgba(20,18,15,.45);border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-tint),var(--swatch-frame-ink));border-radius:0;font-size:10px;font-weight:400;line-height:1;white-space:nowrap;overflow-wrap:normal;word-break:normal;overflow:hidden;min-height:0!important}
/* Palette selection stays within its own square; never cover adjacent codes. */
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-bead-picker button[data-ws-pick]:is(.active,:focus-visible){outline:none;overflow:visible;z-index:1}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-bead-picker button[data-ws-pick]:is(.active,:focus-visible) span{outline:none;
  border:var(--swatch-frame-on) solid rgba(20,18,15,.72);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-on-tint),var(--swatch-frame-ink));
  transform:none}
.ws-summary-picker .ws-palette-categories,.ws-summary-picker .ws-recent-colors{margin:0;gap:3px}
.ws-summary-picker .ws-palette-categories button{font-size:10px;padding:2px 4px;min-height:23px}
.ws-summary-picker #ws-palette-current{font-size:12px;min-height:24px;padding:0;background:transparent;border:0}
body.phase2-workspace #ws-dock-view .ws-dock-view-settings{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
body.phase2-workspace #ws-context-text,.ws-text-context-controls{background:transparent;border:0;box-shadow:none}
body.phase2-workspace #ws-context-text :is(.ws-field,.ws-text-active,.ws-text-layout){background:transparent;border:0;box-shadow:none}
body.phase2-workspace .ws-usage-band #ws-usage-strip .ws-usage-card{grid-template-columns:1fr;gap:2px;min-width:48px;min-height:40px;padding:3px 5px;justify-items:center}
body.phase2-workspace .ws-usage-band .ws-usage-card .ws-swatch{grid-row:auto;width:40px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;white-space:nowrap}
/* Every tool uses at most two compact lines inside the fixed context row. */
body.phase2-workspace #ws-tool-options{overflow:visible;flex-wrap:wrap;align-content:center;gap:4px 7px;height:100%}
body.phase2-workspace #ws-tool-options .ws-context-group{flex-wrap:wrap;flex-shrink:1;min-width:0;gap:4px 6px}
body.phase2-workspace #ws-tool-options :is(button,select,input:not([type="checkbox"])){min-height:25px;font-size:12px}
body.phase2-workspace #ws-tool-options input[type="range"]{width:70px}
body.phase2-workspace #ws-tool-options #ws-context-text-summary{display:none}
body.phase2-workspace #ws-tool-options #ws-context-text{flex:1 1 auto;gap:4px}
body.phase2-workspace #ws-tool-options #ws-context-text-controls{min-width:0}
body.phase2-workspace .ws-top-zoom{gap:4px}
body.phase2-workspace .ws-top-zoom input[type="range"]{width:80px}
@media(max-width:760px){
  .ws-mobile-brush-options{display:block}
  .ws-mobile-brush-options summary{padding:4px 8px;border:1px solid var(--ws-border);border-radius:6px;cursor:pointer;white-space:nowrap}
  .ws-mobile-brush-options-body{position:fixed;z-index:99;right:8px;max-height:calc(100dvh - 180px);overflow-y:auto;padding:12px;border:1px solid var(--ws-border);border-radius:8px;box-shadow:0 5px 20px #0002;background:var(--ws-surface)}
  body.phase2-workspace #ws-tool-options .ws-mobile-brush-options-body .ws-context-group{display:flex;gap:6px;margin-bottom:8px}
  body.phase2-workspace #ws-tool-options .ws-mobile-brush-options-body [hidden]{display:none!important}
  body.phase2-workspace #ws-tool-options{gap:3px;font-size:11px}
  body.phase2-workspace #ws-tool-options :is(button,select){font-size:11px;padding:2px 4px}
  body.phase2-workspace #ws-tool-options>strong{display:none}
  body.phase2-workspace #ws-tool-options #ws-selection-buttons{flex-wrap:wrap;gap:3px}
  body.phase2-workspace .ws-top-controls:has(#ws-tool-options:not([hidden])) .ws-top-zoom{max-width:95px}
  body.phase2-workspace .ws-top-controls:has(#ws-tool-options:not([hidden])) .ws-top-zoom input[type="range"]{display:none}
}
#ws-tool-options #ws-selection-buttons{flex-wrap:nowrap;white-space:nowrap}
.ws-selection-context-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.ws-selection-context-controls>label{display:flex;align-items:center;gap:4px;white-space:nowrap}
.ws-selection-context-controls .ws-clipboard-history{position:relative}
.ws-selection-context-controls .ws-clipboard-history>div{display:flex;gap:5px;max-width:min(520px,70vw);overflow:auto}
.ws-selection-context-controls .ws-clipboard-history>div>button{display:flex;align-items:center;gap:5px}
.ws-selection-context-controls canvas{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;background:var(--ws-canvas)}
.ws-reference-candidates{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto}
.ws-reference-candidates button{padding:2px!important;min-width:32px!important}
.ws-reference-candidates .ws-code-swatch{display:grid;place-items:center;min-width:29px;height:25px;border-radius:4px;font-size:10px}
@media(max-width:760px){.ws-selection-context-controls{gap:3px}.ws-selection-context-controls>button{min-height:26px!important;padding:2px 5px!important}.ws-reference-candidates{max-width:42vw}}
/* 普通 [data-ws-pick] 按钮（不在色板网格里）的兜底尺寸。
   ★ 正方形色块必须在自己的规则里写 `min-height:0!important` 把这里的 28px 压掉 ——
     min-height 参与盒计算，会压过 aspect-ratio:1/1（这条把我坑过一次：色块变成 21×28 竖长方形）。 */
body.phase2-workspace [data-ws-pick]>span{display:flex;align-items:center;justify-content:center;min-height:28px;min-width:38px;font-size:11px;font-weight:650}
body.phase2-workspace #ws-canvas-stats #ws-usage-strip .ws-usage-card{display:flex!important;min-width:44px!important;min-height:28px!important;padding:2px!important}
body.phase2-workspace #ws-canvas-stats #ws-usage-strip .ws-usage-card .ws-swatch{width:40px!important;height:24px!important;display:flex!important;align-items:center;justify-content:center}
body.phase2-workspace #ws-canvas-stats #ws-usage-strip .ws-usage-card em{display:none!important}
body.phase2-workspace .workspace-wrap [data-ws-color-pick],body.phase2-workspace .workspace-wrap .ws-color-pickable{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m4 17 10-10 3 3L7 20H4zM13 6l3-3a2 2 0 0 1 3 3l-3 3' fill='white' stroke='%234d3c88' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 20,crosshair}
body.phase2-workspace #ws-context-text-controls .ws-field{display:flex!important;flex-direction:row!important;align-items:center!important;font-size:11px;gap:4px!important;line-height:1.2}
body.phase2-workspace #ws-context-text-controls .ws-field :is(input,select){height:28px!important;min-height:28px!important;padding:3px 6px!important;margin:0!important}
@media(min-width:761px){
  body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector>.ws-inspector-head{display:flex!important}
  body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector>.ws-inspector-scroll{display:block!important}
  body.phase2-workspace .workspace-wrap .ws-parameter-inspector .ws-mobile-panel-close{display:none!important}
}
@media(max-width:1200px) and (min-width:761px){body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:var(--ws-pal-col,176px) minmax(0,1fr) var(--ws-task-col,220px)!important}.ws-palette-summary{padding:10px}}
@media(max-width:760px){
  body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:minmax(0,1fr)!important}
  body.phase2-workspace .workspace-grid>.ws-center{grid-column:1;grid-row:1}
  body.phase2-workspace .workspace-wrap .workspace-grid>.ws-parameter-inspector{position:fixed;left:8px;right:8px;top:auto;bottom:100px;width:auto;height:auto;max-height:65dvh;z-index:70;border:1px solid var(--ws-border);border-radius:12px;background:var(--ws-surface);box-shadow:0 -4px 20px #0001}
  body.phase2-workspace .ws-parameter-inspector .ws-inspector-scroll{flex:auto;max-height:calc(65dvh - 100px)}
  .ws-summary-mobile-open,.ws-summary-mobile-close{display:block}
  .ws-palette-summary{display:none;position:fixed;left:8px;right:8px;top:150px;bottom:100px;z-index:71;border:1px solid var(--ws-border);border-radius:12px;box-shadow:0 6px 24px #0002}
  .ws-palette-summary.is-mobile-summary-open{display:flex}
}
/* v3: a quiet shell around the existing single canvas and settings controls. */
.ws-theme-no-transition,.ws-theme-no-transition *{transition:none!important}
.ws-v3-shortcuts{display:flex;gap:6px;flex-shrink:0}
.ws-v3-shortcuts button,#ws-theme-cycle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;padding:5px}
.ws-v3-shortcuts svg,#ws-theme-cycle svg{width:20px;height:20px;display:block}
#ws-theme-cycle{margin-left:auto;flex-shrink:0}
.ws-grid-toolbar-host{--pick:currentColor;--pick-ink:var(--ws-text)}
.sl-tool-icon svg{width:22px;height:22px;display:block}
body.phase2-workspace .ws-summary-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:1201px){
 body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:300px var(--ws-rail-width) minmax(0,1fr) 240px!important}
}
:root[data-theme="dark"] body.phase2-workspace .workspace-wrap input,
:root[data-theme="dark"] body.phase2-workspace .workspace-wrap select,
:root[data-theme="dark"] body.phase2-workspace .workspace-wrap textarea{background:var(--ds-color-surface-soft);color:var(--ds-color-text);border-color:var(--ds-color-border)}
/* The studio skin also contains legacy literal light colors. Theme overrides
   stay scoped to workbench chrome, never to artwork/material swatch colors. */
:root[data-theme="dark"] body.phase2-workspace :is(.ws-topbar,.ws-top-controls,.ws-inspector,.ws-inspector-scroll,.ws-inspector-head,.ws-panel,.ws-side-tabs,.ws-workareas,.ws-output-tasks,.ws-export-drawer,.ws-project-popover,.ws-edit-actions-popover,.ws-feature-search,.ws-help-dialog,.ws-cell-color-popover){background:var(--ds-color-surface);color:var(--ds-color-text);border-color:var(--ds-color-border)}
:root[data-theme="dark"] body.phase2-workspace .ws-rail{background:var(--ds-color-surface);color:var(--ds-color-text);border-color:var(--ds-color-border)}
:root[data-theme="dark"] body.phase2-workspace .ws-rail :is(.sl-tool-button,.sl-tool-button-secondary,.ws-rail-collapse,.ws-rail-mode){background:transparent;color:var(--ds-color-text-secondary);border-color:transparent}
:root[data-theme="dark"] body.phase2-workspace .ws-rail :is(.sl-tool-button.active,.sl-tool-button[aria-pressed="true"],.ws-rail-mode.active){background:var(--ds-color-accent-soft);color:var(--ds-color-text-strong);border-color:var(--ds-color-accent)}
:root[data-theme="dark"] body.phase2-workspace .ws-rail :is(.sl-tool-button:hover,.ws-rail-collapse:hover,.ws-rail-mode:hover){background:var(--ds-color-surface-soft);color:var(--ds-color-text)}
:root[data-theme="dark"] body.phase2-workspace .ws-topbar :is(button,summary),
:root[data-theme="dark"] body.phase2-workspace :is(.ws-side-tabs,.ws-workareas,.ws-output-tasks,.ws-cell-color-actions,.ws-summary-picker) button{background:var(--ds-color-surface-soft);color:var(--ds-color-text);border-color:var(--ds-color-border)}
:root[data-theme="dark"] body.phase2-workspace :is(.ws-side-tabs,.ws-workareas,.ws-output-tasks) button.active{background:var(--ds-color-accent-soft);color:var(--ds-color-text-strong);border-color:var(--ds-color-accent)}
:root[data-theme="dark"] body.phase2-workspace :is(.ws-brand,.ws-inspector-head,.ws-section-title){color:var(--ds-color-text-strong)}
body.phase2-workspace .ws-summary-totals>div{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;padding:12px;min-height:82px}
body.phase2-workspace .ws-summary-totals>div>span{white-space:normal;line-height:1.4;text-align:left}
body.phase2-workspace .ws-summary-totals #ws-physical-size{white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){body.phase2-workspace .ws-topbar #ws-theme-cycle{margin-left:auto;order:9}body.phase2-workspace .ws-topbar .ws-birth-preference{order:8}}

/* ============================================================================
   底栏重构 + 右栏精简（本轮）
   1) 「配色清单」整块从右栏搬到底栏最左侧，横排显示；
   2) 已使用颜色统计 / 筛选框 / 色块条横向滚动条 撤掉；
   3) 排序组（数量/色号/色相）移到色块条下方；
   4) 右栏新增：当前色前后色、参考图（含竖向透明度滑杆）；
   5) 右栏「作品信息」收紧。
   选择器一律带上 id（#ws-canvas-stats / #ws-palette-summary / #ws-usage-summary-inline），
   因为 workspace.css 之后还加载 studio-system.css 与 ui-typography.css，
   纯类名选择器在同等特异性下会被它们盖掉。
   ========================================================================== */

/* [hidden] 必须显式压过下面这些带 id/类的 display 规则，否则「隐藏」会静默失效 */
#ws-canvas-stats.ws-usage-band .ws-usage-totals[hidden],
#ws-canvas-stats.ws-usage-band .ws-usage-band-tools input[hidden],
body.phase2-workspace #ws-major-grid-interval[hidden],
#ws-usage-summary-inline label[hidden],
#ws-palette-summary .ws-reference-group label[hidden],
#ws-color-neighbors[hidden]{display:none!important}

/* ① 底栏单行：左＝色块条（横向滚动），右＝排序组。配色清单已搬进下方坞的最左，
   带子不再需要两列两行。 */
#ws-canvas-stats.ws-usage-band{grid-template-columns:minmax(0,1fr) auto}
#ws-usage-summary-inline{grid-column:1;grid-row:1/span 2;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:2px 12px;max-width:min(560px,44vw);font-size:11px;line-height:1.4;color:var(--ws-text-secondary)}
#ws-usage-summary-inline .ws-summary-palette{display:flex;flex-direction:row;align-items:baseline;gap:6px}
#ws-usage-summary-inline .ws-summary-palette strong{font-size:12px;color:var(--ws-text)}
#ws-usage-summary-inline .ws-summary-palette>span{font-size:11px}
#ws-usage-summary-inline .ws-summary-totals{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
#ws-usage-summary-inline .ws-summary-totals>div{display:flex;flex-direction:row;align-items:baseline;gap:3px;padding:0;background:transparent;border:0;border-radius:0}
#ws-usage-summary-inline .ws-summary-totals strong{font-size:12px;color:var(--ws-text);font-variant-numeric:tabular-nums}
#ws-usage-summary-inline .ws-summary-totals span{font-size:11px}
#ws-usage-summary-inline #ws-summary-grid{font-size:12px}
#ws-usage-summary-inline #ws-summary-specs{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:11px}
#ws-usage-summary-inline #ws-summary-specs .ws-status{margin:0;font-size:11px;color:var(--ws-text-tertiary)}
body.phase2-workspace #ws-dock-view #ws-usage-summary-inline{flex:1 1 auto;max-width:none;min-width:0;padding-left:14px;gap:2px 12px}
body.phase2-workspace #ws-dock-view #ws-usage-summary-inline #ws-summary-specs{display:none}
body.phase2-workspace #ws-dock-view #ws-usage-summary-inline .ws-summary-totals>div{min-height:0;white-space:nowrap}
body.phase2-workspace #ws-dock-view #ws-usage-actions{margin-left:8px}
#ws-canvas-stats.ws-usage-band #ws-usage-strip{grid-column:1;grid-row:1;padding:2px 0}
#ws-canvas-stats.ws-usage-band .ws-usage-band-tools{grid-column:2;grid-row:1;justify-content:flex-end;flex-wrap:nowrap}

/* ② 色块条的横向滚动条撤掉：中键拖拽/滚轮平移已经够用，滚动条只是多一层视觉噪音。
     滚动能力本身保留（overflow-x 仍是 auto），只是不再画那根杆。 */
#ws-canvas-stats.ws-usage-band #ws-usage-strip{scrollbar-width:none;-ms-overflow-style:none}
#ws-canvas-stats.ws-usage-band #ws-usage-strip::-webkit-scrollbar{display:none;width:0;height:0}

/* ②b 右栏垂直分配的保底：.ws-summary-picker 是 flex:1 1 auto + min-height:0，任何高个子
   兄弟节点（曾把 574px 的参考图节搬进来）都会把它压成 0 高，里面 1706px 高的色板整块被裁掉
   —— 右栏选色直接不可用。参考图节现在已撤出右栏（display:none），这两条是防回归的保底：
   选色区永远留得住高度，参考图节若哪天再回来也不参与收缩。
   实测（1440×900）：摘掉参考图节选色区 = 520px，保留时曾被压到 0；保底 260px。 */
#ws-palette-summary .ws-summary-picker{min-height:260px}
#ws-palette-summary .ws-reference-group{flex:0 0 auto}

/* ③ 右栏：当前色 + 前后色一排 —— 与色板/最近色完全同一套框线语言（见上方令牌）。
   参考图实测：间隙 3px；未选中 1px 虚线；选中 2px 实线 + 块本身放大一圈。
   ★ 选中块「放大」用 flex-grow 而不是 transform:scale ——
     scale 不参与布局，放大会压进 3px 间隙里，而参考图的间隙是等宽的；
     flex-grow:1.4 让选中那颗真的占 1.4 份宽（参考图 45px / 32px ≈ 1.4）。
   ★ 框色就是该色块自己的颜色（--pick-base 派生），浅块浅框、深块深框、黄块黄框。 */
/* ③ 色块一律是正方形（用户 2026-10-19：「我们需要的是正方形 而不是长方形」）。
   前后色这一排：idle 占 1 份、当前色占 1.4 份（flex-grow 真的占布局，不是 scale），
   aspect-ratio:1/1 让高度跟着宽度走 —— 实测 idle 33.3×33.3、当前色 46.7×46.7，
   与参考图的 32×32 / 45×45 一致（整排高度从 30 变成 46.7，参考图同款）。 */
#ws-color-neighbors{display:flex;align-items:center;gap:var(--swatch-gap);margin:4px 0 7px}
#ws-color-neighbors .ws-neighbor-empty{flex:1 1 0;min-width:0;aspect-ratio:1/1;box-sizing:border-box;border:var(--swatch-frame-idle,1px) dashed var(--ws-border);pointer-events:none}
#ws-color-neighbors button{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;line-height:0}
#ws-color-neighbors button .ws-code-swatch{box-sizing:border-box;width:100%;height:auto;min-height:0!important;aspect-ratio:1/1;min-width:0;padding:0;border-radius:0;font-size:10px;opacity:1;
  border:var(--swatch-frame-idle) dashed rgba(20,18,15,.45);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-tint),var(--swatch-frame-ink))}
#ws-color-neighbors button:hover .ws-code-swatch{border-style:solid}
#ws-color-neighbors button:focus-visible .ws-code-swatch{outline:2px solid var(--ws-accent);outline-offset:1px}
#ws-color-neighbors button.is-current{flex-grow:1.4;z-index:1}
#ws-color-neighbors button.is-current .ws-code-swatch{
  border:var(--swatch-frame-on) solid rgba(20,18,15,.72);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-on-tint),var(--swatch-frame-ink))}

/* 「当前 A01」那颗色块 —— 参考图 09.08.51：实线粗框、方角、框内不再垫白线。 */
#ws-palette-current .ws-code-swatch{
  width:30px;min-width:0;height:30px;aspect-ratio:1/1;padding:0;overflow:hidden;border-radius:2px;font-size:11px;min-height:0!important;
  border:var(--swatch-frame-on) solid rgba(20,18,15,.5);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-on-tint),var(--swatch-frame-ink))}

/* ④ 参考图：整节已撤出右栏内容区（节点保留、display:none），透明度条改为右栏最左侧的
   独立竖条。滑杆与竖条的样式统一收在下面的 ⑥，这里不再重复定义 ——
   两处都写 border / border-radius 会互相打架（前一轮就是这么踩的）。 */

/* ⑤ 右栏「作品信息」收紧：字段改为「标签 + 输入框」同行，高度与间距一起压 */
#ws-palette-summary .ws-project-information{gap:2px}
#ws-palette-summary .ws-project-information>#ws-project-info{min-height:24px;padding:0 8px;font-size:13px;font-weight:600}
#ws-palette-summary .ws-project-information .ws-field{flex-direction:row;align-items:center;gap:6px;margin:0 0 3px}
#ws-palette-summary .ws-project-information .ws-field> :is(input,.ws-name,#ws-project-creator){flex:1 1 auto;min-width:0;height:26px;min-height:26px;padding:0 7px;font-size:12px;line-height:24px}

/* ⑥ 右栏 = 内容列（参考图透明度条已搬到顶栏最右，见文件末尾「顶栏参考图透明度」一节）。
   .ws-palette-content 承接原来挂在 .ws-palette-summary 上的内边距与纵向滚动；
   「作品信息」也进这一列（JS 侧 paletteContent.prepend）——直接挂在右栏上会被并排成一列。 */
#ws-palette-summary{flex-direction:row;gap:0;padding:0;overflow:hidden}
#ws-palette-summary .ws-palette-content{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto}

/* 「对照」在「既无参考图也无原图」时整体变成上传入口（文案已由 JS 换成「上传参考图」） */
#ws-compare.is-upload-entry{border-style:dashed;border-color:var(--ws-border-strong);color:var(--ws-text-secondary)}
#ws-compare.is-upload-entry::before{content:"＋";margin-right:2px;font-weight:600}
#ws-compare.is-upload-entry:hover{border-color:var(--ws-accent);color:var(--ws-accent)}

/* 参考图整节已撤出右栏：右栏内容区不再出现任何参考图字段（节点保留，只是不显示）。 */
#ws-palette-summary .ws-reference-group{display:none!important}

/* ============================================================================
   阶段 1：左色板 / 右任务面板 · 两侧独立折叠 · 底栏状态 · 更多工具收纳
   布局三列 = 色板(左) / 画布(中) / 任务面板(右)，列宽走 --ws-pal-col / --ws-task-col。
   折叠用 :has() 由 grid 容器改变量轨道宽度 —— JS 只翻 class，不写布局数字
   （与旧的 setRailCollapsed 写 --ws-rail-width 是两套机制：rail 已 display:none 退役）。
   ========================================================================== */
body.phase2-workspace .workspace-grid:has(> .ws-palette-summary.is-collapsed){--ws-pal-col:0px}
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-palette-summary.is-collapsed{display:none!important}
body.phase2-workspace .workspace-grid:has(> .ws-parameter-inspector.is-collapsed){--ws-task-col:0px}
/* Both reopen buttons live in the topbar, outside the hidden sidebars. */
body.phase2-workspace .ws-parameter-inspector.is-collapsed :is(.ws-side-tabs,.ws-inspector-head .ws-inspector-title,.ws-inspector-head .ws-inspector-subtitle,.ws-inspector-scroll){display:none!important}
/* Match the full desktop panel selectors: legacy display:block!important must
   never reveal a collapsed scroll area or squeeze the reopen button away. */
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector{min-width:0;overflow:hidden}
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector>.ws-inspector-head{min-width:0;flex-wrap:nowrap}
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector>.ws-inspector-head>.ws-panel-collapse{flex:0 0 28px}
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector.is-collapsed>:is(.ws-side-tabs,.ws-inspector-scroll){display:none!important}
/* Fully leave the layout track. Only the reopen tab overlays the far edge. */
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector.is-collapsed{position:absolute;inset:0 0 auto auto;width:0;height:0;min-height:0;padding:0;border:0;overflow:visible;box-shadow:none;z-index:25}
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector.is-collapsed>.ws-inspector-head{display:none!important}
body.phase2-workspace .workspace-wrap .workspace-grid>.ws-inspector.ws-parameter-inspector.is-collapsed>.ws-inspector-head>:not(.ws-panel-collapse){display:none!important}
/* 专注模式：左右栏一起收，且列宽归零 —— 画布真正全宽，不留 44px 残边
   （独立折叠同样归零；专注模式单独保存和恢复两侧状态）。 */
body.phase2-workspace.ws-focus-mode .workspace-grid{--ws-pal-col:0px!important;--ws-task-col:0px!important}
body.phase2-workspace.ws-focus-mode .workspace-grid>.ws-palette-summary,
body.phase2-workspace.ws-focus-mode .workspace-grid>.ws-parameter-inspector{display:none!important}
/* 底栏专注开关：与缩放控件同行的 pill，按下态用强调色。 */
body.phase2-workspace #ws-focus-toggle{flex:0 0 auto;margin-left:8px;padding:4px 12px;border:1px solid var(--ws-border);border-radius:999px;background:var(--ws-surface);color:var(--ws-text-secondary);font-size:12px;cursor:pointer}
body.phase2-workspace #ws-focus-toggle:hover{background:var(--ws-surface-soft);color:var(--ws-text)}
body.phase2-workspace #ws-focus-toggle[aria-pressed="true"]{background:var(--ws-accent);border-color:var(--ws-accent);color:var(--ds-color-on-accent)}
body.phase2-workspace .ws-palette-summary > h2{display:flex;align-items:center;gap:8px;margin:0}
body.phase2-workspace .ws-inspector-head{display:flex;align-items:center;gap:8px}
body.phase2-workspace .ws-panel-collapse{width:28px;height:28px;flex:0 0 auto;margin:0;padding:0;border:1px solid var(--ws-border);border-radius:7px;background:var(--ws-surface);color:var(--ws-text-secondary);font-size:15px;line-height:1;cursor:pointer}
body.phase2-workspace .ws-panel-collapse:hover{background:var(--ws-surface-soft);color:var(--ws-text)}
body.phase2-workspace #ws-toggle-task-panel{order:6;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border:0;background:transparent}
body.phase2-workspace #ws-toggle-task-panel svg{display:block;width:21px;height:21px}
body.phase2-workspace #ws-toggle-task-panel[aria-expanded="true"]{color:var(--ws-text);background:var(--ws-surface-soft)}
body.phase2-workspace #ws-toggle-palette-panel{order:-1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border:0;background:transparent}
body.phase2-workspace #ws-toggle-palette-panel svg{display:block;width:21px;height:21px}
body.phase2-workspace #ws-toggle-palette-panel[aria-expanded="true"]{color:var(--ws-text);background:var(--ws-surface-soft)}
/* Independent sidebar disclosures keep live controls mounted and their values intact. */
body.phase2-workspace .ws-disclosure-group{min-width:0;margin:0;padding:0}
body.phase2-workspace .workspace-wrap .ws-foldable.is-section-collapsed>:not(.ws-fold-header){display:none!important}
body.phase2-workspace .ws-fold-header{cursor:pointer}
body.phase2-workspace .ws-foldable.is-section-collapsed>.ws-fold-header{margin-bottom:0}
body.phase2-workspace .ws-foldable.is-section-collapsed>.ws-fold-header :is(p,small){display:none}
body.phase2-workspace .ws-section-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:26px;min-height:0;margin:0 5px 0 0;padding:3px;border:0;border-radius:4px;background:transparent;color:var(--ws-text-secondary);vertical-align:middle;cursor:pointer}
body.phase2-workspace .ws-section-toggle:hover{background:var(--ws-surface-soft);color:var(--ws-text)}
body.phase2-workspace .ws-section-toggle svg{display:block;flex:0 0 14px;width:14px;height:14px;pointer-events:none}
body.phase2-workspace [data-ws-section-toggle][aria-expanded="true"] svg{transform:rotate(90deg)}
body.phase2-workspace #ws-project-info.ws-section-toggle{width:100%;justify-content:flex-start;gap:5px;flex-basis:auto;font:inherit;text-align:left}
body.phase2-workspace #ws-project-info[aria-expanded="false"] svg{transform:rotate(-90deg)}
body.phase2-workspace .ws-project-information-body[hidden]{display:none!important}
body.phase2-workspace .ws-palette-summary > h2 .ws-panel-collapse{margin-left:auto}
/* 底栏「当前工具」：与统计行同级的 11px 小字，白空格不显示（空作品时由 dock 容错） */
body.phase2-workspace #ws-dock-tool{flex:0 0 auto;font-size:11px;color:var(--ws-text-secondary);white-space:nowrap}
/* 缩放控件从顶栏移到底栏后，顶栏只剩「工具条 + 历史」两格 */
body.phase2-workspace .ws-top-controls{grid-template-columns:minmax(0,1fr) auto}
body.phase2-workspace .ws-dock-view #zoomControls{flex:0 0 auto;margin-left:8px}
/* 「更多工具」整块已删除（用户 2026-10-16 决策）：区里每一项都在主工具栏或
   工具选项行里有更好的落点，不再保留第二个入口，因此对应的 .ws-more-tools 系列
   规则与 .sl-grid-toolbar-extended / .sl-toolbar-help 一并移除。 */

/* v3 layout choice: horizontal tool row, roomy side panels, existing usage strip untouched. */
/* 配色：纸与线 / 墨与文字 —— 参考 ui.xiaoxiaodong.ai/foundations/colors（不再用暖奶油底与玫红主色） */
:root:not([data-theme="dark"]) body.phase2-workspace .workspace-wrap{
  --ws-app:#fcfcfc;            /* bg */
  --ws-surface:#ffffff;        /* paper */
  --ws-surface-soft:#f4f4f5;   /* wash */
  --ws-border:#e7e7ea;         /* line */
  --ws-border-strong:#c9c9ce;  /* line-strong */
  --ws-accent:#111111;         /* 主色 = 墨色（该体系默认） */
  --ws-accent-hover:#303030;
  --ws-accent-active:#000000;
  --ws-accent-soft:#ededed;    /* selected-bg */
  --ws-canvas:#f4f4f5;         /* wash */
  --ds-color-accent:#111111;
  --ds-color-accent-hover:#303030;
  --ds-color-accent-active:#000000;
  --ds-color-accent-soft:#ededed;
  --ds-color-focus:#111111;
}
:root[data-theme="dark"] body.phase2-workspace .workspace-wrap{
  --ws-accent:#f3f0ea;         /* ink */
  --ws-accent-hover:#ffffff;
  --ws-accent-active:#d5d0c6;
  --ws-accent-soft:#38362e;    /* selected-bg */
  --ds-color-accent:#f3f0ea;
  --ds-color-accent-hover:#ffffff;
  --ds-color-accent-active:#d5d0c6;
  --ds-color-accent-soft:#38362e;
  --ds-color-focus:#f3f0ea;
}
@media(min-width:1201px){
  body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:var(--ws-pal-col,240px) minmax(0,1fr) var(--ws-task-col,300px)!important}
  body.phase2-workspace .workspace-wrap .ws-parameter-inspector{grid-column:3;grid-row:1}
  body.phase2-workspace .workspace-grid>.ws-center{grid-column:2;grid-row:1}
  body.phase2-workspace .workspace-grid[data-workspace-ready="true"]>.ws-rail{display:none!important}
  body.phase2-workspace .workspace-wrap .ws-palette-summary{grid-column:1;grid-row:1}
}
@media(min-width:761px){
  body.phase2-workspace .ws-topbar{height:58px;min-height:58px;flex-wrap:nowrap;overflow:hidden;gap:6px;padding-inline:14px}
  body.phase2-workspace .ws-brand{flex:0 0 150px;min-width:0}
  body.phase2-workspace .ws-project-identity{flex:0 1 250px;min-width:180px}
  body.phase2-workspace .ws-project-identity :is(#ws-project-meta,.ws-status){display:none}
  body.phase2-workspace .ws-project-identity .ws-name{min-width:70px}
  body.phase2-workspace .ws-topbar-spacer{flex:1 1 8px;min-width:8px}
  body.phase2-workspace .ws-workareas{flex:0 0 auto;gap:2px;padding:3px}
  body.phase2-workspace .ws-workareas button{padding-inline:8px;font-size:12px}
  body.phase2-workspace .ws-topbar .ws-project-menu{order:1}
  body.phase2-workspace .ws-topbar #ws-export-now{order:2}
  body.phase2-workspace .ws-topbar #ws-save-now{order:3}
  body.phase2-workspace .ws-topbar #ws-edit-actions{order:4}
  body.phase2-workspace .ws-topbar #ws-find-feature{order:5}
  body.phase2-workspace .ws-topbar #ws-theme-cycle{order:6}
  body.phase2-workspace .ws-topbar #ws-theme-cycle{margin-left:0;flex:0 0 34px}
  body.phase2-workspace .ws-top-controls{height:auto;min-height:64px;max-height:none;flex-wrap:nowrap;gap:8px;padding:6px 12px;overflow:hidden}
  body.phase2-workspace .ws-grid-toolbar-host{position:static;inset:auto;transform:none;width:auto;min-width:0;max-width:none;flex:1 1 auto;overflow:hidden}
  body.phase2-workspace .sl-grid-toolbar-rail{display:flex!important;flex-direction:row!important;align-items:center;gap:3px;width:max-content;min-width:100%;overflow-x:auto;overflow-y:hidden}
  body.phase2-workspace .sl-grid-toolbar-rail .sl-toolbar-group{display:flex;align-items:center;gap:3px;flex:0 0 auto}
  body.phase2-workspace .sl-grid-toolbar-rail .sl-toolbar-divider{width:1px;height:28px;flex:0 0 1px;margin:0 4px;background:var(--ws-border-strong)}
  body.phase2-workspace .sl-grid-toolbar-rail .sl-toolbar-group>.sl-tool-button{width:auto!important;min-width:40px;height:42px;min-height:42px!important;padding:3px 6px}
  body.phase2-workspace .sl-grid-toolbar-rail>.sl-tool-button,
  body.phase2-workspace .sl-grid-toolbar-rail>.sl-rail-menu>.sl-tool-button{width:auto!important;min-width:40px;height:42px;min-height:42px!important;padding:3px 6px}
  body.phase2-workspace .sl-grid-toolbar-rail .sl-tool-label{display:block;font-size:10px;line-height:12px;white-space:nowrap}
  body.phase2-workspace .ws-top-controls #ws-generation-top-controls{flex:0 1 auto;max-width:330px}
}
@media(max-width:1200px) and (min-width:761px){
  body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:var(--ws-pal-col,176px) minmax(0,1fr) var(--ws-task-col,220px)!important}
  body.phase2-workspace .workspace-wrap .ws-parameter-inspector{grid-column:3;grid-row:1}
  body.phase2-workspace .workspace-grid>.ws-center{grid-column:2;grid-row:1}
  body.phase2-workspace .workspace-grid[data-workspace-ready="true"]>.ws-rail{display:none!important}
  body.phase2-workspace .workspace-wrap .ws-palette-summary{grid-column:1;grid-row:1}
}
@media(max-width:760px){
  body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]>.ws-rail{display:none!important}
  body.phase2-workspace .ws-top-controls{height:auto;min-height:64px;max-height:96px;flex-wrap:wrap;gap:4px;padding:4px 6px;overflow:visible}
  body.phase2-workspace .ws-grid-toolbar-host{position:fixed;z-index:72;left:0;right:0;bottom:0;width:100%;height:58px;transform:none;overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--ws-border);background:var(--ws-surface)}
  body.phase2-workspace .sl-grid-toolbar-rail{display:flex!important;flex-direction:row!important;width:max-content;min-width:100%;height:100%}
  body.phase2-workspace .sl-grid-toolbar-rail>.sl-tool-button,
  body.phase2-workspace .sl-grid-toolbar-rail>.sl-rail-menu>.sl-tool-button{width:48px!important;min-width:48px!important;height:46px!important;min-height:46px!important}
  body.phase2-workspace .sl-grid-toolbar-rail .sl-tool-label{display:none}
}

/* Six-step toolbar/layout wins over legacy responsive declarations above. */
@media(min-width:1201px){body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:var(--ws-pal-col,240px) minmax(0,1fr) var(--ws-task-col,300px)!important}body.phase2-workspace .workspace-grid>.ws-center{grid-column:2;grid-row:1}body.phase2-workspace .workspace-grid>.ws-rail{display:none!important}body.phase2-workspace .workspace-grid>.ws-palette-summary{grid-column:1;grid-row:1}}
@media(max-width:1200px) and (min-width:761px){body.phase2-workspace .workspace-wrap .workspace-grid[data-workspace-ready="true"]{grid-template-columns:270px minmax(0,1fr) 250px!important}body.phase2-workspace .workspace-grid>.ws-center{grid-column:2;grid-row:1}body.phase2-workspace .workspace-grid>.ws-rail{display:none!important}body.phase2-workspace .workspace-grid>.ws-palette-summary{grid-column:3;grid-row:1}}
body.phase2-workspace .ws-parameter-inspector .ws-inspector-scroll{display:flex;flex-direction:column;gap:12px;padding:12px;overflow:auto}
body.phase2-workspace .ws-top-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:36px 24px;align-items:center;gap:2px 8px;padding:4px 10px;overflow:hidden}
body.phase2-workspace .ws-top-controls>#gridEditorToolbar{grid-column:1;grid-row:1;min-width:0;overflow-x:auto;overflow-y:hidden}
body.phase2-workspace .ws-top-controls>.ws-history-actions{grid-column:2;grid-row:1}
body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:3;grid-row:1}
body.phase2-workspace .ws-top-controls>#ws-tool-options{grid-column:1/-1;grid-row:2;display:flex;align-items:center;min-width:0;height:24px;min-height:24px;max-height:24px;overflow-x:auto;overflow-y:hidden;gap:6px;padding:0;border:0;background:transparent}
body.phase2-workspace .ws-top-controls>#ws-tool-options[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options>strong{display:none}
body.phase2-workspace .ws-icon-tool-options{display:flex;align-items:center;gap:4px;flex:0 0 auto}
body.phase2-workspace .ws-icon-tool-options[hidden],body.phase2-workspace .ws-context-group[hidden]{display:none!important}
body.phase2-workspace .ws-icon-tool-options-button,body.phase2-workspace .ws-icon-tool-options>button{display:inline-grid;place-items:center;position:relative;box-sizing:border-box;width:26px;height:24px;min-height:24px;padding:1px;border:1px solid var(--ws-border);border-radius:7px;background:var(--ws-surface);color:var(--ws-text-secondary);cursor:pointer}
body.phase2-workspace .ws-icon-tool-options-button[aria-pressed="true"],body.phase2-workspace .ws-icon-tool-options>button[aria-pressed="true"]{background:var(--ws-accent);border-color:var(--ws-accent);color:var(--ds-color-on-accent)}
body.phase2-workspace .ws-icon-tool-options svg{width:16px;height:16px}
body.phase2-workspace .ws-step-content>.ws-panel:not([hidden]){display:block!important;min-width:0}
body.phase2-workspace #ws-size-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
body.phase2-workspace #ws-size-controls .ws-size-chips{display:flex;gap:4px}
body.phase2-workspace #ws-size-controls .ws-size-slider{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
body.phase2-workspace #ws-size-controls .ws-size-slider input[type="number"]{width:68px}
@media(max-width:760px){body.phase2-workspace .ws-top-controls{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px 24px}body.phase2-workspace .ws-top-controls>#zoomControls{grid-column:2}body.phase2-workspace .ws-top-controls>.ws-history-actions{display:none}}

/* Final ID-specific override: legacy #ws-top-controls rules above used to constrain the parameter row to 24px. */
body.phase2-workspace #ws-top-controls{height:auto!important;min-height:42px!important;max-height:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;grid-template-rows:minmax(40px,auto) auto!important;align-items:start!important;overflow:visible!important}
body.phase2-workspace #ws-top-controls>#gridEditorToolbar{grid-column:1!important;grid-row:1!important;min-width:0;overflow-x:auto;overflow-y:hidden}
body.phase2-workspace #ws-top-controls>.ws-v3-shortcuts{grid-column:2!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>.ws-history-actions{grid-column:3!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>#zoomControls{grid-column:4!important;grid-row:1!important}
body.phase2-workspace #ws-top-controls>#ws-tool-options:not([hidden]){grid-column:1/-1!important;grid-row:2!important;display:flex!important;height:auto!important;min-height:30px!important;max-height:none!important;overflow:visible!important;align-self:start}
body.phase2-workspace #ws-top-controls>#ws-tool-options[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options .ws-context-group[hidden],body.phase2-workspace #ws-tool-options .ws-icon-tool-options[hidden]{display:none!important}
@media(max-width:760px){body.phase2-workspace #ws-top-controls{grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-rows:minmax(38px,auto) auto!important}body.phase2-workspace #ws-top-controls>.ws-v3-shortcuts{grid-column:2!important}body.phase2-workspace #ws-top-controls>.ws-history-actions{display:none!important}body.phase2-workspace #ws-top-controls>#zoomControls{grid-column:3!important}}

/* Tool parameters form one horizontal row; sliders follow their label/value. */
body.phase2-workspace .ws-top-controls#ws-top-controls>#ws-tool-options[data-active-tool="text"]{display:none!important}
body.phase2-workspace .ws-topbar{position:relative;z-index:90;overflow:visible!important}
body.phase2-workspace .ws-parameter-inspector #ws-edit-actions .ws-output-menu-list{position:static;width:auto;box-shadow:none;margin-top:6px}
body.phase2-workspace #ws-top-controls>#ws-tool-options:not([hidden]){flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;align-items:center!important;padding-block:5px;min-height:38px!important}
body.phase2-workspace #ws-tool-options .ws-context-group{flex:0 0 auto;flex-wrap:nowrap!important;white-space:nowrap;align-items:center}
body.phase2-workspace #ws-tool-options :is(.ws-source-slider,.ws-field,.ws-switch-row){display:flex!important;flex-direction:row!important;align-items:center;flex-wrap:nowrap;gap:6px;margin:0;white-space:nowrap}
body.phase2-workspace #ws-tool-options .ws-source-slider input[type="range"]{grid-column:auto!important;width:96px!important;min-width:96px;flex:0 0 96px;margin:0}
body.phase2-workspace #ws-tool-options .ws-flat-options{display:flex;flex-wrap:nowrap;gap:4px}
body.phase2-workspace #ws-tool-options .ws-brush-shape-options button{display:grid;place-items:center;width:30px;height:28px;padding:4px}
body.phase2-workspace #ws-tool-options .ws-brush-shape-options svg{width:18px;height:18px;fill:currentColor;stroke:none}

/* Size controls reuse the existing form in the single parameter row. */
body.phase2-workspace #gridEditorToolbar .ws-v3-shortcuts{gap:3px;margin-right:5px}
body.phase2-workspace #gridEditorToolbar .ws-v3-shortcuts button{background:transparent;border-color:transparent;box-shadow:none;width:34px;height:36px;color:var(--ws-text-secondary)}
body.phase2-workspace #gridEditorToolbar .ws-v3-shortcuts button:not(:disabled):hover{background:var(--ws-accent-soft)}
body.phase2-workspace #gridEditorToolbar .ws-v3-shortcuts button[aria-expanded="true"]{color:var(--ws-accent)}
body.phase2-workspace #gridEditorToolbar .ws-v3-shortcuts button:disabled{opacity:.45;cursor:default}
body.phase2-workspace .ws-top-controls#ws-top-controls>#ws-tool-options[data-settings="size"]{display:flex!important}
body.phase2-workspace #ws-tool-options[data-settings="size"]>:not(.ws-inline-size){display:none!important}
.ws-inline-size[hidden]{display:none!important}
body.phase2-workspace .ws-inline-size{display:flex;align-items:center;gap:9px;flex:0 0 auto;white-space:nowrap}
body.phase2-workspace .ws-inline-size #ws-resize-dialog[open]{display:block;position:static;width:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;box-shadow:none;overflow:visible;background:transparent;color:var(--ws-text)}
body.phase2-workspace .ws-inline-size :is(.ws-resize-card,.ws-resize-body,.ws-resize-foot,.ws-selection-actions,.ws-resize-presets,.ws-resize-modes,.ws-size-block,#ws-size-controls,.ws-size-chips){display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:7px;margin:0;padding:0;border:0;background:transparent;width:auto}
body.phase2-workspace .ws-inline-size :is(.ws-resize-head,.ws-section-title,.ws-resize-warning,.ws-resize-modes legend,.ws-resize-presets>span){display:none}
body.phase2-workspace .ws-inline-size label{display:flex;align-items:center;gap:4px;white-space:nowrap}
body.phase2-workspace .ws-inline-size input[type="number"]{width:56px;min-height:28px;padding:3px 5px}
body.phase2-workspace .ws-inline-size input[type="range"]{width:90px;min-width:90px;margin:0}
body.phase2-workspace .ws-inline-size .ws-anchor-grid{display:none}
body.phase2-workspace .ws-inline-size .ws-anchor-grid label{width:18px;height:22px;min-height:0}
body.phase2-workspace .ws-inline-size #ws-resize-anchor-wrap[hidden]{display:none}
body.phase2-workspace .ws-inline-size .ws-size-slider output{display:flex;gap:4px;margin:0}

/* Compact export options: preview, short controls, existing download actions. */
body.phase2-workspace #ws-export-drawer.ws-export-compact{position:fixed;z-index:250;inset:16px 18px auto auto;width:min(560px,calc(100vw - 36px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:20px 22px;border:1px solid var(--ws-border-strong);border-radius:5px;background:var(--ws-surface);box-shadow:0 12px 40px #00000024;overflow-x:hidden;overflow-y:auto}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-drawer-head{padding:0 0 12px;border:0;font-size:20px;line-height:1.4}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-output-tasks{position:static;border:0;margin:0 0 14px;padding:0;gap:5px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-output-tasks button{min-height:32px;border:1px solid var(--ws-border);border-radius:3px;background:transparent;font-size:12px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-output-tasks button.active{border-color:var(--ws-accent);color:var(--ws-accent);background:var(--ws-accent-soft);box-shadow:none}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-preview{margin:0 0 14px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-preview-image{display:flex;align-items:center;justify-content:center;padding:8px;border:2px solid var(--ws-border-strong);background:var(--ds-color-surface);min-height:120px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-preview-image canvas{display:block;max-width:100%;max-height:min(42dvh,390px);width:auto;height:auto;object-fit:contain}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-preview figcaption{margin-top:6px;font-size:11px;line-height:1.5;color:var(--ws-text-muted)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-options{display:flex!important;flex-wrap:wrap;gap:10px 14px;margin:0 0 12px;padding:0;border:0;background:transparent}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-options>label{display:flex;flex:1 1 210px;align-items:center;justify-content:space-between;gap:8px;margin:0;min-width:0;white-space:nowrap}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-options select{flex:1 1 auto;width:auto;max-width:220px;min-width:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-options>label:has(input[type="checkbox"]){justify-content:flex-start;flex-basis:100%;white-space:normal}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggles{display:flex;flex-wrap:wrap;gap:8px;width:100%}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:2px solid var(--ws-border-strong);border-radius:2px;font-size:15px;color:var(--ws-text)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle input{position:absolute;opacity:0;width:1px;height:1px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle span{display:flex;align-items:center;gap:7px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle svg{width:17px;height:17px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle:has(input:checked){border-color:var(--ws-accent);background:var(--ws-accent-soft)}
/* 键盘Tab可达才显示焦点环；鼠标点击不套外框（与参考一致） */
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle:has(input:focus-visible){outline:2px solid var(--ws-accent);outline-offset:3px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-resolution-hint{flex:0 0 100%;font-size:11px}
/* 图纸 / 海报 风格切换（预览下方分段控件） */
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-style-switch{display:flex;gap:8px;margin:0 0 12px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-style-switch button{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-height:36px;padding:0 14px;border:1.5px solid var(--ws-border-strong);border-radius:4px;background:var(--ds-color-surface);color:var(--ws-text);font-size:14px;font-weight:600;cursor:pointer;transition:border-color 120ms var(--ds-ease),background 120ms var(--ds-ease),color 120ms var(--ds-ease)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-style-switch button:hover{border-color:var(--ws-accent)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-style-switch button[aria-pressed="true"]{border-color:var(--ws-accent);background:var(--ws-accent);color:var(--ds-color-on-accent)}
/* 海报点选行：比例 / 背景 / 作品大小 / 衬纸 */
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings{gap:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;width:100%;padding:7px 0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-row+.ws-export-quick-row{border-top:1px solid var(--ws-border)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-row>span{flex:0 0 auto;min-width:56px;font-size:13px;line-height:1.3;color:var(--ws-text-secondary)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-options button{display:flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border:1.5px solid var(--ws-border-strong);border-radius:4px;background:var(--ds-color-surface);color:var(--ws-text);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:border-color 120ms var(--ds-ease),background 120ms var(--ds-ease),color 120ms var(--ds-ease)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-options button:hover{border-color:var(--ws-accent)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-options button[aria-pressed="true"]{border-color:var(--ws-accent);background:var(--ws-accent);color:var(--ds-color-on-accent)}
/* 背景行：末尾自定义取色（颜色输入本体即色块） */
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background .ws-export-background-picker{display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background .ws-export-background-picker input[type="color"]{width:34px;height:34px;padding:2px;border:1.5px solid var(--ws-border-strong);border-radius:4px;background:var(--ds-color-surface);cursor:pointer;transition:border-color 120ms var(--ds-ease),box-shadow 120ms var(--ds-ease)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background .ws-export-background-picker:hover input[type="color"]{border-color:var(--ws-accent)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background .ws-export-background-picker.is-active input[type="color"]{border-color:var(--ws-accent);box-shadow:inset 0 0 0 1.5px var(--ws-accent)}
/* 自定义颜色控件：色块 + HEX 输入内联成一行 */
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background .ws-poster-solid-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background .ws-poster-solid-controls label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ws-text-secondary);white-space:nowrap}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background .ws-poster-solid-controls #ws-poster-solid-hex{width:88px;height:34px;padding:0 8px;border:1.5px solid var(--ws-border-strong);border-radius:4px;background:var(--ds-color-surface);color:var(--ws-text);font-size:12px;font-family:var(--ws-font)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-more{margin:10px 0 14px;border-top:1px solid var(--ws-border);padding-top:9px;width:100%}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-more summary{cursor:pointer;font-size:13px;color:var(--ws-text-secondary)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-more-body{display:grid;gap:10px;padding-top:12px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-more-body label{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;align-items:center;font-size:13px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-more-body small{grid-column:1/-1;color:var(--ws-text-muted);font-size:11px;line-height:1.5}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-more-body label:has(input[type="checkbox"]){display:flex;gap:6px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-choice{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin:0;padding:9px 12px;border:2px solid var(--ws-border-strong);border-radius:2px;background:var(--ws-surface);color:var(--ws-text);text-align:center;box-sizing:border-box}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-choice strong{font-size:15px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-choice small{display:none}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-action-icon svg{display:block;width:21px;height:21px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-actions>.ws-export-choice:first-child{background:var(--ws-accent);border-color:var(--ws-accent);color:var(--ds-color-on-accent)}
body.phase2-workspace #ws-export-drawer.ws-export-compact [data-output-panel="poster"] #ws-poster-preview{position:static;display:block;max-width:100%;max-height:38dvh;width:auto;height:auto;margin:0 auto;object-fit:contain;border:2px solid var(--ws-border-strong)}
body.phase2-workspace #ws-export-drawer.ws-export-compact #ws-poster-background-status{width:100%;line-height:1.5;font-size:11px}
body.phase2-workspace #ws-export-drawer.ws-export-compact #ws-export-message:empty{display:none}
@media(max-width:600px){body.phase2-workspace #ws-export-drawer.ws-export-compact{inset:8px 8px auto;width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px}body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-preview-image canvas{max-height:34dvh}body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-output-tasks button{padding-inline:3px;font-size:11px}}

/* One shared symmetry control for drawing and erasing. */
body.phase2-workspace #gridEditorToolbar .ws-toolbar-symmetry{display:flex;align-items:center;gap:2px;border-left:1px solid var(--ws-border);padding-left:5px;margin-left:4px;flex:0 0 auto}
body.phase2-workspace #gridEditorToolbar .ws-toolbar-symmetry button{display:grid;place-items:center;width:30px;height:34px;padding:4px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ws-text-secondary);cursor:pointer}
body.phase2-workspace #gridEditorToolbar .ws-toolbar-symmetry svg{width:22px;height:22px}
body.phase2-workspace #gridEditorToolbar .ws-toolbar-symmetry button[aria-pressed="true"]{border-color:var(--ws-accent);color:var(--ws-accent);background:var(--ws-accent-soft)}
body.phase2-workspace #ws-tool-options .ws-inline-symmetry{display:flex;align-items:center;gap:8px;padding:0;margin:0;border:0;background:transparent}
body.phase2-workspace #ws-tool-options .ws-inline-symmetry[hidden],body.phase2-workspace #ws-tool-options .ws-inline-symmetry label[hidden]{display:none!important}
body.phase2-workspace #ws-tool-options .ws-inline-symmetry .ws-selection-actions{display:flex;flex-wrap:nowrap;gap:8px;margin:0}
body.phase2-workspace #ws-tool-options .ws-symmetry-axis-slider{display:flex;align-items:center;gap:5px;white-space:nowrap}
body.phase2-workspace #ws-tool-options .ws-symmetry-axis-slider input{width:96px;min-width:96px;margin:0}
body.phase2-workspace #ws-tool-options .ws-symmetry-center{display:grid;place-items:center;width:28px;height:28px;padding:4px;background:transparent;border:1px solid var(--ws-border);border-radius:5px;color:var(--ws-text-secondary)}
body.phase2-workspace #ws-tool-options .ws-symmetry-center svg{width:19px;height:19px}
.ws-inline-outline[hidden]{display:none!important}
body.phase2-workspace .ws-top-controls#ws-top-controls>#ws-tool-options[data-settings="outline"]{display:flex!important}
body.phase2-workspace #ws-tool-options[data-settings="outline"]>:not(.ws-inline-outline){display:none!important}
body.phase2-workspace #ws-tool-options .ws-inline-outline .ws-outline-controls{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin:0;padding:0;border:0;white-space:nowrap}
body.phase2-workspace #ws-tool-options .ws-inline-outline :is(.ws-field,.ws-selection-actions){display:flex;align-items:center;flex-wrap:nowrap;gap:5px;margin:0;white-space:nowrap}
body.phase2-workspace #ws-tool-options .ws-inline-outline .ws-section-title{display:none}
body.phase2-workspace #ws-tool-options .ws-inline-outline .ws-outline-controls>button{width:auto;flex:0 0 auto}
body.phase2-workspace #ws-tool-options .ws-inline-outline #ws-outline-summary{margin:0;flex:0 0 auto;font-size:11px}
body.phase2-workspace #ws-tool-options .ws-inline-outline .ws-selection-actions>label{display:flex!important;flex-direction:row!important;align-items:center;gap:5px;white-space:nowrap}
body.phase2-workspace #gridEditorToolbar #ws-toolbar-outline[aria-pressed="true"]{display:flex;gap:5px;width:auto!important;min-width:66px!important;max-width:none!important;color:var(--ws-accent);border-color:var(--ws-accent);background:var(--ws-accent-soft)}
body.phase2-workspace #gridEditorToolbar #ws-toolbar-outline[aria-pressed="true"] .sl-tool-label{display:inline!important}
body.phase2-workspace #gridEditorToolbar:has(#ws-toolbar-outline[aria-pressed="true"]) [data-tool="select"].is-active{width:34px!important;min-width:34px!important;background:transparent;border-color:transparent;color:var(--ws-text-secondary)}
body.phase2-workspace #gridEditorToolbar:has(#ws-toolbar-outline[aria-pressed="true"]) [data-tool="select"].is-active .sl-tool-label{display:none!important}

/* One centered export sheet: stable preview and dimensions across all tasks. */
body.phase2-workspace .ws-step-card[data-ws-step="2"]{display:none}
body.phase2-workspace .ws-project-information{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--ws-border)}
body.phase2-workspace .ws-project-information #ws-project-info{border:0;background:transparent;font-size:16px;font-weight:700;padding:0;margin-bottom:9px;cursor:pointer;color:var(--ws-text)}
body.phase2-workspace .ws-project-information .ws-field{margin:0}
body.phase2-workspace .ws-project-information-body[hidden]{display:none!important}
body.phase2-workspace .ws-project-information-body .ws-panel{display:block!important}
body.phase2-workspace .ws-inline-size .ws-selection-actions[hidden]{display:none!important}
body.phase2-workspace .ws-live-size{display:flex;align-items:center;gap:9px;white-space:nowrap}
body.phase2-workspace .ws-live-size input{width:150px;min-width:80px}
/* 「尺寸设置」滑杆逐格化：细区 1 格/位置需要约 150px 轨道（原生 90px 每拖 1px 跳 11 格）。
   150px 是本样式的原始设计宽度，此前被 .ws-inline-size 的 90px 规则压掉。
   特异性必须压过 #ws-tool-options input[type=range]{width:70px} 与 .ws-inline-size 的 90px。 */
body.phase2-workspace #ws-tool-options .ws-live-size input[type="range"]{flex:0 1 150px;width:150px;min-width:120px;max-width:none}
body.phase2-workspace .ws-live-size .ws-size-step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:24px;padding:0;border:1px solid var(--ws-border);border-radius:6px;background:var(--ws-surface);color:var(--ws-text);font-size:15px;line-height:1;cursor:pointer}
body.phase2-workspace .ws-live-size .ws-size-step:hover{border-color:var(--ws-accent);color:var(--ws-accent)}
@media(pointer:coarse){body.phase2-workspace .ws-live-size .ws-size-step{width:30px;height:30px;min-width:30px;font-size:17px}}
body.phase2-workspace .ws-inline-expand{display:flex;gap:5px;flex:0 0 auto;align-items:center}
body.phase2-workspace .ws-inline-expand button{white-space:nowrap}
body.phase2-workspace .ws-inline-size #ws-size-number{display:none}
body.phase2-workspace .ws-inline-size .ws-resize-foot{display:none!important}
body.phase2-workspace .ws-text-style label{white-space:nowrap;display:flex;align-items:center;gap:6px}
body.phase2-workspace .ws-text-style select{min-width:90px;max-width:160px}
body.phase2-workspace #ws-export-drawer.ws-export-compact{inset:50% auto auto 50%!important;width:min(640px,calc(100vw - 28px));height:min(920px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:18px 20px;display:flex;flex-direction:column;overflow:hidden;transform:translate(-50%,-50%)!important}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-drawer-head{flex:0 0 auto;padding-bottom:10px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-name{display:flex;flex-direction:row;align-items:center;gap:10px;flex:0 0 auto;margin-bottom:10px;font-size:13px;white-space:nowrap}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-name input{flex:1;min-width:0;height:32px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-output-tasks{flex:0 0 auto;margin-bottom:10px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-output-tasks [data-output-task="poster"]{display:none}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-preview{flex:0 0 auto;margin:0 0 9px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-preview .ws-export-preview-image{height:clamp(160px,30dvh,300px);min-height:0;padding:6px;box-sizing:border-box;overflow:hidden;background-color:var(--ds-color-on-accent);background-image:linear-gradient(45deg,var(--ds-color-surface-pressed) 25%,transparent 25%),linear-gradient(-45deg,var(--ds-color-surface-pressed) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--ds-color-surface-pressed) 75%),linear-gradient(-45deg,transparent 75%,var(--ds-color-surface-pressed) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-preview canvas,body.phase2-workspace #ws-export-drawer.ws-export-compact #ws-poster-preview{position:static;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:0;border:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-preview canvas[hidden]{display:none!important}
body.phase2-workspace #ws-export-drawer.ws-export-compact [data-output-panel]:not([hidden]){flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:1px 2px 0}

/* 即时 tooltip：图标悬停 → 含义瞬显。基准过渡 140ms（离开淡回），
   .is-on 上 transition-duration:0s（进入立即）。配色随主题反转。 */
.ws-tooltip{position:fixed;z-index:2147483647;max-width:240px;padding:5px 9px;border-radius:6px;background:var(--ds-color-text-strong);color:var(--ds-color-on-accent);font-size:12px;line-height:1.45;font-weight:500;letter-spacing:.01em;box-shadow:var(--ds-shadow-overlay);opacity:0;pointer-events:none;white-space:normal;transition:opacity 140ms var(--ds-ease)}
.ws-tooltip.is-on{opacity:1;transition-duration:0s}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-style-switch{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin:0 0 9px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-style-switch[hidden]{display:none}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-style-switch button,body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-options button{min-height:30px;padding:4px 10px;border:1px solid var(--ws-border-strong);border-radius:3px;background:var(--ws-surface);color:var(--ws-text);font-size:12px;cursor:pointer}
body.phase2-workspace #ws-export-drawer.ws-export-compact :is(.ws-export-style-switch,.ws-export-quick-options) button[aria-pressed="true"]{border-color:var(--ws-accent);background:var(--ws-accent-soft);color:var(--ws-accent)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggles{gap:7px;flex-wrap:nowrap}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle{min-height:36px;padding-inline:12px;font-size:13px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle[aria-pressed="true"]{border-color:var(--ws-accent);background:var(--ws-accent-soft)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings{display:grid!important;grid-template-columns:1fr;gap:9px 12px;align-items:start;padding-bottom:10px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings>*{grid-column:1!important;grid-row:auto}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-preview canvas{background:transparent}
body.phase2-workspace #ws-export-drawer.ws-export-compact{z-index:10020}
body.phase2-workspace #ws-export-drawer.ws-export-compact [hidden]{display:none!important}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background{grid-column:1/-1}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background-swatch.transparent{background:conic-gradient(var(--ds-color-border-strong) 25%,var(--ds-color-surface) 0 50%,var(--ds-color-border-strong) 0 75%,var(--ds-color-surface) 0) 0 0/12px 12px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background-custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0;font-size:12px;margin:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-row>span:first-child{white-space:nowrap;color:var(--ws-text-secondary)}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-quick-options{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings .ws-export-quick-row:has(#ws-poster-ratio),body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings .ws-export-quick-row:has(#ws-poster-background){grid-column:1/-1}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-background-swatch{width:30px;height:30px;min-height:30px!important;padding:0!important;border-width:2px!important;border-radius:2px!important}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings label{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;margin:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings input:not([type="checkbox"]):not([type="color"]){min-width:0;width:100%;height:30px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings input[type="color"]{width:30px;height:30px;padding:1px;border:1px solid var(--ws-border-strong);border-radius:2px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-actions{flex:0 0 auto;margin-top:auto;padding-top:12px;position:sticky;bottom:0;background:var(--ws-surface)}
body.phase2-workspace #ws-export-drawer.ws-export-compact [data-output-panel="project"] .ws-export-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
body.phase2-workspace #ws-export-drawer.ws-export-compact [data-output-panel="poster"] .ws-export-actions{grid-template-columns:1fr}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-choice{min-height:42px;padding:7px 9px}
body.phase2-workspace #ws-export-drawer.ws-export-compact #ws-export-message{flex:0 0 auto;margin:8px 0 0;font-size:11px;line-height:1.4}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-build-split{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:12px;font-size:12px}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-build-split .ws-section-title{font-size:13px;margin:0}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-build-split .ws-stepper{display:flex;gap:6px;align-items:center}
body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-build-split p{flex-basis:100%;margin:0;font-size:11px}
@media(max-width:600px){body.phase2-workspace #ws-export-drawer.ws-export-compact{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:14px}body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-common-preview .ws-export-preview-image{height:clamp(150px,27dvh,250px)}body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-poster-settings{grid-template-columns:1fr}body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggles{gap:5px}body.phase2-workspace #ws-export-drawer.ws-export-compact .ws-export-toggle{padding-inline:8px;font-size:12px}body.phase2-workspace #ws-export-drawer.ws-export-compact [data-output-panel="project"] .ws-export-choice{padding-inline:4px;font-size:11px}body.phase2-workspace #ws-export-drawer.ws-export-compact [data-output-panel="project"] .ws-export-choice strong{font-size:12px}}

/* ── 顶栏「参考图透明度」（用户 2026-10-16 决策）─────────────────────────────
   原先它是右栏最左侧一根 30px 宽的**竖向**滑杆：调参考图浓淡时手要横跨整个工作台
   跑到右栏，而那根竖条还把色板内容列挤窄了。现在搬到顶栏工具行的第 4 列（最右），
   与工具条 / 更多工具同一行、**横向**摆放。节点与状态都没换 —— 仍是同一个
   #ws-ref-opacity、同一份 reference.opacity，只是换了挂载位置与朝向。 */
body.phase2-workspace #ws-top-controls>#ws-top-ref-opacity{grid-column:3/-1!important;grid-row:2!important;justify-self:end;display:flex;align-items:center;gap:5px;height:28px;padding:0 4px;white-space:nowrap;flex:0 0 auto;max-width:min(300px,45vw);min-width:0;overflow-x:auto}
body.phase2-workspace #ws-top-controls>#ws-top-ref-opacity[hidden]{display:none!important}
body.phase2-workspace #ws-top-ref-opacity .ws-ref-opacity-field{display:flex!important;align-items:center;gap:6px;margin:0;font-size:12px;color:var(--ws-text-secondary);white-space:nowrap}
body.phase2-workspace #ws-top-ref-opacity .ws-ref-opacity-field input[type="range"]{width:88px;min-width:88px;flex:0 0 88px;margin:0;accent-color:var(--ws-accent)}
body.phase2-workspace #ws-top-ref-opacity #ws-ref-opacity-value{font-size:11px;min-width:30px;color:var(--ws-text-tertiary);font-variant-numeric:tabular-nums}
body.phase2-workspace #ws-top-ref-opacity #ws-ref-remove{width:22px;height:22px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--ws-text-tertiary);font-size:14px;line-height:1;cursor:pointer}
body.phase2-workspace #ws-top-ref-opacity #ws-ref-remove:hover{background:var(--ws-surface-soft);color:var(--ds-color-danger)}
/* 窄屏顶栏只有 3 列（第 4 列不存在，硬写 4 会撑出隐式轨道）→ 落到最右的可用列。 */
@media(max-width:760px){body.phase2-workspace #ws-top-controls>#ws-top-ref-opacity{max-width:100%;min-width:0;overflow-x:auto}}

/* ============================================================================
   导入带色号的图纸（顶栏「新建 / 导入」→ 导入现成图纸）
   布局：工具行 → 状态行 → [左：原图/色号图纸预览 + 视图切换 | 右：改色卡 + 用量]
   全部颜色走 --ds-* / --ws-* 令牌，暗色由 :root[data-theme="dark"] 那条
   .ws-help-dialog 规则统一翻面，这里不写死任何亮暗色（豆格色块除外 —— 那是作品数据）。
   ==========================================================================*/
/* <dialog> 未打开时靠 UA 的 dialog:not([open]){display:none} 隐藏，而**作者样式
   优先级永远高于 UA 样式** —— 一旦给 .ws-pattern-import 写了 display:flex，
   没打开的对话框就会一直挂在画布上。所以未打开态必须显式写死 display:none。
   选择器带上 .ws-help-dialog 是为了压过 generation-editor.css 里那条
   .phase2-workspace .ws-help-dialog{width:min(760px,92vw)}（那条加载在后面）。

   **定位必须自己钉死，不能靠 UA 的 dialog:modal 居中**：UA 的居中规则
   （margin:auto）在 Chrome 生效，但 Safari 等浏览器会把模态对话框摆在
   top:0 甚至拉高 —— 用户实测「面板压住工具栏」就是这么来的（标题行与顶栏
   同行、说明文字与工具栏图标行重叠）。写法：position:fixed + top/left 50%
   + translate(-50%,-50%)，不设 bottom/right（高度 = 内容，任何浏览器都
   拉不高），margin:0 顶掉 UA 的 auto 边距，justify-content:flex-start
   钉死内部分配（万一被拉高也不把页脚推到底部）。 */
.phase2-workspace .ws-help-dialog.ws-pattern-import:not([open]){display:none}
.phase2-workspace .ws-help-dialog.ws-pattern-import{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:min(1080px,94vw);max-height:88vh;display:flex;flex-direction:column;justify-content:flex-start}
/* 手动调整态：画布十字光标（框选手感）；非调整态回到默认（色号图纸视图点格编辑）。 */
.phase2-workspace .ws-pattern-import.ws-pi-adjusting .ws-pi-canvas-box canvas{cursor:crosshair}
.phase2-workspace .ws-pattern-import:not(.ws-pi-adjusting) .ws-pi-canvas-box canvas{cursor:default}
.phase2-workspace .ws-pattern-import .ws-note{margin:12px 18px 0;font-size:12px;color:var(--ds-color-text-tertiary)}
/* 工具行：选图 / 两个开关 / 占位 / 格子像素 / 重新选择 */
.phase2-workspace .ws-pattern-import .ws-pi-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 18px 0;padding:9px 12px;border:1px solid var(--ws-border);border-radius:10px;background:var(--ds-color-surface-soft)}
.phase2-workspace .ws-pattern-import .ws-pi-toolbar label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ds-color-text-secondary);white-space:nowrap}
.phase2-workspace .ws-pattern-import .ws-pi-spacer{flex:1 1 auto}
.phase2-workspace .ws-pattern-import .ws-pi-cell{display:inline-flex;align-items:center;gap:6px}
.phase2-workspace .ws-pattern-import .ws-pi-cell input{width:64px;min-height:28px;padding:2px 6px;border:1px solid var(--ws-border);border-radius:6px;background:var(--ds-color-surface);color:var(--ds-color-text);font-size:12px}
.phase2-workspace .ws-pattern-import .ws-pi-cell input:disabled{opacity:.5}
/* 状态行：识别摘要 + 告警。warn 用 danger 色而不是自己造一个警告色。 */
.phase2-workspace .ws-pattern-import .ws-pi-status{margin:10px 18px 0;font-size:12px;line-height:1.5;color:var(--ds-color-text-secondary)}
.phase2-workspace .ws-pattern-import .ws-pi-status[data-tone="warn"]{color:var(--ds-color-danger)}
.phase2-workspace .ws-pattern-import .ws-pi-body{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:14px;padding:12px 18px 0;min-height:0;overflow:hidden}
@media(max-width:860px){.phase2-workspace .ws-pattern-import .ws-pi-body{grid-template-columns:1fr;overflow-y:auto}}
/* 左：画布 + 视图切换 */
.phase2-workspace .ws-pattern-import .ws-pi-view{display:flex;flex-direction:column;gap:8px;min-width:0}
.phase2-workspace .ws-pattern-import .ws-pi-canvas-box{flex:1 1 auto;min-height:220px;max-height:52vh;overflow:auto;border:1px solid var(--ws-border);border-radius:10px;background:var(--ds-color-canvas);padding:6px}
.phase2-workspace .ws-pattern-import .ws-pi-canvas-box canvas{display:block;margin:0 auto;image-rendering:pixelated}
.phase2-workspace .ws-pattern-import .ws-pi-view-switch{display:flex;gap:8px}
/* 右：改色卡 + 用量 */
.phase2-workspace .ws-pattern-import .ws-pi-side{display:flex;flex-direction:column;gap:12px;min-width:0;overflow-y:auto;padding-right:2px}
.phase2-workspace .ws-pattern-import .ws-pi-editor,.phase2-workspace .ws-pattern-import .ws-pi-usage{border:1px solid var(--ws-border);border-radius:10px;background:var(--ds-color-surface-soft);padding:10px 12px}
.phase2-workspace .ws-pattern-import .ws-pi-editor-head,.phase2-workspace .ws-pattern-import .ws-pi-usage-head{font-size:12px;font-weight:650;color:var(--ds-color-text-strong);margin-bottom:8px}
.phase2-workspace .ws-pattern-import .ws-pi-kv{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:2px 0;color:var(--ds-color-text-tertiary)}
.phase2-workspace .ws-pattern-import .ws-pi-kv b{color:var(--ds-color-text);font-weight:600}
/* 候选色号：4 列小卡，色块 + 色号 + 色差 */
.phase2-workspace .ws-pattern-import .ws-pi-cands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.phase2-workspace .ws-pattern-import .ws-pi-cand{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;border:1px solid var(--ws-border);border-radius:7px;background:var(--ds-color-surface);cursor:pointer;font-size:11px;color:var(--ds-color-text)}
.phase2-workspace .ws-pattern-import .ws-pi-cand:hover{border-color:var(--ds-color-accent)}
.phase2-workspace .ws-pattern-import .ws-pi-cand.is-on{border-color:var(--ds-color-accent);box-shadow:0 0 0 2px var(--ds-color-accent-soft)}
.phase2-workspace .ws-pattern-import .ws-pi-cand i{display:block;width:100%;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.phase2-workspace .ws-pattern-import .ws-pi-cand span{font-weight:600}
.phase2-workspace .ws-pattern-import .ws-pi-cand small{color:var(--ds-color-text-tertiary);font-variant-numeric:tabular-nums}
.phase2-workspace .ws-pattern-import .ws-pi-editor-actions{display:flex;gap:8px;margin-top:9px}
/* Stable tool shelf: reserve the parameter row even when its contents close.
   Complex text/object settings continue to use the existing inspector. */
body.phase2-workspace #ws-top-controls{
  box-sizing:border-box!important;
  height:76px!important;min-height:76px!important;max-height:76px!important;
  grid-template-rows:34px 34px!important;
  row-gap:2px!important;padding-block:2px!important;
  flex-shrink:0;align-content:start!important;
}
body.phase2-workspace #ws-top-controls>#ws-tool-options:not([hidden]){
  box-sizing:border-box!important;height:34px!important;
  min-height:34px!important;max-height:34px!important;
  min-width:0;width:100%;align-self:stretch!important;
  flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:thin;
  padding-block:0!important;
}
body.phase2-workspace #ws-tool-options :is(button,label,select){flex-shrink:0;white-space:nowrap}
body.phase2-workspace #ws-top-controls>#gridEditorToolbar{
  min-height:0!important;height:34px!important;align-self:center;
}
body.phase2-workspace #ws-top-controls #gridEditorToolbar .sl-grid-toolbar-rail{
  height:34px!important;min-height:0!important;gap:3px;padding-block:0!important;
}
body.phase2-workspace #ws-top-controls #gridEditorToolbar .sl-tool-button{
  box-sizing:border-box;height:26px!important;min-height:26px!important;
  padding:2px 5px!important;border-radius:5px!important;
}
body.phase2-workspace #ws-top-controls #gridEditorToolbar .sl-tool-icon svg{width:18px!important;height:18px!important}
body.phase2-workspace #ws-top-controls #gridEditorToolbar .sl-tool-label{font-size:12px!important;line-height:1!important;font-weight:500}
body.phase2-workspace #ws-top-controls #gridEditorToolbar .sl-toolbar-divider{height:18px!important;margin-inline:3px}
body.phase2-workspace #ws-tool-options{font-size:12px;line-height:1.2;gap:6px}
body.phase2-workspace #ws-tool-options :is(button,select,input[type="number"]){
  box-sizing:border-box;height:26px!important;min-height:26px!important;
  padding:2px 6px!important;font-size:12px!important;line-height:1.2!important;border-radius:5px;
}
body.phase2-workspace #ws-top-controls>:is(.ws-v3-shortcuts,.ws-history-actions,#zoomControls,#ws-top-ref-opacity){
  height:34px!important;min-height:0!important;align-items:center;
}
body.phase2-workspace #ws-top-controls>:is(.ws-v3-shortcuts,.ws-history-actions,#zoomControls,#ws-top-ref-opacity) button{
  box-sizing:border-box;height:28px!important;min-height:28px!important;padding-block:2px!important;font-size:12px;
}
@media(pointer:coarse){
  body.phase2-workspace #ws-top-controls{height:88px!important;min-height:88px!important;max-height:88px!important;grid-template-rows:40px 40px!important}
  body.phase2-workspace #ws-top-controls>#ws-tool-options:not([hidden]){height:40px!important;min-height:40px!important;max-height:40px!important}
  body.phase2-workspace #ws-top-controls #gridEditorToolbar .sl-tool-button,
  body.phase2-workspace #ws-tool-options :is(button,select,input[type="number"]){height:32px!important;min-height:32px!important}
}

/* 用量列表 */
.phase2-workspace .ws-pattern-import .ws-pi-usage-list{max-height:30vh;overflow-y:auto}
.phase2-workspace .ws-pattern-import .ws-pi-usage-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px;border-bottom:1px solid var(--ds-color-border-soft)}
.phase2-workspace .ws-pattern-import .ws-pi-usage-row i{width:16px;height:16px;border-radius:4px;border:1px solid var(--ds-color-border);flex:0 0 auto}
.phase2-workspace .ws-pattern-import .ws-pi-usage-row b{font-weight:600;color:var(--ds-color-text)}
.phase2-workspace .ws-pattern-import .ws-pi-usage-row span{margin-left:auto;color:var(--ds-color-text-tertiary);font-variant-numeric:tabular-nums}
/* 底部动作条：吸底 */
.phase2-workspace .ws-pattern-import .ws-help-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px 14px;border-top:1px solid var(--ws-border);background:var(--ds-color-surface)}
/* Must outrank the inspector's :not([hidden]) display:block!important rule. */
body.phase2-workspace .workspace-wrap .ws-retired-controls.ws-retired-controls{display:none!important}
.ws-source-toolbar{position:relative;display:flex;align-items:center;gap:3px;flex:none}
.ws-size-source-settings{display:flex;align-items:center;flex:none}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-palette-categories{display:flex;flex-wrap:nowrap;gap:1px;overflow-x:auto;white-space:nowrap}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-palette-categories button{flex:0 0 auto;min-width:0;padding:2px 3px;font-size:10px;white-space:nowrap;overflow-wrap:normal}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--swatch-gap);align-items:stretch}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors .ws-recent-label{grid-column:1/-1;padding-block:3px;font-size:11px}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors button[data-ws-pick]{display:block;position:relative;aspect-ratio:1/1;width:100%;min-width:0;height:auto!important;min-height:0!important;margin:0;padding:0;gap:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors button span{display:grid;place-items:center;width:100%;height:auto;min-width:0;aspect-ratio:1/1;
  border:var(--swatch-frame-idle) dashed rgba(20,18,15,.45);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-tint),var(--swatch-frame-ink));
  border-radius:0;font-size:10px;font-weight:400;line-height:1;white-space:nowrap;overflow-wrap:normal;word-break:normal;box-sizing:border-box;min-height:0!important}
/* Recent colours use the same non-enlarging selection frame. */
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors button[data-ws-pick].active{overflow:visible;z-index:1}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors button[data-ws-pick].active span{
  border:var(--swatch-frame-on) solid rgba(20,18,15,.72);
  border-color:color-mix(in srgb,var(--pick-base,var(--ws-border-strong)) var(--swatch-frame-on-tint),var(--swatch-frame-ink));
  transform:none}
body.phase2-workspace .workspace-wrap .ws-summary-picker :is(#ws-bead-picker,#ws-recent-colors) button[data-ws-pick]{transform:none!important;transition:none!important}
/* 上一行把 span 拉成 28px 高的竖长方形（height:100% 解析到网格区），现在不要了。 */

body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors button:is(.active,:focus-visible){outline:none}
body.phase2-workspace .workspace-wrap .ws-summary-picker #ws-recent-colors button:is(.active,:focus-visible) span{outline:none}
body.phase2-workspace .ws-palette-summary .ws-summary-picker{font-size:11px;font-weight:400;--swatch-frame-on:1px}
body.phase2-workspace .workspace-wrap .ws-summary-picker :is(#ws-bead-picker,#ws-recent-colors) button[data-ws-pick]>span{font-size:9px;font-weight:400}
body.phase2-workspace .ws-palette-summary .ws-summary-picker :is(button,input,select,.ws-note,#ws-palette-current){font-size:11px;font-weight:400}
body.phase2-workspace .ws-palette-summary .ws-summary-picker :is(h3,strong,b){font-size:12px;font-weight:400}
/* Share the existing second row, with separate non-overlapping grid areas. */
body.phase2-workspace #ws-top-controls>#ws-top-ref-opacity{height:28px!important;align-self:center}
body.phase2-workspace #ws-top-controls:has(>#ws-top-ref-opacity:not([hidden]))>#ws-tool-options:not([hidden]){grid-column:1/3!important;min-width:0;overflow-x:auto!important}
.ws-source-ratio-menu>summary{display:grid;place-items:center;box-sizing:border-box;width:30px;height:30px;border:1px solid transparent;border-radius:6px;cursor:pointer;list-style:none}
.ws-source-ratio-menu>summary::-webkit-details-marker{display:none}
.ws-source-ratio-menu>summary svg{width:20px;height:20px}
.ws-source-ratio-menu>summary:focus-visible{outline:2px solid var(--ws-accent);outline-offset:2px}
.ws-source-ratio-menu>summary[aria-disabled="true"]{opacity:.45;cursor:default}
.ws-source-ratio-options{position:fixed;z-index:120;display:flex;gap:3px;padding:5px;background:var(--ws-surface);border:1px solid var(--ws-border);border-radius:7px;box-shadow:0 3px 12px color-mix(in srgb,var(--ws-text) 12%,transparent)}
body.phase2-workspace #ws-object-properties[hidden]{display:none!important}
.ws-source-ratio-options button[aria-pressed="true"]{color:var(--ws-accent);border-color:var(--ws-accent)}
.ws-generation-shortcuts,.ws-generation-shortcut-group{display:flex;align-items:center;gap:3px;flex:none}
.ws-generation-shortcuts{gap:7px;margin-inline-start:7px}
.ws-generation-shortcut-group{border-inline-start:1px solid var(--ws-border);padding-inline-start:7px}
.ws-generation-shortcut-group button{display:grid;place-items:center;width:30px;height:30px;padding:4px;border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.ws-generation-shortcut-group svg{width:20px;height:20px}
.ws-generation-shortcut-group button:hover{background:var(--ws-surface)}
.ws-generation-shortcut-group button.is-active{border-color:var(--ws-accent);color:var(--ws-accent);background:color-mix(in srgb,var(--ws-accent) 10%,transparent)}
.ws-generation-shortcut-group button:focus-visible{outline:2px solid var(--ws-accent);outline-offset:2px}
.ws-generation-shortcut-group button:disabled{opacity:.45;cursor:default}
@media(max-width:760px){.ws-generation-shortcuts{margin-inline-start:3px;gap:3px}.ws-generation-shortcut-group{padding-inline-start:3px}.ws-generation-shortcut-group button{width:28px;height:28px}}

/* 连排用色条：只改变呈现，保留原始色号与独立横向滚动。 */
body.phase2-workspace #ws-canvas-stats #ws-usage-strip{gap:0!important;padding:0!important}
body.phase2-workspace #ws-canvas-stats #ws-usage-strip .ws-usage-card{flex:0 0 32px!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;gap:0!important;transform:none!important;position:relative}
body.phase2-workspace #ws-canvas-stats #ws-usage-strip .ws-usage-card .ws-swatch{box-sizing:border-box;width:32px!important;height:32px!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;font-size:10px!important;font-weight:400!important;white-space:nowrap}
body.phase2-workspace #ws-canvas-stats #ws-usage-strip .ws-usage-card.active::after{content:"";position:absolute;inset:2px;border:1px dashed currentColor;background:none;animation:none;pointer-events:none}
body.phase2-workspace #ws-dock-view #ws-usage-current{display:inline-flex;align-items:center;font-size:11px;font-weight:400}
body.phase2-workspace #ws-dock-view #ws-usage-current .ws-code-swatch{width:30px;height:30px;min-width:30px;padding:0;border-radius:0;font-size:11px;font-weight:400}
body.phase2-workspace #ws-dock-view #ws-usage-current .ws-usage-count{width:auto;height:auto;padding:0;border:0;border-radius:0;background:transparent;font-size:11px;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Background candidates are an optional compact section, never a canvas mask. */
.ws-background-optimization{padding:8px;font-size:12px;border:1px dashed var(--ws-border);border-radius:0;background:transparent}
.ws-background-optimization>label{display:inline-flex;align-items:center;gap:4px}
.ws-background-optimization>[role=status]{margin-inline-start:8px;color:var(--ws-muted)}
.ws-background-optimization details{margin-top:6px}
.ws-background-optimization summary{cursor:pointer;font-size:11px}
.ws-background-optimization button,.ws-background-optimization input[type=text]{font:inherit;border:1px dashed var(--ws-border);border-radius:0;background:transparent;padding:4px;margin:3px 3px 3px 0;max-width:100%}
.ws-background-optimization button:disabled{opacity:.45;cursor:default}
.ws-background-optimization details>label{display:block;font-size:11px;margin-top:5px}
.ws-optimization-comparison{margin-top:6px;background:repeating-conic-gradient(var(--ws-border) 0 25%,transparent 0 50%) 0/12px 12px}