.online-image-editor-overlay { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, .6); }
.online-image-editor-dialog { width: min(1320px, 100%); height: min(900px, calc(100dvh - 40px)); min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 18px 60px rgba(15, 23, 42, .24); }
.online-image-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.online-image-editor-header h2 { margin: 0; font-size: 18px; color: var(--text); }
.online-image-editor-header p { margin: 5px 0 0; color: #526379; font-size: 12px; line-height: 1.5; }
.online-image-editor-header button { flex-shrink: 0; }
.online-image-editor-status { padding: 12px 20px; display: flex; align-items: center; gap: 12px; color: #344b65; background: #f4f7fb; font-size: 13px; }
.online-image-editor-status[hidden], .online-image-editor-status button[hidden] { display: none; }
.online-image-editor-status.is-error { color: #9f1d20; background: #fff1f0; }
.online-image-editor-workspace { flex: 1; min-height: 0; min-width: 0; position: relative; }
.online-image-editor-host { height: 100%; min-height: 0; min-width: 0; position: relative; }
.online-image-editor-actions { display: flex; gap: 8px; flex-shrink: 0; }
.online-image-editor-host .FIE_root { width: 100%; height: 100%; }
.online-image-editor-host button[color="primary"] { background: #2563eb; color: #fff; }
.online-image-editor-host button[color="primary"]:hover:not(:disabled) { background: #1d4ed8; }
.online-image-editor-overlay button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
body.online-image-editor-open .SfxModal-root, body.online-image-editor-open .SfxPopper-root { z-index: 12100; }
.online-gallery-edit { width: 100%; margin-top: 6px; min-height: 32px; padding: 5px 8px; font-size: 12px; }
.online-image-mosaic { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f7f9fc; }
.online-image-mosaic-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.online-image-mosaic-toolbar strong { font-size: 15px; }
.online-image-mosaic-toolbar p { margin: 4px 0 0; color: #526379; font-size: 12px; }
.online-image-mosaic-control { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: #344b65; }
.online-image-mosaic-control input[type="range"] { width: 120px; height: 32px; padding: 0; border: 0; accent-color: #2563eb; }
.online-image-mosaic-control output { min-width: 44px; font-variant-numeric: tabular-nums; }
.online-image-mosaic-stage { flex: 1; min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; }
.online-image-mosaic-canvas-wrap { position: relative; overflow: hidden; background: #fff; }
.online-image-mosaic-canvas-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.online-image-mosaic-cursor { position: absolute; transform: translate(-50%, -50%); border: 1px solid #fff; outline: 1px solid #1d4ed8; border-radius: 50%; pointer-events: none; }
.online-image-mosaic-cursor[hidden] { display: none; }
.online-image-mosaic-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 18px; background: #fff; border-top: 1px solid var(--line); }
.online-image-mosaic-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.online-image-mosaic-footer span { font-size: 12px; color: #526379; }
.online-image-mosaic-error { padding: 8px 18px; color: #9f1d20; background: #fff1f0; font-size: 12px; }
.online-image-mosaic-error[hidden] { display: none; }
@media (max-width: 640px) {
  .online-image-editor-overlay { padding: 0; }
  .online-image-editor-dialog { width: 100%; height: 100dvh; border-radius: 0; }
  .online-image-editor-header { padding: 12px; gap: 8px; }
  .online-image-editor-header h2 { font-size: 16px; }
  .online-image-editor-header p { max-width: 240px; font-size: 11px; }
  .online-image-editor-header { flex-wrap: wrap; }
  .online-image-editor-actions { margin-left: auto; }
  .online-image-editor-status { padding: 10px 12px; }
  .online-image-mosaic-toolbar { padding: 8px 12px; gap: 5px 12px; }
  .online-image-mosaic-toolbar > div { width: 100%; }
  .online-image-mosaic-control { flex: 1; min-width: 0; }
  .online-image-mosaic-control input[type="range"] { width: 74px; min-width: 32px; flex: 1; }
  .online-image-mosaic-control output { min-width: 38px; }
  .online-image-mosaic-footer { padding: 8px 12px; }
  .online-image-mosaic-footer > div { flex: 1; justify-content: flex-end; }
  .online-image-mosaic-footer button { padding: 6px 8px; font-size: 12px; }
}