/* 全屏框选 + 材质编辑（布局对齐官网 ImageEditor 全屏） */

body.mirror-fs-open {

  overflow: hidden !important;

}

/* 全屏编辑：隐藏画布 React 树，避免节点生成遮罩/输入条叠在左侧 stage 上 */
body.mirror-fs-open #root {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 生成遮罩若被挂到 body，全屏时一并隐藏 */
body.mirror-fs-open [data-mirror-gen-overlay-backdrop],
body.mirror-fs-open [data-mirror-gen-overlay-hud] {
  display: none !important;
}



/* 全屏时隐藏画布底部其它浮层，避免与侧栏材质面板叠两层 */

body.mirror-fs-open #root .absolute.bottom-10.left-1\/2 {

  visibility: hidden !important;

  pointer-events: none !important;

}



/* 框选模式：材质大面板只允许在全屏侧栏出现，禁止在画布底部弹出 */

html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]),
body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 520 !important;
  display: flex !important;
  width: var(--mirror-fs-side-width, min(400px, 34vw)) !important;
  min-width: var(--mirror-fs-side-min-width, 272px) !important;
  max-width: var(--mirror-fs-side-width, min(400px, 34vw)) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 1px solid var(--c-border, #2a2f38) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) *,
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) div.flex.w-max.max-w-full,
body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) div.flex.gap-3.overflow-hidden,
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) div.flex.w-max.max-w-full,
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) div.flex.gap-3.overflow-hidden {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: visible !important;
}

body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) [class*="w-\[230px\]"],
body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) [class*="min-w-\[360px\]"],
body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) [class*="min\(500px"],
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) [class*="w-\[230px\]"],
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) [class*="min-w-\[360px\]"],
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) [class*="min\(500px"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) [data-testid="material-control-grid"],
body:not(.mirror-fs-open) #root .absolute.bottom-10.left-1\/2:has([data-testid="material-control-grid"]) [data-testid="material-control-second-row"],
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) [data-testid="material-control-grid"],
html[data-mirror-marking-manual="1"] body:not(.mirror-fs-open) #root .absolute.bottom-10:has([data-testid="material-control-grid"]) [data-testid="material-control-second-row"] {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
}



#mirror-fs-editor {

  position: fixed;

  inset: 0;

  z-index: 250;

  display: none;

  flex-direction: row;

  background: var(--c-bg, #0f1115);

  color: var(--c-text, #e8eaed);

  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 右侧材质侧栏宽度（改这里即可全局生效） */
  --mirror-fs-side-width: min(400px, 34vw);
  --mirror-fs-side-min-width: 272px;

}



#mirror-fs-editor.is-open {

  display: flex;

}



.mirror-fs-main {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  background: var(--c-bg, #0a0c10);

}



.mirror-fs-topbar {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

  align-items: center;

  gap: 8px;

  min-height: 54px;

  padding: 8px 16px;

  border-bottom: 1px solid var(--c-border, #2a2f38);

  background: #151515;

  flex-shrink: 0;

}



.mirror-fs-topbar h1 {

  margin: 0;

  font-size: 14px;

  font-weight: 600;

  text-align: left;

  color: var(--c-text, #e8eaed);

}



.mirror-fs-topbar-left,

.mirror-fs-topbar-right {

  display: flex;

  align-items: center;

  gap: 8px;

}



.mirror-fs-topbar-right {

  justify-content: flex-end;

}

.mirror-fs-layer-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 1px;
  scrollbar-width: thin;
}

.mirror-fs-icon-action,
.mirror-fs-close-btn,
.mirror-fs-exit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
}

.mirror-fs-icon-action svg,
.mirror-fs-close-btn svg,
.mirror-fs-exit-btn svg,
.mirror-fs-save-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mirror-fs-local-edit.is-active {
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--c-bg-input, #1c2129);
  color: var(--c-text, #e8eaed);
}

.mirror-fs-tool-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 110px;
  max-width: 300px;
  font-size: 11px;
  color: var(--c-text-muted, #8b9098);
}

.mirror-fs-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 0;
}

.mirror-fs-native-layer-tools {
  gap: 8px;
}

.mirror-fs-native-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--c-border, #2a2f38);
  border-radius: 8px;
  background: var(--c-bg-panel, #151820);
  flex-shrink: 0;
}

.mirror-fs-toolbar-separator {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--c-bg-hover, #252b35);
  flex: 0 0 auto;
}

.mirror-fs-topbar .mirror-fs-native-tool svg,
.mirror-fs-topbar .mirror-fs-icon-action svg,
.mirror-fs-topbar .mirror-fs-local-edit svg,
.mirror-fs-topbar .mirror-fs-save-btn svg,
.mirror-fs-topbar .mirror-fs-close-btn svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}



