.media-edit-button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 38px;
  margin: -5px 0 14px;
  color: #eadfce;
  border: 1px solid rgba(213, 177, 126, .28);
  border-radius: 0;
  background: #211a12;
  font: 600 11px/1 var(--sans);
}
.media-edit-button:hover { color: #fff5e5; background: #2c2116; }

.gme-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #f1e6d5;
  background: rgba(5, 4, 3, .9);
  backdrop-filter: blur(12px);
}
.gme-dialog {
  width: min(980px, 100%);
  max-height: calc(100svh - 40px);
  overflow: auto;
  border: 1px solid rgba(213, 177, 126, .32);
  background:
    linear-gradient(rgba(196, 146, 83, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 146, 83, .018) 1px, transparent 1px),
    radial-gradient(circle at 16% 0, rgba(181, 138, 80, .08), transparent 34%),
    linear-gradient(145deg, #18140f, #0e0c09);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.52), inset 0 1px rgba(241, 223, 194, .035);
}
.gme-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(213, 177, 126, .22);
}
.gme-head span { color: #c99a5e; font: 9px/1 "DM Mono", monospace; letter-spacing: .12em; }
.gme-head h2 { margin: 7px 0 0; font: 400 32px/1 "Libre Caslon Display", Georgia, serif; }
.gme-close {
  width: 38px;
  height: 38px;
  color: #eadfce;
  border: 1px solid rgba(213, 177, 126, .24);
  background: #18130e;
}
.gme-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); }
.gme-stage {
  min-height: 480px;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(213,177,126,.025) 25%, transparent 25%, transparent 75%, rgba(213,177,126,.025) 75%),
    linear-gradient(45deg, rgba(213,177,126,.025) 25%, transparent 25%, transparent 75%, rgba(213,177,126,.025) 75%),
    #0c0a05;
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}
.gme-stage canvas, .gme-stage video {
  display: block;
  max-width: 100%;
  max-height: 62svh;
  background: #090806;
  box-shadow: 0 18px 38px rgba(0,0,0,.52);
}
/* Familiar direct crop: the source remains fully visible while a bounded crop
   rectangle supplies the derivative canvas used by preview, Luna, and export. */
.gme-crop-workbench {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  contain: layout paint;
  background: #090806;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .52);
  touch-action: none;
  user-select: none;
}

.gme-stage .gme-crop-surface,
.inline-editor-stage .gme-crop-surface {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  pointer-events: none;
  box-shadow: none !important;
}

.gme-stage .gme-export-canvas,
.inline-editor-stage .gme-export-canvas {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.gme-crop-box {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  min-width: 24px;
  min-height: 24px;
  border: 2px solid rgba(255, 247, 232, .96);
  outline: 1px solid rgba(35, 22, 10, .72);
  outline-offset: -3px;
  background: transparent;
  box-shadow: 0 0 0 100vmax rgba(5, 4, 3, .66);
  cursor: move;
  touch-action: none;
  user-select: none;
  will-change: left, top, width, height;
}

.gme-crop-box.is-moving { cursor: grabbing; }
.gme-crop-box.is-resizing { cursor: default; }
.gme-crop-box:focus-visible {
  outline: 2px solid #f6d59d;
  outline-offset: -4px;
  box-shadow: 0 0 0 100vmax rgba(5, 4, 3, .66), inset 0 0 0 2px rgba(31, 18, 6, .78);
}

.gme-crop-guides,
.gme-crop-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gme-crop-guide { background: rgba(255, 250, 240, .5); }
.gme-crop-guide--v-one,
.gme-crop-guide--v-two {
  width: 1px;
  height: 100%;
}
.gme-crop-guide--v-one { left: 33.333%; }
.gme-crop-guide--v-two { left: 66.666%; }
.gme-crop-guide--h-one,
.gme-crop-guide--h-two {
  width: 100%;
  height: 1px;
}
.gme-crop-guide--h-one { top: 33.333%; }
.gme-crop-guide--h-two { top: 66.666%; }

.gme-crop-handle {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  touch-action: none;
}

.gme-crop-handle::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #fff8eb;
  background: #2a1d11;
  box-shadow: 0 0 0 1px rgba(29, 17, 7, .78);
}

