@bylqwjc/media-editor-react 1.0.12

package/filerobot.css

@@ -0,0 +1,1669 @@
+/**
+ * @media-editor/styles/filerobot.css —— Filerobot 暗色微调覆盖。
+ *
+ * 大部分暗色主题已由 @media-editor/image 经 config.theme.palette 注入(见 core/filerobot 的
+ * IMAGE_EDITOR_DARK_PALETTE),无需 CSS。这里只补 palette 覆盖不到的几处:
+ *  - 标注选项弹层(SfxPopper)是 body 级 portal,容器封顶时不被裁切的兜底;
+ *  - 滚动条配色。
+ * 仅当宿主把图片编辑器放进受限高度容器、或想统一滚动条时按需引入。
+ */
+.FIE_root,
+[data-testid='FIE-root'] {
+  --fie-scroll-thumb: #3a3a46;
+}
+
+.FIE_root *::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.FIE_root *::-webkit-scrollbar-thumb {
+  background: var(--fie-scroll-thumb, #3a3a46);
+  border-radius: 6px;
+}
+.FIE_root *::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Filerobot still renders several tool inputs with native light backgrounds.
+   Keep text/number controls readable in dark SDK shells without touching range/color controls. */
+.FIE_root input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
+.FIE_root select,
+.FIE_root textarea,
+[data-testid='FIE-root'] input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
+[data-testid='FIE-root'] select,
+[data-testid='FIE-root'] textarea,
+#SfxPopper input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
+#SfxPopper select,
+#SfxPopper textarea,
+#SfxPopup input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
+#SfxPopup select,
+#SfxPopup textarea,
+.SfxPopper-root input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
+.SfxPopper-root select,
+.SfxPopper-root textarea,
+.SfxMenu-root input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']),
+.SfxMenu-root select,
+.SfxMenu-root textarea {
+  color: var(--me-fg, #ededf0) !important;
+  -webkit-text-fill-color: var(--me-fg, #ededf0) !important;
+  caret-color: var(--me-fg, #ededf0) !important;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 8%, transparent) !important;
+  border-color: color-mix(in srgb, var(--me-fg, #ededf0) 14%, transparent) !important;
+}
+.FIE_root input::placeholder,
+.FIE_root textarea::placeholder,
+[data-testid='FIE-root'] input::placeholder,
+[data-testid='FIE-root'] textarea::placeholder,
+#SfxPopper input::placeholder,
+#SfxPopper textarea::placeholder,
+#SfxPopup input::placeholder,
+#SfxPopup textarea::placeholder,
+.SfxPopper-root input::placeholder,
+.SfxPopper-root textarea::placeholder,
+.SfxMenu-root input::placeholder,
+.SfxMenu-root textarea::placeholder {
+  color: var(--me-fg-muted, #9a9aa3) !important;
+  -webkit-text-fill-color: var(--me-fg-muted, #9a9aa3) !important;
+  opacity: 1 !important;
+}
+.FIE_root input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']):disabled,
+.FIE_root select:disabled,
+.FIE_root textarea:disabled,
+[data-testid='FIE-root'] input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']):disabled,
+[data-testid='FIE-root'] select:disabled,
+[data-testid='FIE-root'] textarea:disabled,
+#SfxPopper input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']):disabled,
+#SfxPopper select:disabled,
+#SfxPopper textarea:disabled,
+#SfxPopup input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']):disabled,
+#SfxPopup select:disabled,
+#SfxPopup textarea:disabled,
+.SfxPopper-root input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']):disabled,
+.SfxPopper-root select:disabled,
+.SfxPopper-root textarea:disabled,
+.SfxMenu-root input:not([type='range']):not([type='checkbox']):not([type='radio']):not([type='color']):not([type='file']):disabled,
+.SfxMenu-root select:disabled,
+.SfxMenu-root textarea:disabled {
+  color: var(--me-fg-muted, #9a9aa3) !important;
+  -webkit-text-fill-color: var(--me-fg-muted, #9a9aa3) !important;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 5%, transparent) !important;
+  opacity: 1 !important;
+}
+.FIE_root option,
+[data-testid='FIE-root'] option,
+#SfxPopper option,
+#SfxPopup option,
+.SfxPopper-root option,
+.SfxMenu-root option {
+  color: var(--me-fg, #ededf0) !important;
+  background: var(--me-bg-panel, #1b1b21) !important;
+}
+
+.FIE_root .SfxInput-root,
+[data-testid='FIE-root'] .SfxInput-root,
+#SfxPopper .SfxInput-root,
+#SfxPopup .SfxInput-root,
+.SfxPopper-root .SfxInput-root,
+.SfxMenu-root .SfxInput-root {
+  color: var(--me-fg, #ededf0) !important;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 8%, transparent) !important;
+  border-color: color-mix(in srgb, var(--me-fg, #ededf0) 14%, transparent) !important;
+}
+.FIE_root .SfxInput-root:hover,
+[data-testid='FIE-root'] .SfxInput-root:hover,
+#SfxPopper .SfxInput-root:hover,
+#SfxPopup .SfxInput-root:hover,
+.SfxPopper-root .SfxInput-root:hover,
+.SfxMenu-root .SfxInput-root:hover,
+.FIE_root .SfxInput-root:focus-within,
+[data-testid='FIE-root'] .SfxInput-root:focus-within,
+#SfxPopper .SfxInput-root:focus-within,
+#SfxPopup .SfxInput-root:focus-within,
+.SfxPopper-root .SfxInput-root:focus-within,
+.SfxMenu-root .SfxInput-root:focus-within {
+  color: var(--me-fg, #ededf0) !important;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 10%, transparent) !important;
+  border-color: color-mix(in srgb, var(--me-accent, #7c7cf0) 72%, var(--me-fg, #ededf0) 14%) !important;
+}
+.FIE_root .SfxInput-Base,
+.FIE_root .SfxInput-inputContent,
+[data-testid='FIE-root'] .SfxInput-Base,
+[data-testid='FIE-root'] .SfxInput-inputContent,
+#SfxPopper .SfxInput-Base,
+#SfxPopper .SfxInput-inputContent,
+#SfxPopup .SfxInput-Base,
+#SfxPopup .SfxInput-inputContent,
+.SfxPopper-root .SfxInput-Base,
+.SfxPopper-root .SfxInput-inputContent,
+.SfxMenu-root .SfxInput-Base,
+.SfxMenu-root .SfxInput-inputContent {
+  min-width: 0 !important;
+  color: var(--me-fg, #ededf0) !important;
+  -webkit-text-fill-color: var(--me-fg, #ededf0) !important;
+  caret-color: var(--me-fg, #ededf0) !important;
+  background: transparent !important;
+}
+.FIE_root .SfxInput-Icon,
+.FIE_root .SfxInput-CopyIcon,
+[data-testid='FIE-root'] .SfxInput-Icon,
+[data-testid='FIE-root'] .SfxInput-CopyIcon,
+#SfxPopper .SfxInput-Icon,
+#SfxPopper .SfxInput-CopyIcon,
+#SfxPopup .SfxInput-Icon,
+#SfxPopup .SfxInput-CopyIcon,
+.SfxPopper-root .SfxInput-Icon,
+.SfxPopper-root .SfxInput-CopyIcon,
+.SfxMenu-root .SfxInput-Icon,
+.SfxMenu-root .SfxInput-CopyIcon {
+  color: var(--me-fg-muted, #9a9aa3) !important;
+}
+
+/* 图片编辑器工具规格:与视频编辑器工具栏保持同一套 icon/label 尺寸。 */
+.FIE_tab svg,
+.FIE_tabs svg,
+.FIE_tools-bar-wrapper button svg {
+  width: var(--me-editor-tool-icon-size, 20px) !important;
+  height: var(--me-editor-tool-icon-size, 20px) !important;
+}
+.FIE_tab,
+.FIE_tabs button,
+.FIE_tabs_navbar button {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: var(--me-editor-tool-button-gap, 6px) !important;
+  width: var(--me-editor-tool-button-width, 72px) !important;
+  min-height: var(--me-editor-tool-button-height, 66px) !important;
+  padding: 8px 0 !important;
+  border-radius: var(--me-editor-tool-button-radius, 8px) !important;
+  box-sizing: border-box !important;
+  text-align: center !important;
+}
+.FIE_tab > svg,
+.FIE_tab [data-testid^='FIE-tab-item-icon'],
+.FIE_tabs button > svg,
+.FIE_tabs_navbar button > svg {
+  flex: 0 0 auto !important;
+  display: block !important;
+  margin: 0 auto !important;
+}
+.FIE_tab-label,
+.FIE_tools-bar-wrapper button,
+.FIE_tools-bar-wrapper button span,
+.FIE_tools-bar-wrapper button [class*='Label'] {
+  font-size: var(--me-editor-tool-label-size, 12px) !important;
+  line-height: 1.2 !important;
+}
+.FIE_tool-options-wrapper,
+.FIE_tool-options-wrapper *,
+.FIE_tools-bar,
+.FIE_tools-bar *,
+.FIE_tools,
+.FIE_tools *,
+.FIE_watermark-tool-wrapper,
+.FIE_watermark-tool-wrapper *,
+.SfxMenu-root,
+.SfxMenu-root *,
+.SfxPopper-root,
+.SfxPopper-root *,
+[class*='SfxPopper'],
+[class*='SfxPopper'] *,
+[class*='SfxMenu'],
+[class*='SfxMenu'] * {
+  font-size: var(--me-editor-tool-label-size, 12px) !important;
+  line-height: 1.2 !important;
+}
+.FIE_tab-label {
+  display: block !important;
+  width: 100% !important;
+  text-align: center !important;
+}
+.FIE_tab,
+.FIE_tabs button,
+.FIE_tabs_navbar button,
+.FIE_tools-bar-wrapper [role='button'],
+.FIE_tools-bar-wrapper button {
+  border: 1px solid transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.FIE_tab,
+.FIE_tabs button,
+.FIE_tabs_navbar button {
+  background: transparent !important;
+}
+.FIE_tab:hover,
+.FIE_tabs button:hover,
+.FIE_tabs_navbar button:hover,
+.FIE_tools-bar-wrapper [role='button']:hover,
+.FIE_tools-bar-wrapper button:hover {
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 7%, transparent) !important;
+}
+.FIE_tab[aria-selected='true'],
+.FIE_tabs button[aria-selected='true'],
+.FIE_tabs_navbar button[aria-selected='true'],
+.FIE_tools-bar-wrapper [aria-selected='true'] {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  background: color-mix(in srgb, var(--me-accent, #7c7cf0) 16%, transparent) !important;
+}
+.FIE_tabs,
+.FIE_tabs_navbar {
+  width: var(--me-editor-tool-button-width, 72px) !important;
+  min-width: var(--me-editor-tool-button-width, 72px) !important;
+  max-width: var(--me-editor-tool-button-width, 72px) !important;
+  padding: 0 !important;
+  gap: 6px !important;
+  align-items: center !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  border: 0 !important;
+  overflow-x: visible !important;
+}
+.FIE_main-container {
+  --me-image-toolrail-width: var(--me-editor-tool-button-width, 72px);
+}
+.FIE_main-container > .FIE_tabs_navbar,
+.FIE_main-container > [data-testid='FIE-tabs-navbar'] {
+  width: var(--me-image-toolrail-width) !important;
+  min-width: var(--me-image-toolrail-width) !important;
+  max-width: var(--me-image-toolrail-width) !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  /* Match the video editor rail: no extra leading gutter before the tool column. */
+  margin-left: 0 !important;
+}
+.FIE_main-container > .FIE_tabs_navbar > .FIE_tab,
+.FIE_main-container > [data-testid='FIE-tabs-navbar'] > .FIE_tab {
+  width: var(--me-editor-tool-button-width, 72px) !important;
+  min-width: var(--me-editor-tool-button-width, 72px) !important;
+  max-width: var(--me-editor-tool-button-width, 72px) !important;
+  margin-inline: 0 !important;
+}
+.FIE_main-container > .FIE_editor-content {
+  width: calc(100% - var(--me-image-toolrail-width)) !important;
+  flex: 1 1 0 !important;
+}
+
+/* 下拉箭头图标(裁剪预设 / 添加图片):通用 20px svg 规则把这些 caret 放得过大 → 缩回 13px
+   (只动最后一个 svg=箭头,保留前面的功能图标) */
+.FIE_crop-presets-opener-button svg:last-child,
+.FIE_image-tool-add-option-button svg:last-child {
+  width: 13px !important;
+  height: 13px !important;
+}
+
+/* Watermark: expose upload/text-watermark as first-level bottom actions instead of a nested menu. */
+.FIE_watermark-tool-wrapper {
+  width: 100% !important;
+}
+.FIE_watermark-add-wrapper.FIE_watermark-bottom-actions {
+  width: 100% !important;
+  justify-content: center !important;
+  align-items: center !important;
+  gap: 8px !important;
+  overflow: visible !important;
+}
+.FIE_watermark-primary-action {
+  height: 32px !important;
+  min-height: 32px !important;
+  padding: 0 12px !important;
+  border: 0 !important;
+  border-radius: 8px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 6px !important;
+  font: inherit !important;
+  font-size: var(--me-editor-tool-label-size, 12px) !important;
+  line-height: 1 !important;
+  color: var(--me-fg, #f1f1f4) !important;
+  background: color-mix(in srgb, var(--me-fg, #f1f1f4) 9%, transparent) !important;
+  cursor: pointer !important;
+}
+.FIE_watermark-primary-action:hover {
+  background: color-mix(in srgb, var(--me-fg, #f1f1f4) 14%, transparent) !important;
+}
+.FIE_watermark-primary-action:disabled {
+  opacity: 0.45 !important;
+  cursor: default !important;
+}
+.FIE_watermark-primary-action svg {
+  width: 18px !important;
+  height: 18px !important;
+  color: currentColor !important;
+}
+
+/* Image zoom menu: pointer/hand + dropdown slider, matching the video editor control model. */
+.FIE_zoom-menu-controls {
+  gap: 6px !important;
+}
+.FIE_zoom-menu-controls .FIE_zoom-pointer-btn,
+.FIE_zoom-menu-controls .FIE_zoom-menu-trigger {
+  border: 0 !important;
+  border-radius: 10px !important;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 8%, transparent) !important;
+  color: var(--me-fg, #ededf0) !important;
+  box-shadow: none !important;
+}
+.FIE_zoom-menu-controls .FIE_zoom-pointer-btn.is-active {
+  background: color-mix(in srgb, var(--me-accent, #7c7cf0) 18%, transparent) !important;
+  color: var(--me-accent, #7c7cf0) !important;
+}
+.FIE_zoom-menu-controls .FIE_zoom-menu-trigger {
+  width: 104px !important;
+  min-width: 104px !important;
+  height: 34px !important;
+  padding: 0 9px 0 12px !important;
+  display: inline-flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 6px !important;
+  white-space: nowrap !important;
+  line-height: 1 !important;
+}
+.FIE_zoom-menu-controls .FIE_zoom-menu-trigger > span {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  flex: 1 1 auto !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  white-space: nowrap !important;
+  line-height: 1 !important;
+  text-align: left !important;
+}
+.FIE_zoom-menu-controls .FIE_zoom-menu-trigger svg {
+  flex: 0 0 auto !important;
+  margin-left: auto !important;
+}
+.FIE_zoom-dropdown-menu .FIE_zoom-menu-panel {
+  width: min(320px, calc(100vw - 32px)) !important;
+  max-width: calc(100vw - 32px) !important;
+  padding: 12px !important;
+  box-sizing: border-box !important;
+  color: var(--me-fg, #ededf0) !important;
+  border-radius: 12px !important;
+  background: var(--me-bg-panel, #1b1b21) !important;
+  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.38) !important;
+}
+.FIE_zoom-dropdown-menu {
+  width: min(320px, calc(100vw - 32px)) !important;
+  min-width: min(320px, calc(100vw - 32px)) !important;
+  max-width: calc(100vw - 32px) !important;
+  overflow: visible !important;
+  z-index: 2147483000 !important;
+}
+.FIE_zoom-dropdown-menu,
+.FIE_zoom-dropdown-menu * {
+  box-sizing: border-box !important;
+}
+.FIE_zoom-menu-title {
+  margin-bottom: 10px;
+  color: var(--me-fg-muted, #9a9aa3);
+  font-size: 12px;
+}
+.FIE_zoom-menu-slider-row {
+  display: grid;
+  grid-template-columns: minmax(132px, 1fr) 96px;
+  align-items: center;
+  gap: 8px;
+}
+.FIE_zoom-menu-slider {
+  width: 100%;
+  min-width: 0;
+  accent-color: var(--me-accent, #7c7cf0);
+}
+.FIE_zoom-menu-number {
+  height: 34px;
+  width: 96px;
+  min-width: 96px;
+  max-width: 96px;
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 8%, transparent);
+  display: grid;
+  grid-template-columns: minmax(38px, 1fr) 16px 22px;
+  /* 显式锁定行高 = 34px。否则 auto 行被内容撑到 64px,input(height:100%)随之变 64px → 数字垂直溢出、和步进器挤在一起(百分比显示异常) */
+  grid-template-rows: 34px;
+  align-items: center;
+  overflow: hidden;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.FIE_zoom-menu-input {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0 2px 0 6px;
+  border: 0 !important;
+  outline: 0 !important;
+  background: transparent !important;
+  color: var(--me-fg, #ededf0) !important;
+  -webkit-text-fill-color: var(--me-fg, #ededf0) !important;
+  font: inherit !important;
+  font-size: 13px !important;
+  line-height: 34px !important;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap !important;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.FIE_zoom-menu-input::-webkit-outer-spin-button,
+.FIE_zoom-menu-input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.FIE_zoom-menu-percent {
+  min-width: 16px;
+  padding: 0;
+  color: var(--me-fg, #ededf0) !important;
+  font-size: 13px !important;
+  line-height: 34px !important;
+  white-space: nowrap !important;
+}
+.FIE_zoom-menu-stepper {
+  width: 22px;
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  border-left: 1px solid color-mix(in srgb, var(--me-border, #26262b) 80%, transparent);
+}
+/* 提高特异度,压过后面的 `.SfxMenu-root button { min-height:32px }`(否则上下步进按钮各 32px、在 34px 框里叠在一起=太高) */
+.FIE_zoom-menu-number .FIE_zoom-menu-stepper button {
+  width: 22px !important;
+  min-width: 22px !important;
+  height: 17px !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  color: var(--me-fg-muted, #9a9aa3) !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+}
+.FIE_zoom-menu-stepper button:hover {
+  color: var(--me-fg, #ededf0) !important;
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 8%, transparent) !important;
+}
+.FIE_zoom-menu-divider {
+  height: 1px;
+  background: var(--me-border, #26262b);
+  margin: 14px 0 8px;
+}
+.FIE_zoom-menu-shortcut {
+  min-height: 32px !important;
+}
+.FIE_zoom-menu-kbd {
+  color: var(--me-fg-muted, #9a9aa3);
+  margin-left: auto;
+}
+
+/* 标注/形状选项弹层:置顶 + 不被裁切 + 限宽换行(修「弹窗内弹窗显示不全」)。
+   SfxPopper 多为 body 级 portal;overflow 放开避免子弹层(如圆角滑杆)被父弹层裁掉,max-width 防溢出视口。 */
+#SfxPopper,
+.SfxPopper-root,
+[class*='SfxPopper'],
+.SfxPopper-wrapper,
+.SfxMenu-root {
+  z-index: 2147483000 !important;
+  overflow: visible !important;
+  max-width: 92vw;
+}
+#SfxPopper,
+#SfxPopup {
+  position: fixed !important;
+  inset: 0 !important;
+  pointer-events: none !important;
+}
+#SfxPopper > *,
+#SfxPopup > *,
+.SfxPopper-wrapper,
+.SfxPopper-root,
+.SfxMenu-root,
+.SfxMenu-Overlay {
+  pointer-events: auto !important;
+}
+/* 弹层内容容器允许内部滚动/换行,避免内容被固定高度裁切 */
+[class*='SfxPopper'] [class*='wrapper'],
+[class*='SfxPopper'] [class*='content'] {
+  overflow: visible !important;
+  flex-wrap: wrap;
+}
+/* Filerobot 的尺寸/裁剪菜单是 SfxMenu portal,默认会撑得很宽;限制到和缩放菜单相近的紧凑尺寸。 */
+#SfxPopper .SfxMenu-root,
+#SfxPopup .SfxMenu-root,
+.SfxMenu-root,
+.SfxMenu-Overlay {
+  max-width: min(360px, calc(100vw - 32px)) !important;
+  box-sizing: border-box !important;
+}
+.SfxMenu-root [role='menu'],
+.SfxMenu-root ul,
+.SfxMenu-root > *,
+.SfxMenu-Overlay > * {
+  max-width: min(360px, calc(100vw - 32px)) !important;
+  max-height: min(520px, calc(100dvh - 96px)) !important;
+  overflow: auto !important;
+  box-sizing: border-box !important;
+}
+.SfxMenu-root [role='menuitem'],
+.SfxMenu-root li,
+.SfxMenu-root button {
+  min-height: 32px !important;
+  box-sizing: border-box !important;
+}
+
+/* 顶栏重排:桌面端用左/中/右三栏,让尺寸 + 缩放控件相对整条 topbar 居中。 */
+@media (min-width: 761px) {
+  .FIE_topbar {
+    display: grid !important;
+    grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
+    align-items: center;
+    gap: 16px;
+  }
+  .FIE_topbar > * {
+    grid-row: 1;
+  }
+  .FIE_topbar-control-buttons,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] {
+    grid-column: 1;
+    justify-self: start;
+    margin-right: 0 !important;
+    order: unset !important;
+    width: max-content;
+    z-index: 2;
+  }
+  .FIE_topbar-center-options {
+    grid-column: 1 / -1;
+    justify-self: center;
+    margin: 0 !important;
+    order: unset !important;
+    z-index: 1;
+  }
+  .FIE_topbar-buttons-wrapper {
+    grid-column: 3;
+    justify-self: end;
+    order: unset !important;
+  }
+  .FIE_topbar > div:not(.FIE_topbar-buttons-wrapper):not(.FIE_topbar-center-options):not(.FIE_topbar-control-buttons):not([data-testid='FIE-topbar-control-buttons']) {
+    grid-column: 1;
+    justify-self: start;
+    margin-right: 0 !important;
+    order: unset !important;
+    width: max-content;
+    z-index: 2;
+  }
+}
+/* 删叉叉(关闭按钮);返回交给宿主壳(MediaEditor 的「← 返回」) */
+.FIE_buttons-close-btn {
+  display: none !important;
+}
+
+/* 旋转刻度盘:对标 Pintura 的点状标尺。
+   默认 Filerobot 把 SfxRotationSlider 挤进一个 ~134px 的 flex 簇 → 滑杆塌成 36px 灰块、点全叠成 0 宽,
+   观感很「廉价」。这里把旋转工具那一簇撑满工具栏,滑杆 flex:1 取满宽 → 点状刻度尺完整铺开。
+   用 :has() 精确限定只作用于「旋转」工具,不波及微调/尺寸等其它工具的滑杆/输入。 */
+.FIE_tools-bar-wrapper {
+  max-width: 720px !important;
+  width: 100% !important;
+}
+.FIE_tool-options-wrapper:has(.FIE_rotate-slider) > div {
+  flex: 1 1 auto !important;
+  max-width: 600px !important;
+}
+.SfxSlider-root.FIE_rotate-slider {
+  flex: 1 1 auto !important;
+  width: 100% !important;
+  min-width: 420px !important;
+}
+.FIE_rotate-options {
+  width: 100% !important;
+}
+.FIE_rotate-value {
+  flex: 0 0 auto;
+  min-width: 58px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--me-fg, #f1f1f4);
+  background: color-mix(in srgb, var(--me-fg, #f1f1f4) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--me-fg, #f1f1f4) 12%, transparent);
+}
+.SfxRotationSlider-list {
+  width: 100% !important;
+  position: relative !important;
+}
+/* 刻度盘细节:小点更细更淡、长刻度(mark)清晰、中心指针(control)用强调色 → 干净有重心 */
+.SfxRotationSlider-small-dot {
+  background: color-mix(in srgb, var(--me-fg, #f1f1f4) 32%, transparent) !important;
+}
+.SfxRotationSlider-big-dot {
+  background: color-mix(in srgb, var(--me-fg, #f1f1f4) 55%, transparent) !important;
+}
+.SfxRotationSlider-control {
+  background: var(--me-accent, #7c7cf0) !important;
+}
+.SfxRotationSlider-mark-text {
+  opacity: 0.7;
+}
+
+/* 图片画布框与视频编辑器保持一致:保留扁平画布,不再额外叠内凹阴影或左侧分隔投影。 */
+.FIE_canvas-container {
+  padding: 0;
+  background: transparent !important;
+}
+.FIE_canvas-node {
+  border-radius: 8px;
+  overflow: hidden;
+}
+.FIE_canvas-node::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+/* Fullscreen: move Filerobot closer to Pintura's immersive crop workspace. */
+.me-fullscreen-host:fullscreen .FIE_root,
+.me-fullscreen-host.me-is-fullscreen .FIE_root,
+.me-fullscreen-host:fullscreen [data-testid='FIE-root'],
+.me-fullscreen-host.me-is-fullscreen [data-testid='FIE-root'] {
+  height: 100% !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: #030303 !important;
+  overflow: visible !important;
+}
+.me-fullscreen-host:fullscreen .FIE_topbar,
+.me-fullscreen-host.me-is-fullscreen .FIE_topbar {
+  position: absolute !important;
+  inset: 0 0 auto 0 !important;
+  height: 64px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: transparent !important;
+  z-index: 70 !important;
+  pointer-events: none !important;
+}
+.me-fullscreen-host:fullscreen .FIE_topbar-center-options,
+.me-fullscreen-host.me-is-fullscreen .FIE_topbar-center-options {
+  position: absolute !important;
+  top: 16px !important;
+  left: calc(50% + 124px) !important;
+  transform: translateX(-50%) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 10px !important;
+  height: 34px !important;
+  margin: 0 !important;
+  z-index: 72 !important;
+  pointer-events: auto !important;
+}
+.me-fullscreen-host:fullscreen .FIE_topbar-control-buttons,
+.me-fullscreen-host.me-is-fullscreen .FIE_topbar-control-buttons,
+.me-fullscreen-host:fullscreen [data-testid='FIE-topbar-control-buttons'],
+.me-fullscreen-host.me-is-fullscreen [data-testid='FIE-topbar-control-buttons'] {
+  position: absolute !important;
+  top: 16px !important;
+  left: calc(50% - 170px) !important;
+  transform: translateX(-50%) !important;
+  height: 32px !important;
+  padding: 0 6px !important;
+  border-radius: 999px !important;
+  background: rgba(17, 17, 18, 0.68) !important;
+  border: 1px solid rgba(255, 255, 255, 0.12) !important;
+  pointer-events: auto !important;
+  backdrop-filter: blur(10px);
+}
+.me-fullscreen-host:fullscreen .FIE_topbar-buttons-wrapper,
+.me-fullscreen-host.me-is-fullscreen .FIE_topbar-buttons-wrapper {
+  position: absolute !important;
+  top: 16px !important;
+  right: 16px !important;
+  margin: 0 !important;
+  pointer-events: auto !important;
+}
+.me-fullscreen-host:fullscreen .FIE_topbar-tabs-navbar-toggle_btn,
+.me-fullscreen-host.me-is-fullscreen .FIE_topbar-tabs-navbar-toggle_btn {
+  display: none !important;
+}
+.me-fullscreen-host:fullscreen .FIE_topbar-buttons-wrapper button,
+.me-fullscreen-host.me-is-fullscreen .FIE_topbar-buttons-wrapper button {
+  min-height: 32px !important;
+  border-radius: 999px !important;
+}
+.me-fullscreen-host:fullscreen .FIE_tabs,
+.me-fullscreen-host.me-is-fullscreen .FIE_tabs,
+.me-fullscreen-host:fullscreen .FIE_tabs-navbar,
+.me-fullscreen-host.me-is-fullscreen .FIE_tabs-navbar,
+.me-fullscreen-host:fullscreen .FIE_tabs_navbar,
+.me-fullscreen-host.me-is-fullscreen .FIE_tabs_navbar {
+  position: absolute !important;
+  left: 16px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  width: 96px !important;
+  min-width: 96px !important;
+  height: auto !important;
+  max-height: calc(100dvh - 128px) !important;
+  padding: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 16px !important;
+  z-index: 60 !important;
+  border: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  overflow-x: visible !important;
+  overflow-y: auto !important;
+}
+.me-fullscreen-host:fullscreen .FIE_tabs .FIE_tab,
+.me-fullscreen-host.me-is-fullscreen .FIE_tabs .FIE_tab,
+.me-fullscreen-host:fullscreen .FIE_tabs_navbar .FIE_tab,
+.me-fullscreen-host.me-is-fullscreen .FIE_tabs_navbar .FIE_tab {
+  width: var(--me-editor-tool-button-width, 72px) !important;
+  min-height: var(--me-editor-tool-button-height, 66px) !important;
+  margin: 0 auto !important;
+  box-sizing: border-box !important;
+}
+.me-fullscreen-host:fullscreen .FIE_main-container,
+.me-fullscreen-host.me-is-fullscreen .FIE_main-container {
+  height: 100% !important;
+  min-height: 0 !important;
+  overflow: visible !important;
+  background: #030303 !important;
+}
+.me-fullscreen-host:fullscreen .FIE_editor-content,
+.me-fullscreen-host.me-is-fullscreen .FIE_editor-content {
+  box-sizing: border-box !important;
+  width: 100% !important;
+  max-width: 100vw !important;
+  max-height: 100dvh !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  padding: 72px 96px 72px 128px !important;
+  overflow: hidden !important;
+  background: #030303 !important;
+}
+.me-fullscreen-host:fullscreen .FIE_tools-bar-wrapper,
+.me-fullscreen-host.me-is-fullscreen .FIE_tools-bar-wrapper,
+.me-fullscreen-host:fullscreen .FIE_tool-options-wrapper,
+.me-fullscreen-host.me-is-fullscreen .FIE_tool-options-wrapper,
+.me-fullscreen-host:fullscreen .FIE_tools-bar,
+.me-fullscreen-host.me-is-fullscreen .FIE_tools-bar,
+.me-fullscreen-host:fullscreen .FIE_tools,
+.me-fullscreen-host.me-is-fullscreen .FIE_tools {
+  position: relative !important;
+  z-index: 80 !important;
+  overflow: visible !important;
+}
+.me-fullscreen-host:fullscreen .SfxPopper-root,
+.me-fullscreen-host.me-is-fullscreen .SfxPopper-root,
+.me-fullscreen-host:fullscreen [class*='SfxPopper'],
+.me-fullscreen-host.me-is-fullscreen [class*='SfxPopper'],
+.me-fullscreen-host:fullscreen .SfxPopper-wrapper,
+.me-fullscreen-host.me-is-fullscreen .SfxPopper-wrapper,
+.me-fullscreen-host:fullscreen .SfxMenu-root,
+.me-fullscreen-host.me-is-fullscreen .SfxMenu-root {
+  z-index: 2147483000 !important;
+  overflow: visible !important;
+}
+.me-fullscreen-host:fullscreen .FIE_canvas-container,
+.me-fullscreen-host.me-is-fullscreen .FIE_canvas-container {
+  box-sizing: border-box !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  padding: 0 !important;
+  background: #030303 !important;
+  overflow: hidden !important;
+}
+.me-fullscreen-host:fullscreen .FIE_canvas-node,
+.me-fullscreen-host.me-is-fullscreen .FIE_canvas-node {
+  border-radius: 0 !important;
+}
+.me-fullscreen-host:fullscreen .FIE_canvas-node::after,
+.me-fullscreen-host.me-is-fullscreen .FIE_canvas-node::after {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+/* 颜色选择器(@scaleflex ColorPicker)hex/rgb 输入框可读性。
+   通用暗色输入覆盖把这些输入弄成浅底浅字(白底白字)看不清(见反馈图3)。
+   这里显式锁成「半透明前景色底 + 前景色字」,明暗两档都对比清晰;放文件末尾 + !important 压过通用规则。 */
+.SfxColorPicker-root .SfxColorPicker-hex-input,
+.SfxColorPicker-root .SfxColorPicker-rgb-input,
+.SfxColorPicker-root .SfxColorPicker-hex-input input,
+.SfxColorPicker-root .SfxColorPicker-rgb-input input,
+.SfxColorPicker-root .SfxColorPicker-hex-input .SfxInput-root,
+.SfxColorPicker-root .SfxColorPicker-rgb-input .SfxInput-root,
+.SfxColorPicker-root .SfxColorPicker-hex-input .SfxInput-Base,
+.SfxColorPicker-root .SfxColorPicker-rgb-input .SfxInput-Base {
+  background: color-mix(in srgb, var(--me-fg, #ededf0) 16%, transparent) !important;
+  color: var(--me-fg, #ededf0) !important;
+  -webkit-text-fill-color: var(--me-fg, #ededf0) !important;
+  caret-color: var(--me-fg, #ededf0) !important;
+  border-color: color-mix(in srgb, var(--me-fg, #ededf0) 24%, transparent) !important;
+}
+.SfxColorPicker-root .SfxColorPicker-hex-input input::placeholder,
+.SfxColorPicker-root .SfxColorPicker-rgb-input input::placeholder {
+  color: var(--me-fg-muted, #9a9aa3) !important;
+  -webkit-text-fill-color: var(--me-fg-muted, #9a9aa3) !important;
+  opacity: 1 !important;
+}
+/* hex/rgb 切换下拉(SfxSelect)同样需可读 */
+.SfxColorPicker-root .SfxColorPicker-select,
+.SfxColorPicker-root .SfxColorPicker-select * {
+  color: var(--me-fg, #ededf0) !important;
+  -webkit-text-fill-color: var(--me-fg, #ededf0) !important;
+}
+
+/* Mobile image editor: Filerobot's desktop left rail is too wide for phone
+   viewports. Move it to a bottom icon dock and let the canvas take the full
+   vertical workspace, matching the mobile video editor and Pintura reference. */
+@media (max-width: 760px) {
+  .me-image-editor-host,
+  [data-media-editor-image-host='true'],
+  .me-image-editor-mount,
+  [data-media-editor-image='true'],
+  .me-image-editor-mount > *,
+  [data-media-editor-image='true'] > * {
+    width: 100% !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
+  }
+
+  .FIE_root,
+  [data-testid='FIE-root'] {
+    position: relative !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    background: #030303 !important;
+    overflow: hidden !important;
+  }
+
+  .FIE_topbar {
+    position: relative !important;
+    height: 48px !important;
+    min-height: 48px !important;
+    padding: max(4px, env(safe-area-inset-top)) 8px 6px !important;
+    border: 0 !important;
+    background: #030303 !important;
+    display: grid !important;
+    grid-template-columns: 96px 86px 74px !important;
+    grid-template-rows: 34px !important;
+    align-items: center !important;
+    align-content: center !important;
+    justify-content: center !important;
+    justify-items: center !important;
+    column-gap: 8px !important;
+    row-gap: 0 !important;
+    overflow: visible !important;
+    box-sizing: border-box !important;
+    z-index: 120 !important;
+  }
+
+  .FIE_topbar-control-buttons,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] {
+    grid-column: 1 !important;
+    grid-row: 1 !important;
+    width: 96px !important;
+    min-width: 96px !important;
+    max-width: 96px !important;
+    height: 34px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    align-self: center !important;
+    overflow: visible !important;
+    margin: 0 !important;
+    position: static !important;
+    transform: none !important;
+    z-index: 121 !important;
+    pointer-events: auto !important;
+  }
+
+  .FIE_topbar-control-buttons .FIE_buttons-history-btns,
+  .FIE_topbar-control-buttons [data-testid='FIE-history-buttons'],
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] .FIE_buttons-history-btns,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] [data-testid='FIE-history-buttons'] {
+    grid-column: 1 !important;
+    grid-row: 1 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 4px !important;
+    width: 96px !important;
+    max-width: 96px !important;
+    height: 34px !important;
+    overflow: hidden !important;
+    pointer-events: auto !important;
+    margin: 0 !important;
+    position: static !important;
+    transform: none !important;
+  }
+
+  .FIE_topbar-control-buttons .FIE_buttons-history-btns button,
+  .FIE_topbar-control-buttons [data-testid='FIE-history-buttons'] button,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] .FIE_buttons-history-btns button,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] [data-testid='FIE-history-buttons'] button {
+    flex: 0 0 28px !important;
+    width: 28px !important;
+    min-width: 28px !important;
+    max-width: 28px !important;
+    height: 28px !important;
+    min-height: 28px !important;
+    max-height: 28px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .FIE_topbar-control-buttons .FIE_buttons-save-btn,
+  .FIE_topbar-control-buttons .FIE_buttons-save-btn-wrapper,
+  .FIE_topbar-control-buttons [data-testid='FIE-save-button'],
+  .FIE_topbar-buttons-wrapper .FIE_buttons-save-btn,
+  .FIE_topbar-buttons-wrapper .FIE_buttons-save-btn-wrapper,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] .FIE_buttons-save-btn,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] .FIE_buttons-save-btn-wrapper,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] [data-testid='FIE-save-button'] {
+    grid-column: 3 !important;
+    grid-row: 1 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 74px !important;
+    min-width: 74px !important;
+    max-width: 74px !important;
+    height: 34px !important;
+    min-height: 34px !important;
+    max-height: 34px !important;
+    padding: 0 12px !important;
+    margin: 0 !important;
+    white-space: nowrap !important;
+    position: static !important;
+    transform: none !important;
+    pointer-events: auto !important;
+  }
+
+  .FIE_topbar-control-buttons .FIE_buttons-save-btn-button,
+  .FIE_topbar-buttons-wrapper .FIE_buttons-save-btn-button,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] .FIE_buttons-save-btn-button {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 74px !important;
+    min-width: 74px !important;
+    max-width: 74px !important;
+    height: 34px !important;
+    min-height: 34px !important;
+    max-height: 34px !important;
+    padding: 0 12px !important;
+    margin: 0 !important;
+    white-space: nowrap !important;
+    pointer-events: auto !important;
+  }
+
+  .FIE_topbar-control-buttons .FIE_buttons-save-btn-button span,
+  .FIE_topbar-buttons-wrapper .FIE_buttons-save-btn-button span,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] .FIE_buttons-save-btn-button span {
+    overflow: visible !important;
+    text-overflow: clip !important;
+    white-space: nowrap !important;
+  }
+
+  .FIE_topbar-center-options {
+    grid-column: 2 !important;
+    grid-row: 1 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    align-self: center !important;
+    min-width: 0 !important;
+    width: 86px !important;
+    max-width: 86px !important;
+    height: 34px !important;
+    margin: 0 !important;
+    justify-self: center !important;
+    overflow: visible !important;
+    position: relative !important;
+    z-index: 123 !important;
+    pointer-events: auto !important;
+  }
+
+  .FIE_topbar-buttons-wrapper {
+    grid-column: 3 !important;
+    grid-row: 1 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    width: 74px !important;
+    min-width: 74px !important;
+    max-width: 74px !important;
+    height: 34px !important;
+    min-height: 34px !important;
+    max-height: 34px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: visible !important;
+    pointer-events: auto !important;
+    position: static !important;
+    transform: none !important;
+  }
+
+  .FIE_topbar-control-buttons,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'],
+  .FIE_topbar-center-options,
+  .FIE_topbar-buttons-wrapper,
+  .FIE_topbar-control-buttons > *,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] > *,
+  .FIE_topbar-center-options > *,
+  .FIE_topbar-buttons-wrapper > * {
+    position: static !important;
+    inset: auto !important;
+    top: auto !important;
+    right: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+    transform: none !important;
+    align-self: center !important;
+    box-sizing: border-box !important;
+  }
+
+  .FIE_topbar-control-buttons > *,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] > *,
+  .FIE_topbar-center-options > *,
+  .FIE_topbar-buttons-wrapper > * {
+    height: 34px !important;
+    min-height: 34px !important;
+    max-height: 34px !important;
+    margin: 0 !important;
+  }
+
+  .FIE_topbar-control-buttons > .FIE_buttons-close-btn,
+  .FIE_topbar [data-testid='FIE-topbar-control-buttons'] > .FIE_buttons-close-btn,
+  .FIE_topbar-buttons-wrapper > .FIE_topbar-tabs-navbar-toggle_btn,
+  .FIE_topbar-buttons-wrapper > .FIE_buttons-back-btn {
+    display: none !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    max-width: 0 !important;
+    height: 0 !important;
+    min-height: 0 !important;
+    max-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+  }
+
+  .FIE_topbar-tabs-navbar-toggle_btn,
+  .FIE_topbar > div:not(.FIE_topbar-buttons-wrapper):not(.FIE_topbar-center-options):not(.FIE_topbar-control-buttons):not([data-testid='FIE-topbar-control-buttons']),
+  .me-image-editor-mount [data-testid='FIE-topbar-menu-button'],
+  [data-media-editor-image='true'] [data-testid='FIE-topbar-menu-button'],
+  .FIE_topbar-center-options [role='separator'],
+  .FIE_topbar-center-options [class*='separator'],
+  .FIE_topbar-center-options [class*='Separator'],
+  .FIE_topbar-center-options [data-testid='FIE-image-dimensions'],
+  .FIE_topbar-center-options [data-testid='FIE-image-dimensions-label'],
+  .FIE_topbar-center-options [data-testid='FIE-compare-button'] {
+    display: none !important;
+  }
+
+  .FIE_zoom-menu-controls {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 6px !important;
+    max-width: 86px !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
+
+  .FIE_topbar-center-options > *,
+  .FIE_topbar-center-options [data-testid='FIE-image-info-wrapper'],
+  .FIE_topbar-center-options [data-testid='FIE-image-dimensions-buttons'],
+  .FIE_topbar-center-options .FIE_zoom-menu-controls {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-width: 0 !important;
+    width: 86px !important;
+    max-width: 86px !important;
+    overflow: visible !important;
+  }
+
+  .FIE_topbar-center-options [role='separator'],
+  .FIE_topbar-center-options [class*='separator'],
+  .FIE_topbar-center-options [class*='Separator'],
+  .FIE_topbar-center-options [data-testid='FIE-image-dimensions'],
+  .FIE_topbar-center-options [data-testid='FIE-image-dimensions-label'],
+  .FIE_topbar-center-options [data-testid='FIE-compare-button'],
+  .FIE_topbar-center-options [data-testid='FIE-image-dimensions-buttons'] > div:not(.FIE_zoom-menu-controls) {
+    display: none !important;
+  }
+
+  .FIE_topbar .FIE_zoom-pointer-btn,
+  .FIE_zoom-menu-controls .FIE_zoom-pointer-btn {
+    display: none !important;
+  }
+
+  .FIE_zoom-menu-controls .FIE_zoom-menu-trigger {
+    width: 86px !important;
+    min-width: 86px !important;
+    max-width: 86px !important;
+    height: 34px !important;
+    padding: 0 8px 0 10px !important;
+    white-space: nowrap !important;
+  }
+
+  .FIE_zoom-menu-controls .FIE_zoom-menu-trigger > span {
+    overflow: hidden !important;
+    text-overflow: clip !important;
+    white-space: nowrap !important;
+  }
+
+  .FIE_zoom-dropdown-menu,
+  .FIE_zoom-dropdown-menu .FIE_zoom-menu-panel {
+    width: min(292px, calc(100vw - 20px)) !important;
+    min-width: min(292px, calc(100vw - 20px)) !important;
+    max-width: calc(100vw - 20px) !important;
+  }
+
+  .FIE_zoom-menu-slider-row {
+    grid-template-columns: minmax(128px, 1fr) 90px !important;
+    gap: 8px !important;
+  }
+
+  .FIE_zoom-menu-number {
+    width: 90px !important;
+    min-width: 90px !important;
+    max-width: 90px !important;
+    grid-template-columns: minmax(32px, 1fr) 16px 22px !important;
+  }
+
+  .FIE_main-container {
+    position: relative !important;
+    height: calc(100% - 48px) !important;
+    min-height: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: stretch !important;
+    overflow: hidden !important;
+    padding-bottom: 58px !important;
+    background: #030303 !important;
+    box-sizing: border-box !important;
+    z-index: 1 !important;
+    --me-image-toolrail-width: 100%;
+  }
+
+  .FIE_editor-content,
+  .FIE_main-container > .FIE_editor-content {
+    order: 1 !important;
+    flex: 1 1 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    padding: 0 8px !important;
+    overflow: hidden !important;
+    background: #030303 !important;
+    box-sizing: border-box !important;
+  }
+
+  .FIE_tabs,
+  .FIE_tabs_navbar,
+  .FIE_tabs-navbar,
+  .FIE_root .FIE_tabs,
+  .FIE_root .FIE_tabs_navbar,
+  .FIE_root .FIE_tabs-navbar,
+  .FIE_main-container > .FIE_tabs_navbar,
+  .FIE_main-container > .FIE_tabs-navbar,
+  .FIE_root [class*='FIE_tabs'][class*='navbar'],
+  .FIE_main-container > [data-testid='FIE-tabs-navbar'],
+  .FIE_root [data-testid='FIE-tabs-navbar'] {
+    order: 2 !important;
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    transform: none !important;
+    flex: 0 0 58px !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    height: 58px !important;
+    min-height: 58px !important;
+    max-height: 58px !important;
+    margin: 0 !important;
+    padding: 4px 8px max(4px, env(safe-area-inset-bottom)) !important;
+    display: flex !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    scrollbar-width: none !important;
+    box-sizing: border-box !important;
+    background: #030303 !important;
+    z-index: 70 !important;
+  }
+
+  .FIE_root .Drawer-temporary:has(.FIE_tabs-drawer),
+  [data-testid='FIE-root'] .Drawer-temporary:has(.FIE_tabs-drawer) {
+    position: absolute !important;
+    inset: auto 0 0 0 !important;
+    z-index: 75 !important;
+    visibility: visible !important;
+    width: 100% !important;
+    height: 58px !important;
+    min-height: 58px !important;
+    max-height: 58px !important;
+    pointer-events: auto !important;
+    overflow: hidden !important;
+    background: #030303 !important;
+  }
+
+  .FIE_tabs-drawer,
+  .FIE_root .FIE_tabs-drawer,
+  [data-testid='FIE-tabs-drawer'],
+  [data-testid='FIE-root'] [data-testid='FIE-tabs-drawer'] {
+    position: absolute !important;
+    inset: 0 !important;
+    transform: none !important;
+    visibility: visible !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    height: 58px !important;
+    min-height: 58px !important;
+    max-height: 58px !important;
+    margin: 0 !important;
+    padding: 4px 8px max(4px, env(safe-area-inset-bottom)) !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    scrollbar-width: none !important;
+    box-sizing: border-box !important;
+    box-shadow: none !important;
+    background: #030303 !important;
+  }
+
+  .FIE_tabs-drawer::-webkit-scrollbar,
+  [data-testid='FIE-tabs-drawer']::-webkit-scrollbar {
+    display: none;
+  }
+
+  .FIE_tabs-drawer [data-testid='FIE-tabs-drawer-header'],
+  .FIE_tabs-drawer .Drawer-header {
+    display: none !important;
+  }
+
+  .FIE_tabs-drawer [data-testid='FIE-tabs-drawer-body'],
+  .FIE_tabs-drawer .Drawer-body {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    overflow: visible !important;
+  }
+
+  .FIE_tabs-drawer [data-testid='FIE-tabs-drawer-list'],
+  .FIE_tabs-drawer .Drawer-list,
+  .FIE_tabs-drawer .SfxDrawer-list {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: auto !important;
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    overflow: visible !important;
+  }
+
+  .FIE_tabs-drawer .Drawer-item,
+  .FIE_tabs-drawer .SfxDrawer-item {
+    flex: 0 0 48px !important;
+    width: 48px !important;
+    min-width: 48px !important;
+    max-width: 48px !important;
+    height: 48px !important;
+    min-height: 48px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border-radius: 999px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    text-align: center !important;
+    box-sizing: border-box !important;
+  }
+
+  .FIE_tabs::-webkit-scrollbar,
+  .FIE_tabs_navbar::-webkit-scrollbar,
+  .FIE_tabs-navbar::-webkit-scrollbar,
+  .FIE_main-container > .FIE_tabs_navbar::-webkit-scrollbar,
+  .FIE_main-container > .FIE_tabs-navbar::-webkit-scrollbar,
+  .FIE_main-container > [data-testid='FIE-tabs-navbar']::-webkit-scrollbar,
+  .FIE_root [data-testid='FIE-tabs-navbar']::-webkit-scrollbar {
+    display: none;
+  }
+
+  .FIE_tab,
+  .FIE_tabs button,
+  .FIE_tabs_navbar button,
+  .FIE_tabs-navbar button,
+  .FIE_root [data-testid='FIE-tabs-navbar'] button,
+  .FIE_tabs-drawer button,
+  .FIE_tabs-drawer .FIE_tab,
+  .FIE_main-container > .FIE_tabs_navbar > .FIE_tab,
+  .FIE_main-container > .FIE_tabs-navbar > .FIE_tab,
+  .FIE_main-container > [data-testid='FIE-tabs-navbar'] > .FIE_tab {
+    flex: 0 0 48px !important;
+    width: 48px !important;
+    min-width: 48px !important;
+    max-width: 48px !important;
+    height: 48px !important;
+    min-height: 48px !important;
+    padding: 0 !important;
+    border-radius: 999px !important;
+    gap: 0 !important;
+    margin: 0 !important;
+  }
+
+  .FIE_tab-label {
+    display: none !important;
+  }
+
+  .FIE_tabs button span:not(:first-child),
+  .FIE_tabs_navbar button span:not(:first-child),
+  .FIE_tabs-navbar button span:not(:first-child),
+  .FIE_tabs-drawer button span:not(:first-child),
+  .FIE_root [data-testid='FIE-tabs-navbar'] button span:not(:first-child) {
+    display: none !important;
+  }
+
+  .FIE_tab svg,
+  .FIE_tabs svg,
+  .FIE_tabs_navbar svg,
+  .FIE_tabs-navbar svg,
+  .FIE_tabs-drawer svg {
+    width: 18px !important;
+    height: 18px !important;
+  }
+
+  .FIE_canvas-container {
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+    background: #030303 !important;
+  }
+
+  .FIE_tools-bar-wrapper,
+  .FIE_tool-options-wrapper,
+  .FIE_tools-bar,
+  .FIE_tools {
+    max-width: calc(100vw - 16px) !important;
+    overflow-x: auto !important;
+    overflow-y: visible !important;
+    scrollbar-width: none !important;
+  }
+
+  .FIE_tools-bar-wrapper::-webkit-scrollbar,
+  .FIE_tool-options-wrapper::-webkit-scrollbar,
+  .FIE_tools-bar::-webkit-scrollbar,
+  .FIE_tools::-webkit-scrollbar {
+    display: none;
+  }
+
+  .SfxSlider-root.FIE_rotate-slider {
+    min-width: min(260px, calc(100vw - 48px)) !important;
+  }
+
+  .me-fullscreen-host:fullscreen .FIE_topbar,
+  .me-fullscreen-host.me-is-fullscreen .FIE_topbar {
+    position: relative !important;
+    inset: auto !important;
+    height: 48px !important;
+    min-height: 48px !important;
+    pointer-events: auto !important;
+  }
+
+  .me-fullscreen-host:fullscreen .FIE_topbar-center-options,
+  .me-fullscreen-host.me-is-fullscreen .FIE_topbar-center-options,
+  .me-fullscreen-host:fullscreen .FIE_topbar-control-buttons,
+  .me-fullscreen-host.me-is-fullscreen .FIE_topbar-control-buttons,
+  .me-fullscreen-host:fullscreen [data-testid='FIE-topbar-control-buttons'],
+  .me-fullscreen-host.me-is-fullscreen [data-testid='FIE-topbar-control-buttons'],
+  .me-fullscreen-host:fullscreen .FIE_topbar-buttons-wrapper,
+  .me-fullscreen-host.me-is-fullscreen .FIE_topbar-buttons-wrapper {
+    position: static !important;
+    transform: none !important;
+    inset: auto !important;
+    top: auto !important;
+    left: auto !important;
+    right: auto !important;
+    pointer-events: auto !important;
+  }
+
+  .me-fullscreen-host:fullscreen .FIE_topbar-control-buttons,
+  .me-fullscreen-host.me-is-fullscreen .FIE_topbar-control-buttons,
+  .me-fullscreen-host:fullscreen [data-testid='FIE-topbar-control-buttons'],
+  .me-fullscreen-host.me-is-fullscreen [data-testid='FIE-topbar-control-buttons'] {
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    pointer-events: none !important;
+  }
+
+  .me-fullscreen-host:fullscreen .FIE_topbar-center-options,
+  .me-fullscreen-host.me-is-fullscreen .FIE_topbar-center-options {
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    pointer-events: auto !important;
+  }
+
+  .me-fullscreen-host:fullscreen .FIE_tabs,
+  .me-fullscreen-host.me-is-fullscreen .FIE_tabs,
+  .me-fullscreen-host:fullscreen .FIE_tabs_navbar,
+  .me-fullscreen-host.me-is-fullscreen .FIE_tabs_navbar,
+  .me-fullscreen-host:fullscreen .FIE_tabs-navbar,
+  .me-fullscreen-host.me-is-fullscreen .FIE_tabs-navbar,
+  .me-fullscreen-host:fullscreen [class*='FIE_tabs'][class*='navbar'],
+  .me-fullscreen-host.me-is-fullscreen [class*='FIE_tabs'][class*='navbar'] {
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    transform: none !important;
+    flex-direction: row !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    height: 58px !important;
+    max-height: 58px !important;
+  }
+
+  .me-fullscreen-host:fullscreen .FIE_editor-content,
+  .me-fullscreen-host.me-is-fullscreen .FIE_editor-content {
+    padding: 0 8px !important;
+    max-height: none !important;
+  }
+
+  .me-image-editor-mount .FIE_root,
+  [data-media-editor-image='true'] .FIE_root,
+  .me-image-editor-mount [data-testid='FIE-root'],
+  [data-media-editor-image='true'] [data-testid='FIE-root'] {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .me-image-editor-mount .FIE_main-container,
+  [data-media-editor-image='true'] .FIE_main-container {
+    position: relative !important;
+    display: flex !important;
+    flex-direction: column !important;
+    flex: 1 1 0 !important;
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
+    overflow: hidden !important;
+  }
+
+  .me-image-editor-mount .FIE_editor-content,
+  [data-media-editor-image='true'] .FIE_editor-content,
+  .me-image-editor-mount .FIE_main-container > .FIE_editor-content,
+  [data-media-editor-image='true'] .FIE_main-container > .FIE_editor-content {
+    flex: 1 1 0 !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    max-height: 100% !important;
+    width: 100% !important;
+    padding: 0 8px !important;
+    overflow: hidden !important;
+  }
+
+  .me-image-editor-mount .FIE_canvas-container,
+  [data-media-editor-image='true'] .FIE_canvas-container {
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .me-image-editor-mount .FIE_tabs,
+  [data-media-editor-image='true'] .FIE_tabs,
+  .me-image-editor-mount .FIE_tabs_navbar,
+  [data-media-editor-image='true'] .FIE_tabs_navbar,
+  .me-image-editor-mount .FIE_tabs-navbar,
+  [data-media-editor-image='true'] .FIE_tabs-navbar,
+  .me-image-editor-mount [class*='TabsNavbar'],
+  [data-media-editor-image='true'] [class*='TabsNavbar'],
+  .me-image-editor-mount [class*='tabs-navbar'],
+  [data-media-editor-image='true'] [class*='tabs-navbar'],
+  .me-image-editor-mount [class*='tabs_navbar'],
+  [data-media-editor-image='true'] [class*='tabs_navbar'],
+  .me-image-editor-mount [class*='FIE_tabs'][class*='navbar'],
+  [data-media-editor-image='true'] [class*='FIE_tabs'][class*='navbar'],
+  .me-image-editor-mount [data-testid='FIE-tabs-navbar'],
+  [data-media-editor-image='true'] [data-testid='FIE-tabs-navbar'],
+  .me-image-editor-mount [data-testid='FIE-tabs-drawer'],
+  [data-media-editor-image='true'] [data-testid='FIE-tabs-drawer'],
+  .me-image-editor-mount .FIE_tabs-drawer,
+  [data-media-editor-image='true'] .FIE_tabs-drawer {
+    position: absolute !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    transform: none !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    height: calc(58px + env(safe-area-inset-bottom)) !important;
+    min-height: calc(58px + env(safe-area-inset-bottom)) !important;
+    max-height: calc(58px + env(safe-area-inset-bottom)) !important;
+    margin: 0 !important;
+    padding: 4px 8px max(4px, env(safe-area-inset-bottom)) !important;
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    z-index: 90 !important;
+    background: #030303 !important;
+  }
+
+  .me-image-editor-mount .FIE_tabs button span:not(:first-child),
+  [data-media-editor-image='true'] .FIE_tabs button span:not(:first-child),
+  .me-image-editor-mount .FIE_tabs_navbar button span:not(:first-child),
+  [data-media-editor-image='true'] .FIE_tabs_navbar button span:not(:first-child),
+  .me-image-editor-mount .FIE_tabs-navbar button span:not(:first-child),
+  [data-media-editor-image='true'] .FIE_tabs-navbar button span:not(:first-child),
+  .me-image-editor-mount [class*='TabsNavbar'] button span:not(:first-child),
+  [data-media-editor-image='true'] [class*='TabsNavbar'] button span:not(:first-child),
+  .me-image-editor-mount [class*='tabs-navbar'] button span:not(:first-child),
+  [data-media-editor-image='true'] [class*='tabs-navbar'] button span:not(:first-child),
+  .me-image-editor-mount [class*='tabs_navbar'] button span:not(:first-child),
+  [data-media-editor-image='true'] [class*='tabs_navbar'] button span:not(:first-child),
+  .me-image-editor-mount .FIE_tabs-drawer button span:not(:first-child),
+  [data-media-editor-image='true'] .FIE_tabs-drawer button span:not(:first-child),
+  .me-image-editor-mount [data-testid='FIE-tabs-navbar'] button span:not(:first-child),
+  [data-media-editor-image='true'] [data-testid='FIE-tabs-navbar'] button span:not(:first-child) {
+    display: none !important;
+  }
+
+  .me-image-editor-mount .FIE_topbar-tabs-navbar-toggle_btn,
+  [data-media-editor-image='true'] .FIE_topbar-tabs-navbar-toggle_btn,
+  .me-image-editor-mount [data-testid='FIE-topbar-menu-button'],
+  [data-media-editor-image='true'] [data-testid='FIE-topbar-menu-button'] {
+    display: none !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    max-width: 0 !important;
+    height: 0 !important;
+    min-height: 0 !important;
+    max-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+  }
+}