.mirror-fs-topbar button {

  border: 1px solid var(--c-border, #2a2f38);

  background: var(--c-bg-input, #1c2129);

  color: var(--c-text, #e8eaed);

  border-radius: 8px;

  padding: 6px 12px;

  font-size: 13px;

  cursor: pointer;

}

.mirror-fs-topbar button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}



.mirror-fs-topbar button:hover {

  background: var(--c-bg-hover, #252b35);

}



.mirror-fs-topbar .mirror-fs-close-btn {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  color: var(--c-text-secondary, #9aa0a6);
}

.mirror-fs-topbar .mirror-fs-close-btn:hover {
  color: var(--c-text, #e8eaed);
  background: var(--c-bg-hover, #252b35);
}

.mirror-fs-topbar .mirror-fs-icon-action,
.mirror-fs-topbar .mirror-fs-close-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

.mirror-fs-topbar .mirror-fs-native-tool,
.mirror-fs-topbar .mirror-fs-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-secondary, #9aa0a6);
  transition: color 0.16s ease, background 0.16s ease;
}

.mirror-fs-topbar .mirror-fs-native-tool:hover,
.mirror-fs-topbar .mirror-fs-icon-action:hover {
  color: var(--c-text, #e8eaed);
  background: var(--c-bg-input, #1c2129);
}

.mirror-fs-topbar .mirror-fs-native-tool.is-active {
  color: var(--c-text, #e8eaed);
  background: var(--c-bg-active, #2a2f38);
}

.mirror-fs-topbar .mirror-fs-local-edit,
.mirror-fs-topbar .mirror-fs-native-text-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
}

.mirror-fs-topbar .mirror-fs-native-text-action {
  color: var(--c-text-secondary, #9aa0a6);
  background: var(--c-bg-input, #1c2129);
}

.mirror-fs-topbar .mirror-fs-native-text-action:hover {
  color: var(--c-text, #e8eaed);
  background: var(--c-bg-hover, #252b35);
}

.mirror-fs-exit-btn {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 4;
  min-width: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-secondary, #9aa0a6);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.mirror-fs-exit-btn:hover {
  color: var(--c-text, #e8eaed);
  background: var(--c-bg-hover, #252b35);
}



.mirror-fs-stage-wrap {

  flex: 1;

  min-height: 0;

  position: relative;

  overflow: hidden;

  background: #0a0c10;

}



.mirror-fs-stage {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: crosshair;

  touch-action: none;

  user-select: none;

}

#mirror-fs-editor[data-tool="select"] .mirror-fs-stage {
  cursor: default;
}

#mirror-fs-editor[data-tool="pan"] .mirror-fs-stage {
  cursor: grab;
}

#mirror-fs-editor[data-tool="pan"] .mirror-fs-stage:active {
  cursor: grabbing;
}

#mirror-fs-editor[data-tool="eraser"] .mirror-fs-stage {
  cursor: not-allowed;
}

#mirror-fs-editor[data-tool="rect"] .mirror-fs-stage {
  cursor: crosshair;
}



.mirror-fs-stage img {

  display: block;

  max-width: calc(100% - 32px);

  max-height: calc(100% - 32px);

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 4px;

  position: relative;

  z-index: 0;

}



.mirror-fs-box-layer {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 1;

}



.mirror-fs-box {

  position: absolute;

  box-sizing: border-box;

  border-style: solid;

  border-radius: 4px;

  background: transparent;

  pointer-events: auto;

  cursor: pointer;

}



.mirror-fs-box.is-active {

  background: transparent;

  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);

}



.mirror-fs-box-delete {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.mirror-fs-box-delete:hover {
  background: #ef4444;
  border-color: #dc2626;
  color: #fff;
}

.mirror-fs-stage.is-no-image {
  cursor: default;
}

.mirror-fs-no-image {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.055), transparent 34%),
    rgba(10, 12, 16, 0.94);
  pointer-events: auto;
}

.mirror-fs-no-image[hidden] {
  display: none !important;
}

.mirror-fs-no-image-card {
  width: min(420px, calc(100vw - 64px));
  padding: 22px 24px 24px;
  border: 1px solid var(--c-border, #2a2f38);
  border-radius: 14px;
  background: rgba(21, 24, 32, 0.9);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.mirror-fs-no-image-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted, #9aa0a6);
}

.mirror-fs-no-image-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text, #e8eaed);
}

.mirror-fs-no-image-desc {
  margin: 8px auto 0;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-secondary, #9aa0a6);
}

.mirror-fs-no-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

.mirror-fs-no-image-actions button,
.mirror-fs-no-image-actions .mirror-fs-upload-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 180, 60, 0.55);
  border-radius: 10px;
  min-width: 104px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 180, 60, 0.15);
  color: var(--c-text, #e8eaed);
}

.mirror-fs-no-image-actions button:hover,
.mirror-fs-no-image-actions .mirror-fs-upload-label:hover {
  background: rgba(255, 180, 60, 0.28);
}

.mirror-fs-no-image-actions button.is-muted {
  border-color: var(--c-border, #2a2f38);
  background: var(--c-bg-input, #1c2129);
  color: var(--c-text-secondary, #b8bcc4);
  font-weight: 500;
}

.mirror-fs-upload-label input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.mirror-fs-stage-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  color: var(--c-text-secondary, #9aa0a6);
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  user-select: none;
}

.mirror-fs-box-label {

  position: absolute;

  left: 0;

  top: -22px;

  padding: 2px 8px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 600;

  color: #f8fafc;

  background: rgba(10, 12, 16, 0.82);

  border: 1px solid rgba(255, 255, 255, 0.85);

  white-space: nowrap;

  pointer-events: none;

}



.mirror-fs-draw-preview {

  position: absolute;

  z-index: 2;

  display: none;

  box-sizing: border-box;

  border-style: dashed;

  border-radius: 4px;

  pointer-events: none;

  background: transparent;

}



.mirror-fs-chips {

  position: absolute;

  left: 16px;

  bottom: 16px;

  z-index: 5;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  max-width: min(70%, 720px);

}



.mirror-fs-chip {

  border: 1px solid var(--c-border, #2a2f38);

  background: rgba(21, 24, 32, 0.92);

  color: var(--c-text-secondary, #9aa0a6);

  border-radius: 999px;

  padding: 4px 12px;

  font-size: 12px;

  cursor: pointer;

  backdrop-filter: blur(8px);

}



.mirror-fs-chip.is-active {

  border-color: rgba(255, 255, 255, 0.85);

  color: var(--c-text, #e8eaed);

  background: rgba(255, 255, 255, 0.12);

}



.mirror-fs-side {

  width: var(--mirror-fs-side-width, min(400px, 34vw));

  min-width: var(--mirror-fs-side-min-width, 272px);

  display: flex;

  flex-direction: column;

  border-left: 1px solid var(--c-border, #2a2f38);

  background: var(--c-bg-panel, #151820);

  flex-shrink: 0;

  pointer-events: auto;

}



.mirror-fs-side-header {

  padding: 12px 16px;

  border-bottom: 1px solid var(--c-border, #2a2f38);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--c-text-muted, #9aa0a6);

}



.mirror-fs-panel-slot {

  position: relative;

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  min-height: 0;

  min-width: 0;

  overflow-x: hidden;

  overflow-y: auto;

  padding: 8px 10px 16px;

  box-sizing: border-box;

  pointer-events: auto;

}



/* 槽位仅作布局占位；真实面板由 React + fixed 几何叠在上方 */

.mirror-fs-panel-slot .mirror-fs-panel-placeholder {

  pointer-events: none;

}

/* Borderless fullscreen skin: align shell with the material controller gray. */
#mirror-fs-editor {
  --mirror-fs-flat-bg: #151515;
  --c-bg: var(--mirror-fs-flat-bg);
  --c-bg-panel: var(--mirror-fs-flat-bg);
  --c-node-bg: var(--mirror-fs-flat-bg);
  --c-border: transparent;
  --c-border-strong: transparent;
  background: var(--mirror-fs-flat-bg);
}

#mirror-fs-editor .mirror-fs-main,
#mirror-fs-editor .mirror-fs-topbar,
#mirror-fs-editor .mirror-fs-stage-wrap,
#mirror-fs-editor .mirror-fs-side,
#mirror-fs-editor .mirror-fs-side-header,
#mirror-fs-editor .mirror-fs-no-image {
  background: var(--mirror-fs-flat-bg);
}

#mirror-fs-editor .mirror-fs-topbar {
  border-bottom: 0;
}

#mirror-fs-editor .mirror-fs-side {
  border-left: 0;
}

#mirror-fs-editor .mirror-fs-side-header {
  border-bottom: 0;
}

#mirror-fs-editor .mirror-fs-side-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 42px 8px 20px;
  box-sizing: border-box;
  letter-spacing: 0;
  text-transform: none;
}

#mirror-fs-editor .mirror-fs-side-title {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-muted, #9aa0a6);
}

#mirror-fs-editor .mirror-fs-side-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  color: var(--c-text-muted, #8b9098);
}

#mirror-fs-editor .mirror-fs-native-tool-group,
#mirror-fs-editor .mirror-fs-topbar button,
#mirror-fs-editor .mirror-fs-no-image-card,
#mirror-fs-editor .mirror-fs-no-image-actions button,
#mirror-fs-editor .mirror-fs-no-image-actions .mirror-fs-upload-label {
  border-color: transparent;
  box-shadow: none;
}

#mirror-fs-editor .mirror-fs-native-tool-group,
#mirror-fs-editor .mirror-fs-no-image-card {
  background: var(--mirror-fs-flat-bg);
}

#mirror-fs-editor .mirror-fs-topbar button,
#mirror-fs-editor .mirror-fs-no-image-actions button,
#mirror-fs-editor .mirror-fs-no-image-actions .mirror-fs-upload-label {
  background: var(--mirror-fs-flat-bg);
}

#mirror-fs-editor .mirror-fs-topbar button:hover,
#mirror-fs-editor .mirror-fs-no-image-actions button:hover,
#mirror-fs-editor .mirror-fs-no-image-actions .mirror-fs-upload-label:hover {
  background: #1c1c1c;
}

#mirror-fs-editor .mirror-fs-topbar .mirror-fs-native-tool.is-active {
  background: #252525;
}

#mirror-fs-editor .mirror-fs-toolbar-separator {
  background: transparent;
}