.gme-crop-handle--nw { top: -1px; left: -1px; cursor: nwse-resize; }
.gme-crop-handle--nw::after { top: 3px; left: 3px; }
.gme-crop-handle--n { top: -1px; left: calc(50% - 16px); cursor: ns-resize; }
.gme-crop-handle--n::after { top: 3px; left: 10px; width: 12px; height: 5px; }
.gme-crop-handle--ne { top: -1px; right: -1px; cursor: nesw-resize; }
.gme-crop-handle--ne::after { top: 3px; right: 3px; }
.gme-crop-handle--e { top: calc(50% - 16px); right: -1px; cursor: ew-resize; }
.gme-crop-handle--e::after { top: 10px; right: 3px; width: 5px; height: 12px; }
.gme-crop-handle--se { right: -1px; bottom: -1px; cursor: nwse-resize; }
.gme-crop-handle--se::after { right: 3px; bottom: 3px; }
.gme-crop-handle--s { bottom: -1px; left: calc(50% - 16px); cursor: ns-resize; }
.gme-crop-handle--s::after { bottom: 3px; left: 10px; width: 12px; height: 5px; }
.gme-crop-handle--sw { bottom: -1px; left: -1px; cursor: nesw-resize; }
.gme-crop-handle--sw::after { bottom: 3px; left: 3px; }
.gme-crop-handle--w { top: calc(50% - 16px); left: -1px; cursor: ew-resize; }
.gme-crop-handle--w::after { top: 10px; left: 3px; width: 5px; height: 12px; }

.gme-crop-handle:focus-visible {
  outline: 2px solid #f6d59d;
  outline-offset: -4px;
  background: rgba(18, 12, 7, .4);
}

.gme-crop-workbench[data-crop-active="false"] .gme-crop-box {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}
.gme-crop-workbench[data-crop-active="false"] :is(.gme-crop-guides, .gme-crop-handle) {
  visibility: hidden;
}

