.cwbe-wrapper {
  --app-bg: #efeff2;
  --panel: #f8f8fa;
  --card: #ffffff;
  --line: #e3e3e8;
  --text: #121212;
  --muted: #666672;
  --pink: #ef5c97;
  --pink-dark: #e64586;
  --pink-soft: #ffe6ef;
  --shadow: 0 10px 28px rgba(26, 26, 31, 0.06);
  color: var(--text);
  background: var(--app-bg);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
}
.cwbe-wrapper *, .cwbe-wrapper *::before, .cwbe-wrapper *::after { box-sizing: border-box; }
.cwbe-wrapper .topbar,
.cwbe-wrapper .footer-note {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  background: #f5f5f7;
  border-bottom: 1px solid var(--line);
}
.cwbe-wrapper .footer-note {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.cwbe-wrapper .brand-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cwbe-wrapper .cwbe-mini-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 2px solid #f5a8c6;
  color: var(--pink);
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: var(--shadow);
}
.cwbe-wrapper h1 {
  margin: 0 0 6px;
  color: var(--pink);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
}
.cwbe-wrapper .tag { margin: 0; color: var(--text); font-size: 14px; }
.cwbe-wrapper .top-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cwbe-wrapper .topbar--compact { justify-content: flex-end; }
.cwbe-wrapper .topbar--compact .top-actions { width: 100%; justify-content: flex-end; }
.cwbe-wrapper .app-grid {
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  gap: 14px;
  padding: 18px;
  min-height: 75vh;
}
.cwbe-wrapper .sidebar,
.cwbe-wrapper .editor-panel { min-width: 0; }
.cwbe-wrapper .sidebar { display: flex; flex-direction: column; gap: 14px; }
.cwbe-wrapper .panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.cwbe-wrapper .panel h2 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--pink);
  font-weight: 700;
}
.cwbe-wrapper .btn,
.cwbe-wrapper .tool {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  transition: .18s ease;
}
.cwbe-wrapper .btn:hover,
.cwbe-wrapper .tool:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(239,92,151,.12);
}
.cwbe-wrapper .btn.primary,
.cwbe-wrapper .tool.active {
  background: linear-gradient(180deg, #f56aa2 0%, #e94e8b 100%);
  color: #fff;
  border-color: #ea5b95;
}
.cwbe-wrapper .btn.danger {
  color: #b3264d;
  border-color: #f2b6cb;
  background: #fff7fa;
}
.cwbe-wrapper .small-btn { padding: 10px 12px; font-size: 14px; }
.cwbe-wrapper .stack { display: flex; flex-direction: column; gap: 10px; }
.cwbe-wrapper .inline-stack { flex-direction: row; flex-wrap: wrap; }
.cwbe-wrapper .field-grid { display: grid; gap: 12px; }
.cwbe-wrapper .field-grid.two { grid-template-columns: 1fr 1fr; }
.cwbe-wrapper label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.cwbe-wrapper input[type="text"],
.cwbe-wrapper input[type="number"],
.cwbe-wrapper select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fcfcfd;
  color: var(--text);
  padding: 11px 12px;
}
.cwbe-wrapper input[type="range"] { width: 100%; accent-color: var(--pink); }
.cwbe-wrapper input[type="color"] {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fcfcfd;
  padding: 2px;
}
.cwbe-wrapper .small { color: var(--muted); font-size: 12px; margin: 0 0 10px; line-height: 1.5; font-weight: 400; }

.cwbe-wrapper .checkline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0 2px;
}
.cwbe-wrapper .checkline input[type="checkbox"] { accent-color: var(--pink); }