.mirror-fs-panel-placeholder {

  padding: 24px 16px;

  text-align: center;

  color: var(--c-text-muted, #9aa0a6);

  font-size: 13px;

  line-height: 1.6;

}

/* Text brightness pass for the fullscreen editor shell. */
#mirror-fs-editor {
  --c-text: #f4f5f6;
  --c-text-secondary: #d7d9dc;
  --c-text-muted: #b8bdc4;
}

#mirror-fs-editor .mirror-fs-topbar button,
#mirror-fs-editor .mirror-fs-side-title,
#mirror-fs-editor .mirror-fs-side-sub,
#mirror-fs-editor .mirror-fs-stage-hint,
#mirror-fs-editor .mirror-fs-panel-placeholder,
#mirror-fs-editor .mirror-fs-no-image-kicker,
#mirror-fs-editor .mirror-fs-no-image-title,
#mirror-fs-editor .mirror-fs-no-image-desc,
#mirror-fs-editor .mirror-fs-no-image-actions button,
#mirror-fs-editor .mirror-fs-no-image-actions .mirror-fs-upload-label {
  color: var(--c-text-secondary);
}

#mirror-fs-editor .mirror-fs-no-image-title,
#mirror-fs-editor .mirror-fs-topbar .mirror-fs-native-tool.is-active,
#mirror-fs-editor .mirror-fs-topbar button:hover {
  color: var(--c-text);
}