.gme-crop-presets {
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.gme-crop-presets legend {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: #c99a5e;
  font: 600 11px/1.2 "Inter", "Segoe UI", Arial, sans-serif;
}
.gme-crop-preset-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.gme-crop-preset-grid button,
.gme-crop-actions button {
  min-height: 40px;
  padding: 8px 9px;
  color: #c9bdab;
  border: 1px solid rgba(213, 177, 126, .24);
  border-radius: 5px;
  background: #18130e;
  font: 600 11px/1.1 "Inter", "Segoe UI", Arial, sans-serif;
}
.gme-crop-preset-grid button:hover,
.gme-crop-actions button:hover { color: #fff5e5; background: #2c2116; }
.gme-crop-preset-grid button[aria-pressed="true"] {
  color: #fff5e5;
  border-color: #d5b17e;
  background: #332517;
  box-shadow: inset 0 -2px #d5b17e;
}
.gme-filter-presets {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.gme-filter-presets legend {
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  color: #c99a5e;
  font: 600 11px/1.2 "Inter", "Segoe UI", Arial, sans-serif;
}
.gme-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.gme-filter-grid button {
  min-height: 58px;
  padding: 10px 8px;
  color: #c9bdab;
  border: 1px solid rgba(213,177,126,.18);
  border-radius: 7px;
  background: linear-gradient(145deg, #211a12, #14110d);
  font: 650 11px/1.1 "Inter", "Segoe UI", Arial, sans-serif;
}
.gme-filter-grid button:hover,
.gme-filter-grid button:focus-visible { color: #fff5e5; border-color: rgba(213,177,126,.55); }
.gme-filter-grid button[aria-pressed="true"] {
  color: #fff5e5;
  border-color: #d5b17e;
  background: linear-gradient(145deg, #3b2a1a, #20170f);
  box-shadow: inset 0 -3px #d5b17e;
}
.gme-overlay-tools { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.gme-overlay-tools legend { width: 100%; margin: 0 0 10px; padding: 0; color: #c99a5e; font: 600 11px/1.2 "Inter", "Segoe UI", Arial, sans-serif; }
.gme-overlay-tools .gme-control { margin-bottom: 12px; }
.gme-overlay-tools .gme-control--wide { grid-column: 1 / -1; }
.gme-overlay-tools textarea { width: 100%; min-height: 58px; resize: vertical; box-sizing: border-box; padding: 9px 10px; color: #f1e6d5; border: 1px solid rgba(213,177,126,.24); background: #12100c; font: 600 12px/1.35 "Inter", sans-serif; }
.gme-overlay-tools input[type="color"] { width: 100%; min-height: 34px; padding: 3px; border: 1px solid rgba(213,177,126,.24); background: #12100c; }
.gme-overlay-tools select { min-height: 36px; }
.gme-overlay-tools > select { width: 100%; margin: 0 0 7px; }
.gme-overlay-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 4px 0 12px; }
.gme-overlay-actions button { min-height: 36px; padding: 7px 8px; color: #eadfce; border: 1px solid rgba(213,177,126,.24); background: #211a12; font: 600 10px/1.1 "Inter", sans-serif; }
.gme-overlay-actions button:hover { color: #fff5e5; background: #2c2116; }
.gme-overlay-actions button:disabled { opacity: .45; cursor: not-allowed; }

/* The existing Social shell keeps its placeholder panels for non-photo tools. When
   the editor engine has mounted, these CSS-only hooks reveal its real brand/object
   controls without requiring a second editor implementation in the page shell. */
.studio-editor-shell .editor-deck-panel[data-editor-panel="frame adjust filters"]:has(#inlineEditorControls[data-active-tool="brand"]),
.studio-editor-shell .editor-deck-panel[data-editor-panel="frame adjust filters"]:has(#inlineEditorControls[data-active-tool="object"]) { display: block !important; }
.studio-editor-shell:has(#inlineEditorControls[data-active-tool="brand"]) .editor-held-tool[data-editor-panel="brand"],
.studio-editor-shell:has(#inlineEditorControls[data-active-tool="object"]) .editor-object-panel[data-editor-panel="object"] { display: none !important; }
.studio-editor-shell #inlineEditorControls[data-active-tool="brand"] > [data-editor-group="brand"],
.studio-editor-shell #inlineEditorControls[data-active-tool="object"] > [data-editor-group="object"] { display: block; }
.studio-editor-shell #inlineEditorControls[data-active-tool="brand"] > [data-editor-group="frame"],
.studio-editor-shell #inlineEditorControls[data-active-tool="brand"] > [data-editor-group="adjust"],
.studio-editor-shell #inlineEditorControls[data-active-tool="brand"] > [data-editor-group="filters"],
.studio-editor-shell #inlineEditorControls[data-active-tool="object"] > [data-editor-group="frame"],
.studio-editor-shell #inlineEditorControls[data-active-tool="object"] > [data-editor-group="adjust"],
.studio-editor-shell #inlineEditorControls[data-active-tool="object"] > [data-editor-group="filters"] { display: none; }
.gme-crop-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.studio-editor-shell #inlineEditorControls > .gme-crop-presets,
.studio-editor-shell #inlineEditorControls > .gme-crop-actions,
.studio-editor-shell #inlineEditorControls > .gme-filter-presets {
  grid-column: 1 / -1;
}
.gme-controls { padding: 24px; border-left: 1px solid rgba(196,146,83,.13); background: #14110d; }
.gme-control { display: block; margin-bottom: 18px; }
.gme-control > span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #c99a5e; font: 9px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.gme-control input[type="range"] { width: 100%; accent-color: #b98546; }
.gme-control input[type="number"] {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: #f1e6d5;
  border: 1px solid rgba(213,177,126,.24);
  border-radius: 0;
  background: #12100c;
  color-scheme: dark;
}
.gme-control select {
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 10px;
  color: #f1e6d5;
  border: 1px solid rgba(213,177,126,.24);
  border-radius: 0;
  background: #12100c;
  color-scheme: dark;
  font: 600 12px/1.2 "Inter", Arial, sans-serif;
}
.gme-toggle { display: flex; align-items: center; gap: 9px; margin: 12px 0; color: #a99a87; font-size: 12px; }
.gme-rotate { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.gme-rotate button, .gme-actions button {
  min-height: 40px;
  padding: 9px 12px;
  color: #eadfce;
  border: 1px solid rgba(213,177,126,.24);
  border-radius: 0;
  background: #211a12;
  font-weight: 600;
}
.gme-actions { display: grid; gap: 8px; margin-top: 26px; }
.gme-rotate button:hover, .gme-actions button:hover { color: #fff5e5; background: #2c2116; }
.gme-actions .primary { color: #160f08; border-color: #d5b17e; background: #d5b17e; }
.gme-actions button:disabled { opacity: .55; cursor: wait; }
.gme-note { min-height: 34px; margin: 14px 0 0; color: #a99a87; font-size: 11px; }
.gme-progress { margin-top: 12px; color: #c99a5e; font: 9px/1.4 "DM Mono", monospace; }

.gme-dialog :is(button, input, select):focus-visible {
  outline: 2px solid #d5b17e;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(213, 177, 126, .13);
}

@media (max-width: 760px) {
  .gme-overlay { padding: 0; }
  .gme-dialog { max-height: 100svh; min-height: 100svh; width: 100%; box-shadow: none; }
  .gme-body { grid-template-columns: 1fr; }
  .gme-stage { min-height: 310px; padding: 12px; }
  .gme-stage canvas, .gme-stage video { max-height: 42svh; }
  .gme-controls { border-left: 0; border-top: 1px solid rgba(196,146,83,.13); }
  .gme-crop-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gme-crop-handle { width: 36px; height: 36px; }
  .gme-crop-handle--n,
  .gme-crop-handle--s { left: calc(50% - 18px); }
  .gme-crop-handle--e,
  .gme-crop-handle--w { top: calc(50% - 18px); }
}

/* Keep uploaded media from changing the instrument's panel geometry. */
.editor-workbench,
.editor-workbench > *,
.editor-intake,
.inline-media-editor,
.inline-editor-body,
.inline-editor-stage,
.preview-paper,
.preview-stage,
.social-preview,
.preview-media,
.media-holding,
.media-tray {
  min-width: 0;
  min-height: 0;
}

.inline-media-editor,
.inline-editor-body,
.inline-editor-stage,
.preview-stage,
.preview-media,
.media-holding,
.media-tray {
  overflow: hidden;
}

.inline-editor-stage,
.preview-media,
.media-holding,
.media-tray {
  contain: layout paint;
}

.inline-editor-stage img,
.inline-editor-stage video,
.preview-media img,
.preview-media video,
.media-holding img,
.media-holding video,
.media-tray img,
.media-tray video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.inline-editor-stage img,
.inline-editor-stage video {
  object-fit: contain;
}

.preview-media img,
.preview-media video {
  object-fit: contain;
}

.media-holding img,
.media-holding video,
.media-tray img,
.media-tray video {
  object-fit: cover;
}

/* Facebook feed media follows the uploaded asset's own proportions. The
   viewport remains bounded so a tall asset cannot grow the preview rail. */
.social-preview[data-format="facebook-feed"] .preview-media:has(> img, > video) > img,
.social-preview[data-format="facebook-feed"] .preview-media:has(> img, > video) > video {
  height: auto;
  max-height: var(--preview-feed-media-max-height, 300px);
}

/* The local Social rail scrolls horizontally when space is tight, never vertically. */
.social-local-strip {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.social-local-strip::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Desktop Social is a single, fixed instrument face. Media never grows the
   workbench, all three columns share a baseline, and the calendar lives elsewhere. */
@media (min-width: 1101px) {
  html:has(body[data-social-active="studio"]),
  body[data-social-active="studio"] {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-social-active="studio"] .business-shell,
  body[data-social-active="studio"] .desk {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .workspace.social-product-panel {
    --social-workspace-available: max(0px, calc(100dvh - var(--hub-header-h) - var(--hub-local-h) - 52px));
    box-sizing: border-box !important;
    height: var(--social-workspace-available) !important;
    min-height: 0 !important;
    max-height: var(--social-workspace-available) !important;
    grid-template-areas: "compose preview" !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .workspace.social-product-panel > .compose-stack,
  .workspace.social-product-panel > .preview-stack,
  .compose-stack > .social-editor,
  .social-editor > .editor-workbench,
  .editor-workbench > .editor-intake,
  .editor-workbench > .inline-media-editor,
  .preview-stack > .preview-paper {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .workspace.social-product-panel > .compose-stack,
  .workspace.social-product-panel > .preview-stack,
  .compose-stack > .social-editor,
  .social-editor > .editor-workbench,
  .editor-workbench > .editor-intake,
  .editor-workbench > .inline-media-editor,
  .preview-stack > .preview-paper,
  .editor-intake > .media-holding,
  .editor-intake > .editor-direction,
  .inline-media-editor > .inline-editor-body {
    overflow: hidden !important;
  }

  .social-editor > .editor-workbench {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .editor-workbench > .editor-intake {
    grid-template-rows: clamp(220px, 28vh, 260px) minmax(0, 1fr) !important;
  }

  .workspace.social-product-panel > .preview-stack {
    align-self: stretch !important;
  }

  .preview-stack > .preview-paper {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  }
}

/* Final hard lock: the desktop instrument may shrink to fit, but never grow
   beyond the approved loaded-media geometry. */
@media (min-width: 1101px) {
  .workspace.social-product-panel {
    --social-instrument-height: 728px;
    height: min(var(--social-instrument-height), var(--social-workspace-available)) !important;
    min-height: 0 !important;
    max-height: var(--social-instrument-height) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  .workspace.social-product-panel > .compose-stack,
  .workspace.social-product-panel > .preview-stack {
    height: 100% !important;
    min-height: 0 !important;
    max-height: var(--social-instrument-height) !important;
    align-self: stretch !important;
  }

  .workspace.social-product-panel > .preview-stack {
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: stretch !important;
  }

  .workspace.social-product-panel > .preview-stack > .preview-paper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
  }

  .social-editor > .editor-workbench,
  .editor-workbench > .editor-intake,
  .editor-workbench > .inline-media-editor {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
}

/* The server-owned shell is already the stable first-paint surface. Draft
   restoration updates controls and media in place; it must never curtain or
   reveal the whole Social workspace. */
body[data-guth-chrome="server"] #bootgate {
  display: none !important;
}

body[data-guth-chrome="server"] #shell[hidden] {
  display: block !important;
}

body:has(.workspace.social-product-panel) .workspace.social-product-panel,
body:has(.workspace.social-product-panel) .compose-stack,
body:has(.workspace.social-product-panel) .preview-stack,
body:has(.workspace.social-product-panel) .editor-workbench,
body:has(.workspace.social-product-panel) .editor-intake,
body:has(.workspace.social-product-panel) .media-holding,
body:has(.workspace.social-product-panel) .editor-direction,
body:has(.workspace.social-product-panel) .inline-media-editor,
body:has(.workspace.social-product-panel) .preview-paper {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}