.proposal-media-workspace {
  --media-orange: #f58216;
  margin: 14px 0;
  overflow: hidden;
  color: #f4f7fa;
  background: #07121b;
  border: 1px solid #294052;
  border-radius: 12px;
}

.proposal-media-workspace > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px 18px;
  background: linear-gradient(135deg, #0b1a25, #08131d);
  border-bottom: 1px solid #294052;
}

.proposal-media-workspace > header > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--media-orange);
  background: rgba(245, 130, 22, .08);
  border: 1px solid var(--media-orange);
  border-radius: 50%;
}

.proposal-media-workspace > header svg { width: 23px; height: 23px; }
.proposal-media-workspace > header small {
  display: block;
  color: var(--media-orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
}
.proposal-media-workspace > header h3 { margin: 2px 0 3px; color: #fff; font-size: 21px; }
.proposal-media-workspace > header p { margin: 0; color: #9fb1c2; font-size: 13px; }

.proposal-media-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.proposal-media-save,
.proposal-media-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  color: #081018;
  background: var(--media-orange);
  border: 1px solid var(--media-orange);
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 9px 24px rgba(245, 130, 22, .2);
  font: inherit;
  font-weight: 800;
}
.proposal-media-save {
  color: #f4f7fa;
  background: #111e29;
  border-color: #b75d13;
  box-shadow: none;
  font: inherit;
  font-weight: 800;
}
.proposal-media-save:hover,
.proposal-media-save:focus-visible {
  color: #fff;
  background: #1c2b37;
  border-color: var(--media-orange);
  outline: 2px solid rgba(245, 130, 22, .25);
  outline-offset: 2px;
}
.proposal-media-save:disabled { opacity: .65; cursor: wait; }
.proposal-media-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.proposal-media-upload:hover { background: #ff962f; border-color: #ff962f; }
.proposal-media-upload svg,
.proposal-media-save svg { width: 19px!important; height: 19px!important; }

.proposal-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  padding: 14px;
}
.proposal-media-card {
  min-width: 0;
  overflow: hidden;
  background: #09151f;
  border: 1px solid #314759;
  border-radius: 10px;
}
.proposal-media-preview {
  position: relative;
  min-height: 166px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050b10;
}
.proposal-media-preview[role="button"] { cursor: pointer; }
.proposal-media-preview[role="button"]:hover img { filter: brightness(.88); transform: scale(1.012); }
.proposal-media-preview[role="button"]:focus-visible {
  outline: 3px solid var(--media-orange);
  outline-offset: -3px;
}
.proposal-media-preview img { width: 100%; height: 190px; display: block; object-fit: cover; }
.proposal-media-preview img { transition: filter .16s ease, transform .16s ease; }
.proposal-media-file { display: grid; place-items: center; gap: 8px; color: #a970ff; }
.proposal-media-file svg { width: 42px; height: 42px; }
.proposal-media-order,.proposal-media-marked {
  position: absolute;
  top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(5, 11, 16, .9);
  border: 1px solid #40576a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.proposal-media-order { left: 9px; }
.proposal-media-marked { right: 9px; color: #ffb36e; border-color: #9b571f; }
.proposal-media-marked svg { width: 13px; }
.proposal-media-card-body { display: grid; gap: 10px; padding: 12px; }
.proposal-media-card-body label { display: grid; gap: 5px; color: #aebdca; font-size: 11px; font-weight: 750; }
.proposal-media-card-body input[type="text"],
.proposal-media-card-body input:not([type]),
.proposal-media-card-body select {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  color: #fff;
  background: #050d14;
  border: 1px solid #354c5e;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
}
.proposal-media-card-body select { color-scheme: dark; }
.proposal-media-visibility { display: flex!important; align-items: center; gap: 8px!important; }
.proposal-media-visibility input { accent-color: var(--media-orange); }
.proposal-media-visibility span { display: inline-flex; align-items: center; gap: 6px; color: #d6e0e7; font-size: 12px; }
.proposal-media-visibility svg { width: 16px; color: #22d3ee; }
.proposal-media-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.proposal-media-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #f4f7fa;
  background: #111e29;
  border: 1px solid #3a5062;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.proposal-media-actions button:hover { color: #081018; background: var(--media-orange); border-color: var(--media-orange); }
.proposal-media-actions button.danger:hover { color: #fff; background: #8f2732; border-color: #ff5361; }
.proposal-media-actions svg { width: 15px; }
.proposal-media-empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #9fb1c2;
  border: 1px dashed #3a5265;
  border-radius: 9px;
  text-align: center;
}
.proposal-media-empty svg { width: 34px; height: 34px; color: var(--media-orange); }
.proposal-media-empty strong { color: #fff; font-size: 15px; }
.proposal-media-empty-upload {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
  padding: 0 15px;
  color: #071018;
  background: var(--media-orange);
  border: 1px solid var(--media-orange);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
.proposal-media-empty-upload:hover { background: #ff962f; border-color: #ff962f; }
.proposal-media-empty-upload svg { width: 18px; height: 18px; color: currentColor; }

.proposal-photo-editor {
  width: min(1180px, calc(100vw - 28px));
  height: calc(100vh - 28px);
  height: min(900px, calc(100dvh - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  padding: 0;
  overflow: hidden;
  color: #f5f7f9;
  background: #07111a;
  border: 1px solid #40586b;
  border-radius: 16px;
  box-shadow: 0 35px 110px rgba(0,0,0,.72);
}
.proposal-photo-editor::backdrop { background: rgba(2,6,9,.86); backdrop-filter: blur(7px); }
.proposal-photo-editor-shell { min-height: 0; height: 100%; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; }
.proposal-photo-editor-shell > header {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 16px 18px;
  background: #0b1924;
  border-bottom: 1px solid #31495b;
}
.proposal-photo-editor-shell > header > span { display:grid; place-items:center; width:44px; height:44px; color:#f58216; border:1px solid #f58216; border-radius:50%; }
.proposal-photo-editor-shell > header small { color:#f58216; font-size:11px; font-weight:900; letter-spacing:.07em; }
.proposal-photo-editor-shell > header h2 { margin:2px 0; color:#fff; font-size:21px; }
.proposal-photo-editor-shell > header p { margin:0; color:#9fb1c2; font-size:13px; }
.proposal-photo-editor-shell > header button { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:#101e29; border:1px solid #40586b; border-radius:50%; cursor:pointer; }
.proposal-photo-editor-toolbar {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 10px 14px;
  overflow-x: auto;
  background: #08141e;
  border-bottom: 1px solid #31495b;
}
.proposal-photo-editor-toolbar button,.proposal-photo-editor-toolbar label {
  min-height: 38px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  color:#dbe4ea;
  background:#111e29;
  border:1px solid #3a5062;
  border-radius:7px;
  font:inherit;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.proposal-photo-editor-toolbar button { cursor:pointer; }
.proposal-photo-editor-toolbar button.active { color:#071018; background:#f58216; border-color:#f58216; }
.proposal-photo-editor-toolbar input { width:27px; height:27px; padding:0; border:0; background:transparent; }
.proposal-photo-editor-toolbar svg { width:16px; }
.proposal-photo-editor-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) 230px;
  grid-template-rows: minmax(0,1fr);
  overflow: hidden;
}
.proposal-photo-canvas-wrap {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #496174 #03070a;
  background: #03070a;
}
.proposal-photo-canvas-stage { position: relative; flex: 0 0 auto; width: max-content; max-width: 100%; }
.proposal-photo-canvas-wrap canvas { display:block; max-width:100%; height:auto; cursor:crosshair; touch-action:none; }
.proposal-photo-canvas-wrap canvas.is-panning { cursor: grab; }
.proposal-photo-canvas-wrap canvas.is-grabbing { cursor: grabbing; }
.proposal-photo-bubble-selection {
  position: absolute;
  z-index: 3;
  min-width: 70px;
  min-height: 46px;
  padding: 3px;
  border: 2px solid #ff7a0a;
  border-radius: 12px;
  box-sizing: border-box;
}
.proposal-photo-bubble-selection[hidden] { display: none; }
.proposal-photo-bubble-editor {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 9px 11px;
  overflow: hidden;
  resize: none;
  color: #fff;
  background: transparent;
  border: 1px dashed rgba(255,255,255,.7);
  border-radius: 8px;
  outline: 0;
  font: 700 clamp(12px, 1.55vw, 22px)/1.18 Inter, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.proposal-photo-bubble-drag,
.proposal-photo-bubble-resize {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 0;
  color: #071018;
  background: #ff7a0a;
  border: 2px solid #071018;
  box-shadow: 0 3px 12px rgba(0,0,0,.38);
  touch-action: none;
}
.proposal-photo-bubble-drag {
  top: -15px;
  right: 24px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  cursor: move;
}
.proposal-photo-bubble-drag svg { width: 16px; height: 16px; }
.proposal-photo-bubble-resize {
  right: -10px;
  bottom: -10px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: nwse-resize;
}
.proposal-photo-editor-main > aside { display:grid; align-content:start; gap:14px; padding:16px; background:#0a1721; border-left:1px solid #31495b; }
.proposal-photo-editor-main aside p { display:flex; gap:8px; margin:0; color:#aebdca; font-size:12px; line-height:1.45; }
.proposal-photo-editor-main aside p svg { flex:none; width:17px; color:#22d3ee; }
.proposal-photo-editor-main aside button { min-height:40px; color:#ff8d98; background:#1a1014; border:1px solid #75313a; border-radius:8px; font:inherit; font-weight:800; cursor:pointer; }
.proposal-photo-editor-shell > footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; background:#08141e; border-top:1px solid #31495b; }
.proposal-photo-editor-shell > footer button { min-height:42px; display:inline-flex; align-items:center; gap:8px; padding:0 15px; color:#fff; background:#111e29; border:1px solid #3a5062; border-radius:8px; font:inherit; font-weight:800; cursor:pointer; }
.proposal-photo-editor-shell > footer .primary { color:#071018; background:#f58216; border-color:#f58216; }
.proposal-photo-editor-shell > footer svg { width:17px; }

@media (max-width: 760px) {
  .proposal-media-workspace > header { grid-template-columns: auto minmax(0,1fr); }
  .proposal-media-header-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .proposal-media-upload,
  .proposal-media-save { width: 100%; }
  .proposal-media-grid { grid-template-columns: 1fr; }
  .proposal-photo-editor {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-height: none;
    border-radius: 12px;
  }
  .proposal-photo-editor-main { grid-template-columns: 1fr; grid-template-rows: minmax(300px,52dvh) auto; overflow:auto; }
  .proposal-photo-editor-main > aside { border-left:0; border-top:1px solid #31495b; }
  .proposal-photo-canvas-wrap { min-height:300px; height:100%; overflow:auto; }
}