.cwbe-wrapper .meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--muted); gap: 8px; }
.cwbe-wrapper .thumb-tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 500px;
  overflow: auto;
  padding-right: 2px;
}
.cwbe-wrapper .thumb {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);
}
.cwbe-wrapper .thumb.active {
  border-color: #f6a0c1;
  box-shadow: 0 0 0 3px rgba(239, 92, 151, 0.16);
}
.cwbe-wrapper .thumb img { width: 100%; height: 98px; object-fit: cover; display: block; }
.cwbe-wrapper .thumb span { display: block; font-size: 11px; padding: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwbe-wrapper .canvas-panel { min-height: 760px; display: flex; flex-direction: column; background: #f7f7f9; }
.cwbe-wrapper .canvas-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cwbe-wrapper .tool-group,
.cwbe-wrapper .zoom-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cwbe-wrapper .canvas-wrap {
  flex: 1;
  overflow: auto;
  background: linear-gradient(180deg, #fafafb 0%, #f2f2f6 100%);
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.cwbe-wrapper #editorCanvas {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(21, 21, 27, 0.08);
  max-width: none;
  touch-action: none;
}
.cwbe-wrapper .right-panel .panel:not(:last-child) {
  background: #fff;
}
@media (max-width: 1280px) {
  .cwbe-wrapper .app-grid { grid-template-columns: 1fr; }
  .cwbe-wrapper .canvas-panel { min-height: 62vh; }
}
@media (max-width: 720px) {
  .cwbe-wrapper .topbar,
  .cwbe-wrapper .footer-note { flex-direction: column; align-items: stretch; }
  .cwbe-wrapper .field-grid.two,
  .cwbe-wrapper .export-grid { grid-template-columns: 1fr; }
  .cwbe-wrapper .thumb-tray { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cwbe-wrapper h1 { font-size: 24px; }
  .cwbe-wrapper .brand-row { align-items: flex-start; }
  .cwbe-wrapper .cwbe-mini-logo { width: 56px; height: 56px; font-size: 14px; }
}

.cwbe-wrapper .cwbe-logo-image {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid #f1c4d5;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  flex: 0 0 auto;
}
.cwbe-wrapper .cwbe-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cwbe-wrapper .right-panel .panel.is-collapsible {
  padding: 0;
  overflow: hidden;
}
.cwbe-wrapper .right-panel .panel.is-collapsible > h2 {
  margin: 0;
}
.cwbe-wrapper .panel-toggle {
  width: 100%;
  border: 0;
  background: #fff;
  color: var(--pink);
  padding: 16px;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}
.cwbe-wrapper .panel-toggle:hover {
  background: #fff8fb;
}
.cwbe-wrapper .panel-chevron {
  color: var(--pink);
  font-size: 22px;
  line-height: 1;
  transition: transform .2s ease;
}
.cwbe-wrapper .panel.is-open .panel-chevron {
  transform: rotate(180deg);
}
.cwbe-wrapper .panel-content {
  padding: 0 16px 16px;
  border-top: 1px solid #f1f1f4;
}
.cwbe-wrapper .panel-content[hidden] {
  display: none !important;
}
@media (max-width: 720px) {
  .cwbe-wrapper .cwbe-logo-image { width: 56px; height: 56px; }
}
.cwbe-wrapper .cwbe-share-btn {
  border: 2px solid #111;
  background: #fff;
  color: var(--pink);
  font-weight: 800;
}
.cwbe-wrapper .cwbe-share-btn:hover { background: var(--pink-soft); }

/* 1.7.1: compact desktop editor and stable page scrolling */
@media (min-width: 1280px) {
  .cwbe-wrapper .app-grid {
    grid-template-columns: 220px minmax(480px, 610px) 250px;
    justify-content: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px;
  }
  .cwbe-wrapper .canvas-panel { min-height: 520px; }
  .cwbe-wrapper .canvas-wrap { padding: 8px; }
  .cwbe-wrapper #editorCanvas { max-width: 540px; max-height: 540px; }
}

/* 1.8.2: GIF/video frame import */
.cwbe-wrapper .video-import-options {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cwbe-wrapper .video-import-options h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--pink);
}

/* Front-end staff edit shortcuts shown only to authorized logged-in users. */
.cwbe-wrapper .cwbe-admin-edit {
  border-color: var(--pink);
  color: #4a4f57;
  background: #fff;
  font-weight: 800;
}
.cwbe-wrapper .cwbe-admin-edit:hover,
.cwbe-wrapper .cwbe-admin-edit:focus {
  background: #f4f5f7;
  color: #343940;
}

/* Paid access, registration, and app offers — v2.0.0 */
.cwbe-access-gate,
.cwbe-register-card,
.cwbe-app-offer {
  max-width: 760px;
  margin: 30px auto;
  padding: 28px;
  background: #fff;
  border: 2px solid #ef4f91;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(0,0,0,.08);
  color: #111;
  text-align: center;
}
.cwbe-access-gate h2,
.cwbe-register-card h2,
.cwbe-app-offer h2 { margin-top: 0; }
.cwbe-access-primary,
.cwbe-access-secondary,
.cwbe-app-button {
  display: inline-block;
  margin: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.cwbe-access-primary,
.cwbe-app-button {
  border: 0;
  background: #ef4f91;
  color: #fff !important;
}
.cwbe-access-secondary {
  border: 2px solid #ef4f91;
  color: #111 !important;
  background: #fff;
}
.cwbe-register-card { text-align: left; }
.cwbe-register-card label {
  display: block;
  margin: 14px 0;
  font-weight: 700;
}
.cwbe-register-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #bbb;
  border-radius: 10px;
  box-sizing: border-box;
}
.cwbe-app-offer { margin-top: 22px; }
.cwbe-app-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 640px) {
  .cwbe-access-gate,
  .cwbe-register-card,
  .cwbe-app-offer { margin: 16px 8px; padding: 20px 16px; }
  .cwbe-access-primary,
  .cwbe-access-secondary,
  .cwbe-app-button { display: block; text-align: center; }
}

/* 2.2.0 base media library and audio export */
.cwbe-base-library{margin:18px auto 0;padding:18px;border:1px solid var(--pink-soft);border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(17,17,17,.06)}
.cwbe-base-library--top{margin:12px auto 16px;max-width:1180px;position:relative;z-index:2}
.cwbe-base-library-head h2{margin:0 0 4px;font-size:22px;color:#111}
.cwbe-base-library-head p{margin:0 0 14px;color:#666}
.cwbe-base-media-slider{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}
.cwbe-base-media-card{flex:0 0 180px;scroll-snap-align:start;text-align:left;border:2px solid var(--pink-soft);border-radius:16px;background:#fff;padding:10px;cursor:pointer;transition:.18s ease;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.cwbe-base-media-card:hover,.cwbe-base-media-card:focus{border-color:var(--pink);transform:translateY(-2px);outline:none}
.cwbe-base-media-card.is-selected{border-color:var(--pink);background:var(--pink-soft)}
.cwbe-base-media-card.is-loading{opacity:.58;pointer-events:none}
.cwbe-base-media-thumb{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#f7f7f8}
.cwbe-base-media-thumb img,.cwbe-base-media-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.cwbe-video-badge{position:absolute;right:7px;bottom:7px;padding:4px 7px;border-radius:999px;background:var(--pink);color:#fff;font-size:11px;font-weight:700}
.cwbe-base-media-title{display:block;margin-top:9px;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwbe-base-media-kind{display:block;font-size:12px;color:var(--pink-dark);margin-top:2px}
.audio-file-btn{display:block;text-align:center}
#audioFileLabel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666}
@media (max-width:782px){.cwbe-base-library{margin:12px 0 0;padding:14px}.cwbe-base-media-card{flex-basis:150px}}

.cwbe-edge-smoothing { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pink-soft); }
.cwbe-edge-smoothing label { display: block; font-weight: 700; }
.cwbe-edge-smoothing input[type="range"] { width: 100%; margin-top: 6px; }


/* Client color schemes v1.1.0 */
.cwbe-wrapper.cwbe-scheme-blue { --pink:#2f7de1; --pink-dark:#1f5fb5; --pink-soft:#e7f1ff; --app-bg:#edf4fb; }
.cwbe-wrapper.cwbe-scheme-pink { --pink:#ef5c97; --pink-dark:#e64586; --pink-soft:#ffe6ef; --app-bg:#efeff2; }

/* Client Setup > Accent Color has priority over every older preset. */
.cwbe-wrapper[style*="--pink:"] .btn.primary,
.cwbe-wrapper[style*="--pink:"] .cwbe-mini-logo,
.cwbe-wrapper[style*="--pink:"] .cwbe-admin-edit,
.cwbe-wrapper[style*="--pink:"] .cwbe-share-btn,
.cwbe-wrapper[style*="--pink:"] .cwbe-video-badge { background:var(--pink)!important;border-color:var(--pink)!important }
.cwbe-wrapper[style*="--pink:"] .cwbe-base-media-card:hover,
.cwbe-wrapper[style*="--pink:"] .cwbe-base-media-card:focus,
.cwbe-wrapper[style*="--pink:"] .cwbe-base-media-card.is-selected { border-color:var(--pink)!important }
.cwbe-wrapper.cwbe-scheme-purple { --pink:#8b5cf6; --pink-dark:#6d3fd8; --pink-soft:#f0e9ff; --app-bg:#f3f0f8; }
.cwbe-wrapper.cwbe-scheme-orange { --pink:#f28c28; --pink-dark:#cf6d0f; --pink-soft:#fff0df; --app-bg:#f7f1eb; }
.cwbe-wrapper.cwbe-scheme-black-gray { --pink:#2b2b2b; --pink-dark:#111111; --pink-soft:#e7e7e7; --app-bg:#d9d9dc; --panel:#efefef; --card:#ffffff; --line:#b9b9bd; --text:#111111; --muted:#55555c; }
.cwbe-wrapper.cwbe-scheme-rainbow {
  --pink:#ef3f8f; --pink-dark:#7628d8; --pink-soft:#fff0b8; --app-bg:#eef6ff;
}
.cwbe-wrapper.cwbe-scheme-rainbow .btn.primary,
.cwbe-wrapper.cwbe-scheme-rainbow .tool.active {
  background:linear-gradient(90deg,#e53935 0%,#f9c80e 18%,#f28c28 36%,#32a852 54%,#2f7de1 72%,#8b5cf6 88%,#ef3f8f 100%);
  border-color:transparent;
}
.cwbe-wrapper.cwbe-scheme-rainbow h1,
.cwbe-wrapper.cwbe-scheme-rainbow .panel h2,
.cwbe-wrapper.cwbe-scheme-rainbow .panel-toggle {
  background:linear-gradient(90deg,#e53935,#f9c80e,#f28c28,#32a852,#2f7de1,#8b5cf6,#ef3f8f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}


/* Client palette cleanup v1.1.3 */
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .topbar,
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .footer-note,
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .canvas-panel {
  border-color: var(--line);
}
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .cwbe-mini-logo,
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .cwbe-admin-edit,
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .cwbe-share-btn {
  border-color: var(--pink);
  color: var(--pink-dark);
}
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .btn:hover,
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) .tool:hover {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pink) 20%, transparent);
}
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) input:focus,
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) select:focus,
.cwbe-wrapper:not(.cwbe-scheme-pink):not(.cwbe-scheme-rainbow) textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-soft);
}

/* Client Setup is the single accent source. It intentionally neutralizes the
   legacy rainbow gradient, which otherwise leaves green headings behind. */
.cwbe-wrapper.cwbe-has-client-accent {
  --pink: var(--cwbe-client-accent) !important;
  --pink-dark: var(--cwbe-client-accent) !important;
  --pink-soft: var(--cwbe-client-accent-soft) !important;
}
.cwbe-wrapper.cwbe-has-client-accent h1,
.cwbe-wrapper.cwbe-has-client-accent .panel h2,
.cwbe-wrapper.cwbe-has-client-accent .video-import-options h3,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-base-library-head h2,
.cwbe-wrapper.cwbe-has-client-accent .panel-toggle,
.cwbe-wrapper.cwbe-has-client-accent .panel-chevron {
  background: none !important;
  color: var(--pink) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--pink) !important;
}
.cwbe-wrapper.cwbe-has-client-accent .btn.primary,
.cwbe-wrapper.cwbe-has-client-accent .tool.active,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-video-badge {
  background: var(--pink) !important;
  background-image: none !important;
  border-color: var(--pink) !important;
  color: #fff !important;
}
.cwbe-wrapper.cwbe-has-client-accent .cwbe-mini-logo,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-admin-edit,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-share-btn,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-base-media-card:hover,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-base-media-card:focus,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-base-media-card.is-selected {
  border-color: var(--pink) !important;
}
.cwbe-wrapper.cwbe-has-client-accent .cwbe-base-media-card.is-selected,
.cwbe-wrapper.cwbe-has-client-accent .panel-toggle:hover { background: var(--pink-soft) !important; }

/* Keep staff shortcuts and ordinary editor headings readable with every
   Client Setup accent, including very light colors. */
.cwbe-wrapper .cwbe-admin-edit,
.cwbe-wrapper[style*="--pink:"] .cwbe-admin-edit,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-admin-edit {
  background: #fff !important;
  color: #4a4f57 !important;
  -webkit-text-fill-color: #4a4f57 !important;
  border-color: var(--pink) !important;
}
.cwbe-wrapper .cwbe-admin-edit:hover,
.cwbe-wrapper .cwbe-admin-edit:focus {
  background: #f4f5f7 !important;
  color: #343940 !important;
  -webkit-text-fill-color: #343940 !important;
}
.cwbe-wrapper .cwbe-share-btn,
.cwbe-wrapper[style*="--pink:"] .cwbe-share-btn,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-share-btn {
  background: #fff !important;
  color: #4a4f57 !important;
  -webkit-text-fill-color: #4a4f57 !important;
  border-color: var(--pink) !important;
}
.cwbe-wrapper .cwbe-share-btn:hover,
.cwbe-wrapper .cwbe-share-btn:focus {
  background: #f4f5f7 !important;
  color: #343940 !important;
  -webkit-text-fill-color: #343940 !important;
}
.cwbe-wrapper.cwbe-has-client-accent h1,
.cwbe-wrapper.cwbe-has-client-accent .panel h2,
.cwbe-wrapper.cwbe-has-client-accent .video-import-options h3,
.cwbe-wrapper.cwbe-has-client-accent .cwbe-base-library-head h2,
.cwbe-wrapper.cwbe-has-client-accent .panel-toggle,
.cwbe-wrapper.cwbe-has-client-accent .panel-chevron {
  color: #4a4f57 !important;
  -webkit-text-fill-color: #4a4f57 !important;
}


/* 1.1.8 image overlay across all frames */
.cwbe-wrapper .cwbe-overlay-all {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cwbe-wrapper .cwbe-overlay-all .btn { width: 100%; text-align: center; }
.cwbe-wrapper #overlayAllControls { margin-top: 10px; }


/* v1.2.0: compact web layout and visible circular undo/redo controls */
.cwbe-wrapper .cwbe-history-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--pink-dark);
  font-size: 23px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.cwbe-wrapper .cwbe-history-btn:hover,
.cwbe-wrapper .cwbe-history-btn:focus {
  background: var(--pink-soft);
  border-color: var(--pink);
  outline: none;
}
.cwbe-wrapper .app-grid {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.cwbe-wrapper .panel {
  padding: 11px;
}
.cwbe-wrapper .btn,
.cwbe-wrapper .tool {
  padding: 8px 10px;
  font-size: 12px;
}
.cwbe-wrapper .small-btn {
  padding: 7px 9px;
  font-size: 11px;
}
.cwbe-wrapper .tool-group,
.cwbe-wrapper .zoom-group {
  gap: 5px;
}
.cwbe-wrapper .thumb img {
  height: 72px;
}
@media (min-width: 1280px) and (max-width: 1550px) {
  .cwbe-wrapper .app-grid {
    grid-template-columns: 200px minmax(430px, 560px) 230px;
    max-width: 1020px;
    gap: 10px;
    padding: 10px;
  }
  .cwbe-wrapper #editorCanvas {
    max-width: 500px;
    max-height: 500px;
  }
}


/* v1.2.1 GIF positioning preview */
.cwbe-wrapper #editorCanvas { touch-action: none; }
.cwbe-wrapper #applyOverlayGifBtn { margin-top: 6px; }


/* v1.2.5 compact right tool accordion */
@media (min-width: 1280px) {
  .cwbe-wrapper .app-grid {
    grid-template-columns: 210px minmax(470px, 600px) 210px;
    max-width: 1060px;
    gap: 9px;
    padding: 9px;
  }
  .cwbe-wrapper .right-panel {
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    gap: 7px;
    padding-right: 2px;
    scrollbar-width: thin;
  }
  .cwbe-wrapper .right-panel .panel {
    border-radius: 13px;
    box-shadow: 0 5px 14px rgba(21,21,27,.05);
  }
  .cwbe-wrapper .right-panel .panel-toggle {
    padding: 9px 10px;
    min-height: 38px;
    font-size: 13px;
    line-height: 1.2;
  }
  .cwbe-wrapper .right-panel .panel-chevron {
    font-size: 17px;
  }
  .cwbe-wrapper .right-panel .panel-content {
    padding: 7px 9px 10px;
  }
  .cwbe-wrapper .right-panel label,
  .cwbe-wrapper .right-panel .small,
  .cwbe-wrapper .right-panel p {
    font-size: 11px;
    line-height: 1.32;
  }
  .cwbe-wrapper .right-panel input[type="range"] {
    margin: 2px 0 5px;
  }
  .cwbe-wrapper .right-panel .field-grid.two,
  .cwbe-wrapper .right-panel .field-grid {
    gap: 6px;
  }
  .cwbe-wrapper .right-panel .btn,
  .cwbe-wrapper .right-panel .small-btn {
    padding: 6px 7px;
    min-height: 30px;
    font-size: 10.5px;
    line-height: 1.2;
  }
  .cwbe-wrapper .right-panel hr {
    margin: 7px 0 !important;
  }
  .cwbe-wrapper #editorCanvas {
    max-width: 535px;
    max-height: 535px;
  }
}
@media (min-width: 1280px) and (max-height: 800px) {
  .cwbe-wrapper .right-panel {
    top: 6px;
    max-height: calc(100vh - 12px);
  }
  .cwbe-wrapper .right-panel .panel-toggle {
    padding: 7px 9px;
    min-height: 34px;
  }
  .cwbe-wrapper .right-panel .panel-content {
    padding: 6px 8px 8px;
  }
}


/* v1.2.7 keep the active accordion section near the top and reduce push-down */
@media (min-width: 1280px) {
  .cwbe-wrapper .right-panel {
    gap: 4px;
    scroll-padding-top: 4px;
  }
  .cwbe-wrapper .right-panel .panel-toggle {
    padding: 7px 9px;
    min-height: 32px;
    line-height: 1.05;
  }
  .cwbe-wrapper .right-panel .panel-content {
    padding: 3px 8px 6px;
  }
  .cwbe-wrapper .right-panel .panel-content > :first-child {
    margin-top: 0 !important;
  }
  .cwbe-wrapper .right-panel .panel-content > :last-child {
    margin-bottom: 0 !important;
  }
  .cwbe-wrapper .right-panel .panel-content p,
  .cwbe-wrapper .right-panel .panel-content .small {
    margin-top: 3px;
    margin-bottom: 5px;
  }
  .cwbe-wrapper .right-panel .stack {
    gap: 5px;
  }
  .cwbe-wrapper .right-panel .field-grid.two,
  .cwbe-wrapper .right-panel .field-grid {
    gap: 4px;
  }
}


/* v1.2.8 compact expanded tool controls and keep bottom actions reachable */
@media (min-width: 1280px) {
  .cwbe-wrapper .right-panel {
    max-height: calc(100vh - 16px);
    padding-bottom: 6px;
  }
  .cwbe-wrapper .right-panel .panel.is-open .panel-content,
  .cwbe-wrapper .right-panel .panel[open] .panel-content {
    max-height: calc(100vh - 165px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 10px;
  }
  .cwbe-wrapper .right-panel input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .cwbe-wrapper .right-panel select,
  .cwbe-wrapper .right-panel textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 32px;
    height: 32px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.15;
  }
  .cwbe-wrapper .right-panel textarea {
    min-height: 58px;
    height: 58px;
    resize: vertical;
  }
  .cwbe-wrapper .right-panel input[type="color"] {
    width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 3px;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .cwbe-wrapper .right-panel input[type="range"] {
    width: 100%;
    max-width: 100%;
    height: 18px;
    margin: 0 0 3px;
  }
  .cwbe-wrapper .right-panel label {
    margin: 0;
    gap: 2px;
  }
  .cwbe-wrapper .right-panel .field-grid.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .cwbe-wrapper .right-panel .inline-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .cwbe-wrapper .right-panel .inline-stack .btn,
  .cwbe-wrapper .right-panel .inline-stack .small-btn {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .cwbe-wrapper .right-panel .btn,
  .cwbe-wrapper .right-panel .small-btn,
  .cwbe-wrapper .right-panel button {
    max-width: 100%;
    min-height: 28px;
    padding: 5px 7px;
    border-radius: 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .cwbe-wrapper .right-panel .panel-content .stack {
    margin-bottom: 2px;
  }
  .cwbe-wrapper .right-panel .panel-content > hr:last-of-type {
    margin-bottom: 4px !important;
  }
}
@media (min-width: 1280px) and (max-height: 780px) {
  .cwbe-wrapper .right-panel .panel.is-open .panel-content,
  .cwbe-wrapper .right-panel .panel[open] .panel-content {
    max-height: calc(100vh - 135px);
  }
  .cwbe-wrapper .right-panel input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .cwbe-wrapper .right-panel select {
    min-height: 29px;
    height: 29px;
    padding: 4px 7px;
  }
  .cwbe-wrapper .right-panel input[type="color"] {
    height: 31px;
    min-height: 31px;
  }
  .cwbe-wrapper .right-panel .btn,
  .cwbe-wrapper .right-panel .small-btn,
  .cwbe-wrapper .right-panel button {
    min-height: 26px;
    padding: 4px 6px;
  }
}


/* v1.2.9: give long Text and Project sections more usable bottom space */
@media (min-width: 1280px) {
  .cwbe-wrapper .right-panel {
    max-height: calc(100vh - 4px);
    padding-bottom: 18px;
    scroll-padding-bottom: 36px;
  }
  .cwbe-wrapper .right-panel .panel.is-open .panel-content,
  .cwbe-wrapper .right-panel .panel[open] .panel-content {
    max-height: calc(100vh - 96px);
    padding-bottom: 34px;
    scroll-padding-bottom: 30px;
  }
  .cwbe-wrapper .right-panel .panel.is-open:last-child .panel-content,
  .cwbe-wrapper .right-panel .panel[open]:last-child .panel-content {
    padding-bottom: 42px;
  }
  .cwbe-wrapper .right-panel .panel-content .stack:last-child,
  .cwbe-wrapper .right-panel .panel-content > :last-child {
    margin-bottom: 14px !important;
  }
}
@media (min-width: 1280px) and (max-height: 780px) {
  .cwbe-wrapper .right-panel .panel.is-open .panel-content,
  .cwbe-wrapper .right-panel .panel[open] .panel-content {
    max-height: calc(100vh - 78px);
    padding-bottom: 38px;
  }
}


/* v1.3.0 toolbar crop/wand icons and single-scroll right menu */
.cwbe-wrapper .cwbe-icon-tool {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 7px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--pink-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.cwbe-wrapper .cwbe-icon-tool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.cwbe-wrapper .cwbe-icon-tool.active,
.cwbe-wrapper .cwbe-icon-tool:hover,
.cwbe-wrapper .cwbe-icon-tool:focus {
  background: var(--pink-soft);
  border-color: var(--pink);
  outline: none;
}
@media (min-width: 1280px) {
  .cwbe-wrapper .right-panel {
    max-height: calc(100vh - 18px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 90px !important;
    scroll-padding-bottom: 90px !important;
  }
  .cwbe-wrapper .right-panel .panel.is-open .panel-content,
  .cwbe-wrapper .right-panel .panel[open] .panel-content {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 18px !important;
  }
  .cwbe-wrapper .right-panel::after {
    content: '';
    display: block;
    height: 70px;
    flex: 0 0 70px;
  }
}


/* v1.3.1: let opened tool sections breathe and use normal page scrolling */
@media (min-width: 1280px) {
  .cwbe-wrapper .right-panel {
    position: relative !important;
    top: auto !important;
    align-self: start !important;
    max-height: none !important;
    min-height: 760px;
    overflow: visible !important;
    padding-bottom: 120px !important;
    gap: 7px !important;
  }
  .cwbe-wrapper .right-panel .panel.is-open .panel-content,
  .cwbe-wrapper .right-panel .panel[open] .panel-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 10px 10px 28px !important;
  }
  .cwbe-wrapper .right-panel .panel.is-open .panel-content p,
  .cwbe-wrapper .right-panel .panel[open] .panel-content p,
  .cwbe-wrapper .right-panel .panel.is-open .panel-content .small,
  .cwbe-wrapper .right-panel .panel[open] .panel-content .small {
    line-height: 1.45 !important;
    margin-top: 7px !important;
    margin-bottom: 9px !important;
  }
  .cwbe-wrapper .right-panel .panel.is-open .field-grid,
  .cwbe-wrapper .right-panel .panel[open] .field-grid,
  .cwbe-wrapper .right-panel .panel.is-open .stack,
  .cwbe-wrapper .right-panel .panel[open] .stack {
    gap: 8px !important;
  }
  .cwbe-wrapper .right-panel::after {
    height: 100px !important;
    flex-basis: 100px !important;
  }
}

/* v1.5.6 individual imported-media removal */
.cwbe-wrapper .cwbe-thumb-remove {
  position:absolute;
  z-index:4;
  top:6px;
  right:6px;
  width:26px;
  height:26px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(179,45,46,.55);
  background:rgba(255,255,255,.96);
  color:#b32d2e;
  font-size:19px;
  font-weight:800;
  line-height:22px;
  text-align:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.cwbe-wrapper .cwbe-thumb-remove:hover,
.cwbe-wrapper .cwbe-thumb-remove:focus {
  background:#b32d2e;
  color:#fff;
  outline:2px solid #fff;
}


/* v1.7.3: compact popup settings for the main editor. */
body.cwbe-editor-tools-modal-open{overflow:hidden!important}
.cwbe-wrapper .app-grid{grid-template-columns:minmax(0,1fr)!important;max-width:1180px;margin-inline:auto}
.cwbe-wrapper .editor-panel{grid-column:1;min-width:0}
.cwbe-wrapper .cwbe-editor-tool-tabs,
.cwbe-wrapper .cwbe-editor-modal-tabs{
  display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;overflow-y:hidden;
  padding:9px 12px;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;cursor:grab
}
.cwbe-wrapper .cwbe-editor-tool-tabs{max-width:1180px;margin:10px auto 0;background:rgba(255,255,255,.9);border:1px solid rgba(120,95,255,.16);border-radius:18px;box-shadow:0 8px 24px rgba(31,27,55,.08)}
.cwbe-wrapper .cwbe-editor-tool-tabs::-webkit-scrollbar,
.cwbe-wrapper .cwbe-editor-modal-tabs::-webkit-scrollbar{display:none}
.cwbe-wrapper .cwbe-editor-tool-tabs button,
.cwbe-wrapper .cwbe-editor-modal-tabs button{
  flex:0 0 auto;min-height:40px;padding:9px 15px;border:1px solid color-mix(in srgb,var(--pink) 32%,#d8d7df);
  border-radius:999px;background:#fff;color:#24222b;font:inherit;font-size:.84rem;font-weight:850;line-height:1;white-space:nowrap;cursor:pointer;scroll-snap-align:start
}
.cwbe-wrapper .cwbe-editor-tool-tabs button.is-active,
.cwbe-wrapper .cwbe-editor-modal-tabs button.is-active{border-color:var(--pink);background:var(--pink);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--pink) 26%,transparent)}
.cwbe-editor-tools-modal{position:fixed;z-index:100320;inset:0;display:grid;place-items:center;padding:22px}
.cwbe-editor-tools-modal[hidden]{display:none!important}
.cwbe-editor-tools-backdrop{position:absolute;z-index:0;inset:0;width:100%;height:100%;border:0;background:rgba(13,10,20,.6);backdrop-filter:blur(5px);cursor:default}
.cwbe-editor-tools-dialog{position:relative;z-index:1;width:min(1080px,calc(100vw - 44px));max-height:min(830px,calc(100dvh - 44px));display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;background:rgba(247,247,250,.98);border:1px solid rgba(255,255,255,.72);border-radius:24px;box-shadow:0 28px 100px rgba(0,0,0,.38)}
.cwbe-editor-tools-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px 10px}
.cwbe-editor-tools-head h2{margin:0;font-size:1.25rem}
.cwbe-editor-tools-kicker{margin:0 0 3px;color:#72717a;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.cwbe-editor-tools-close{min-height:40px;padding:8px 13px;border:1px solid var(--pink);border-radius:999px;background:#fff;color:#26232d;font:inherit;font-weight:900;cursor:pointer}
.cwbe-wrapper .cwbe-editor-modal-tabs{margin:0 16px 10px;padding:5px;background:#efeff4;border:1px solid #dfdfe7;border-radius:15px}
.cwbe-editor-tool-columns{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:14px;padding:4px 18px 18px;overflow-y:auto;overscroll-behavior:contain}
.cwbe-editor-tool-columns>.sidebar{display:contents!important;width:auto!important;max-width:none!important}
.cwbe-editor-tool-columns>.sidebar>.panel{min-width:0;margin:0!important;border:1px solid #e0e0e7!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 22px rgba(0,0,0,.07)!important}
.cwbe-editor-tool-columns>.sidebar>.panel[hidden]{display:none!important}
.cwbe-editor-tool-columns .panel-toggle{min-height:50px}
.cwbe-editor-tool-columns .panel-content{padding-top:2px}
.cwbe-editor-tool-columns .panel-content .small{line-height:1.45}

@media(max-width:760px){
  .cwbe-wrapper .cwbe-editor-tool-tabs{margin:7px 8px 0;border-radius:14px;padding:6px}
  .cwbe-wrapper .cwbe-editor-tool-tabs button{min-height:36px;padding:8px 12px;font-size:.76rem}
  .cwbe-editor-tools-modal{align-items:end;padding:0}
  .cwbe-editor-tools-dialog{width:100%;max-height:90dvh;border-radius:22px 22px 0 0}
  .cwbe-editor-tools-head{padding:12px 12px 8px}
  .cwbe-editor-tools-head h2{font-size:1.08rem}
  .cwbe-editor-tools-close{min-height:38px;padding:7px 10px;font-size:.76rem}
  .cwbe-wrapper .cwbe-editor-modal-tabs{margin:0 8px 8px;padding:4px}
  .cwbe-wrapper .cwbe-editor-modal-tabs button{min-height:36px;padding:8px 12px;font-size:.74rem}
  .cwbe-editor-tool-columns{grid-template-columns:minmax(0,1fr);gap:10px;padding:2px 10px calc(14px + env(safe-area-inset-bottom))}
}


/* 1.8.7 — mobile Creator Profile avatar and editor stacking above PWA install controls. */
.cwbe-wrapper {
  position: relative;
  z-index: 20;
}
.cwbe-mobile-profile-shortcut {
  display: none;
}
@media (max-width: 800px) {
  .cwbe-mobile-profile-shortcut {
    position: fixed;
    z-index: 100120;
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 2px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    text-decoration: none;
  }
  .cwbe-mobile-profile-shortcut:hover,
  .cwbe-mobile-profile-shortcut:focus-visible {
    border-color: var(--cwbe-accent, #5b35ff);
    outline: 3px solid rgba(91,53,255,.25);
    outline-offset: 2px;
  }
  .cwbe-mobile-profile-avatar {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover;
  }
}


/* v1.8.25 — keep editor popup controls visible and prevent bottom clipping. */
.cwbe-editor-tools-modal{
  z-index:2147482500!important;
}
.cwbe-editor-tools-dialog{
  height:min(830px,calc(100dvh - 44px));
  max-height:min(830px,calc(100dvh - 44px));
}
.cwbe-editor-tools-head{
  position:relative;
  z-index:8;
  flex:0 0 auto;
  background:rgba(247,247,250,.985);
  border-bottom:1px solid rgba(220,220,230,.75);
}
.cwbe-editor-tools-close{
  position:relative;
  z-index:9;
  flex:0 0 auto;
}
.cwbe-wrapper .cwbe-editor-modal-tabs{
  position:relative;
  z-index:7;
  background:#efeff4;
}
.cwbe-editor-tool-columns{
  padding-bottom:64px!important;
  scroll-padding-top:10px;
  scroll-padding-bottom:72px;
}
.cwbe-editor-tool-columns .panel:last-child .panel-content{
  padding-bottom:24px;
}
@media(max-width:760px){
  .cwbe-editor-tools-dialog{
    height:90dvh;
    max-height:90dvh;
  }
  .cwbe-editor-tool-columns{
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
    scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom));
  }
}


/* IMAGE_EDITOR_OVERLAY_FIX — keep desktop editor settings below sticky site/admin headers. */
@media (min-width:761px){
  .cwbe-editor-tools-modal{
    --cwbe-editor-overlay-top:0px;
    align-items:start!important;
    justify-items:center!important;
    padding:calc(var(--cwbe-editor-overlay-top) + 18px) 22px 22px!important;
  }
  .cwbe-editor-tools-dialog{
    height:min(830px,calc(100dvh - var(--cwbe-editor-overlay-top) - 40px))!important;
    max-height:min(830px,calc(100dvh - var(--cwbe-editor-overlay-top) - 40px))!important;
  }
  .cwbe-editor-tools-head{position:sticky!important;top:0!important;}
}


/* v1.8.48 — hosted/internal Image Editor tools use the full viewport on desktop.
   The modal intentionally covers the site header; Close restores the page. */
@media (min-width:761px){
  .cwbe-editor-tools-modal{
    --cwbe-editor-overlay-top:0px!important;
    inset:0!important;
    z-index:2147483646!important;
    display:grid!important;
    place-items:stretch!important;
    padding:0!important;
    background:#f7f7fa!important;
  }
  .cwbe-editor-tools-modal[hidden]{display:none!important}
  .cwbe-editor-tools-backdrop{
    inset:0!important;
    background:rgba(13,10,20,.72)!important;
    backdrop-filter:blur(7px)!important;
  }
  .cwbe-editor-tools-dialog{
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
  }
  .cwbe-editor-tools-head{
    min-height:82px!important;
    padding:16px 28px 12px!important;
  }
  .cwbe-editor-tools-head h2{font-size:1.45rem!important}
  .cwbe-editor-tools-close{
    min-height:46px!important;
    padding:10px 20px!important;
    font-size:1rem!important;
  }
  .cwbe-wrapper .cwbe-editor-modal-tabs{
    margin:0 28px 12px!important;
    padding:7px!important;
    gap:10px!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }
  .cwbe-wrapper .cwbe-editor-modal-tabs button{
    min-height:44px!important;
    padding:10px 18px!important;
    font-size:.9rem!important;
  }
  .cwbe-editor-tool-columns{
    grid-template-columns:repeat(2,minmax(360px,1fr))!important;
    gap:18px!important;
    padding:6px 28px 32px!important;
  }
}


/* v1.8.49 — true body-level fullscreen Image Editor overlay for hosted/internal sites. */
@media (min-width:761px){
  body > .cwbe-editor-tools-modal{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    z-index:2147483647!important;
    display:block!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:#f7f7fa!important;
  }
  body > .cwbe-editor-tools-modal[hidden]{display:none!important}
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-backdrop{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    background:rgba(13,10,20,.74)!important;
    backdrop-filter:blur(8px)!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-dialog{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    overflow:hidden!important;
    background:#f7f7fa!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-head{
    position:relative!important;
    top:auto!important;
    min-height:76px!important;
    padding:14px 28px 10px!important;
    background:#f7f7fa!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-modal-tabs{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
    margin:0 28px 10px!important;
    padding:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    background:#efeff4!important;
    border:1px solid #dfdfe7!important;
    border-radius:15px!important;
    scrollbar-width:none!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-modal-tabs::-webkit-scrollbar{display:none!important}
  body > .cwbe-editor-tools-modal .cwbe-editor-modal-tabs button{
    flex:0 0 auto!important;
    min-height:44px!important;
    padding:10px 18px!important;
    border:1px solid color-mix(in srgb,var(--pink,#5b35ff) 32%,#d8d7df)!important;
    border-radius:999px!important;
    background:#fff!important;
    color:#24222b!important;
    font:inherit!important;
    font-size:.9rem!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-modal-tabs button.is-active{
    border-color:var(--pink,#5b35ff)!important;
    background:var(--pink,#5b35ff)!important;
    color:#fff!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tool-columns{
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(360px,1fr))!important;
    align-content:start!important;
    gap:18px!important;
    padding:6px 28px 48px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tool-columns > .sidebar{
    display:contents!important;
    width:auto!important;
    max-width:none!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tool-columns .panel{
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tool-columns .panel-content{
    max-height:none!important;
    overflow:visible!important;
  }
  body.cwbe-editor-tools-modal-open #wpadminbar,
  body.cwbe-editor-tools-modal-open header,
  body.cwbe-editor-tools-modal-open .site-header,
  body.cwbe-editor-tools-modal-open .cw-site-header{
    visibility:hidden!important;
  }
  body.cwbe-editor-tools-modal-open > .cwbe-editor-tools-modal{
    visibility:visible!important;
  }
  body.cwbe-editor-tools-modal-open > .cwbe-editor-tools-modal *{
    visibility:visible!important;
  }
}

/* v1.8.51 — restore readable fullscreen editor controls and compact media strip. */
@media (min-width:761px){
  body > .cwbe-editor-tools-modal{
    font-size:16px!important;
    line-height:1.45!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-head small,
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-head .eyebrow{
    font-size:.78rem!important;
    letter-spacing:.08em!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-head h2{
    font-size:1.45rem!important;
    line-height:1.15!important;
  }
  body > .cwbe-editor-tools-modal .panel,
  body > .cwbe-editor-tools-modal .panel-content,
  body > .cwbe-editor-tools-modal label,
  body > .cwbe-editor-tools-modal button,
  body > .cwbe-editor-tools-modal input,
  body > .cwbe-editor-tools-modal select,
  body > .cwbe-editor-tools-modal textarea{
    font-size:1rem!important;
  }
  body > .cwbe-editor-tools-modal .panel-toggle{
    min-height:48px!important;
    padding:12px 14px!important;
    font-size:1rem!important;
    font-weight:800!important;
  }
  body > .cwbe-editor-tools-modal .panel-content{
    padding:16px!important;
  }
  .cwbe-base-library--top{
    max-width:1180px!important;
    padding:12px 14px!important;
    margin:8px auto 12px!important;
  }
  .cwbe-base-library-head h2{font-size:1.1rem!important}
  .cwbe-base-library-head p{font-size:.9rem!important;margin-bottom:8px!important}
  .cwbe-base-media-slider{
    gap:10px!important;
    max-height:176px!important;
    padding:2px 2px 8px!important;
    align-items:stretch!important;
  }
  .cwbe-base-media-card{
    flex:0 0 150px!important;
    width:150px!important;
    min-height:0!important;
    padding:7px!important;
    border-radius:13px!important;
  }
  .cwbe-base-media-thumb{
    height:96px!important;
    aspect-ratio:auto!important;
    border-radius:9px!important;
  }
  .cwbe-base-media-title{
    margin-top:6px!important;
    font-size:.78rem!important;
  }
  .cwbe-base-media-kind{font-size:.7rem!important}
}


/* v1.8.52 — centered live preview in the fullscreen Image Editor header. */
@media (min-width:761px){
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-head{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:18px!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-heading{justify-self:start!important;}
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-preview-wrap{
    justify-self:center!important;
    width:64px!important;
    height:64px!important;
    padding:3px!important;
    border:1px solid rgba(91,53,255,.42)!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(32,24,64,.12)!important;
    overflow:hidden!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-preview{
    display:block!important;
    width:58px!important;
    height:58px!important;
    border-radius:9px!important;
    background:#fff!important;
  }
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-close{justify-self:end!important;}
}
@media (max-width:760px){.cwbe-editor-tools-preview-wrap{display:none!important;}}


/* v1.8.55 hosted/internal: add media controls to fullscreen Image Editor header. */
body > .cwbe-editor-tools-modal .cwbe-editor-tools-head{
  grid-template-columns:minmax(220px,1fr) auto auto auto!important;
  gap:16px!important;
}
body > .cwbe-editor-tools-modal .cwbe-editor-tools-imports{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
body > .cwbe-editor-tools-modal .cwbe-editor-tools-imports button{
  min-height:42px!important;
  padding:8px 14px!important;
  border:1px solid var(--pink,#6548ff)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#282334!important;
  font-weight:850!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
body > .cwbe-editor-tools-modal .cwbe-editor-tools-imports button:hover,
body > .cwbe-editor-tools-modal .cwbe-editor-tools-imports button:focus-visible{
  background:var(--pink,#6548ff)!important;
  color:#fff!important;
}
@media(max-width:1050px){
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-head{grid-template-columns:minmax(190px,1fr) auto auto!important;}
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-preview-wrap{display:none!important;}
}
@media(max-width:760px){
  body > .cwbe-editor-tools-modal .cwbe-editor-tools-imports{display:none!important;}
}


/* v1.8.49+ — editor hint for black-and-white coloring pages. */
.cwbe-wrapper .cwbe-coloring-page-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(91, 61, 245, 0.18);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(31, 19, 67, 0.08);
}
.cwbe-wrapper .cwbe-coloring-page-notice__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cwbe-wrapper .cwbe-coloring-page-notice__copy strong {
  font-size: 18px;
  line-height: 1.2;
  color: var(--text, #19151f);
}
.cwbe-wrapper .cwbe-coloring-page-notice__copy span {
  color: var(--muted, #5f5870);
  font-size: 14px;
  line-height: 1.45;
}
.cwbe-wrapper .cwbe-coloring-page-notice__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 820px) {
  .cwbe-wrapper .cwbe-coloring-page-notice {
    flex-direction: column;
    align-items: flex-start;
  }
  .cwbe-wrapper .cwbe-coloring-page-notice__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.cwbe-wrapper .cwbe-gif-quality-note{margin-top:-2px!important;padding:10px 12px;border-radius:12px;background:rgba(91,61,245,.06)}