@innovastudio/contentbuilder 1.5.219 → 1.5.221

package/public/contentbuilder/contentbuilder.css

@@ -11,8 +11,9 @@ body {
   --cb-content-preview: #fff;
   --cb-text: rgba(0,0,0,.92);
   --cb-text-2: rgba(0,0,0,.55);
-  --cb-text-3: rgba(0,0,0,.4);
-  --cb-text-4: rgba(0,0,0,.28);
+  --cb-text-3: rgba(0,0,0,.56);
+  --cb-text-4: rgba(0,0,0,.45);
+  --cb-mark-faint: rgba(0,0,0,.28);
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --cb-line: rgba(0,0,0,.09);
@@ -32,8 +33,11 @@ body {
   --cb-accent-fill-2: rgba(44,111,219,.2);
   --cb-accent-fill-3: rgba(0,0,0,0.05);
   --cb-accent-line: rgba(44,111,219,.45);
+  --cb-accent-ink: color-mix(in srgb, var(--cb-accent) 80%, #000);
   --cb-on-accent: #fff;
   --focus-outline-color: var(--cb-accent, #3e93f7);
+  --cb-tool-focus-ring: #111;
+  --cb-tool-focus-ring-edge: #fff;
   --cb-field-bg: #f6f6f6;
   --cb-field-border: none;
   --cb-field-radius: 6px;
@@ -53,7 +57,7 @@ body {
   --cb-field-gap: 14px;
   --cb-row-gap: 8px;
   --cb-control-accent: var(--cb-accent);
-  --cb-switch-track: #ccc;
+  --cb-switch-track: #8a8a8a;
   --cb-switch-handle: #fff;
   --cb-slider-track: rgba(0,0,0,.1);
   --cb-slider-thumb: var(--cb-control-accent);
@@ -70,7 +74,7 @@ body {
   --cb-modal-color: #000;
   --cb-modal-border: 1px solid #dadada;
   --cb-modal-shadow: 6px 14px 20px 0px rgba(95,95,95,.11);
-  --cb-modal-bar-close: #828282;
+  --cb-modal-bar-close: rgba(0,0,0,.55);
   --cb-chat-bubble-bg: #171717;
   --cb-chat-bubble-text: #ffffff;
   --cb-tool-surface: rgba(255,255,255,.97);
@@ -112,7 +116,8 @@ body.dark, body.colored, body.colored-dark {
   --cb-text: rgba(255,255,255,.92);
   --cb-text-2: rgba(255,255,255,.6);
   --cb-text-3: rgba(255,255,255,.45);
-  --cb-text-4: rgba(255,255,255,.32);
+  --cb-text-4: rgba(255,255,255,.45);
+  --cb-mark-faint: rgba(255,255,255,.32);
   --cb-line: rgba(255,255,255,.14);
   --cb-line-2: rgba(255,255,255,.08);
   --cb-line-4: rgba(255,255,255,.22);
@@ -136,6 +141,7 @@ body.dark, body.colored, body.colored-dark {
   --cb-accent-fill-2: rgba(91,157,255,.28);
   --cb-accent-fill-3: rgba(255, 255, 255, 0.09);
   --cb-accent-line: rgba(91,157,255,.55);
+  --cb-accent-ink: var(--cb-accent);
   --cb-float-surface: rgba(38,38,40,.96);
   --cb-shadow: -1px 5px 14px 0px rgba(0,0,0,.55);
   --cb-shadow-2: 3px 11px 24px 0px rgba(0,0,0,.45);
@@ -367,7 +373,15 @@ button:focus-visible {
   transform-origin: top left;
 }
 
-[data-cb-ui] .snippet-item {
+.is-design-list:focus-visible {
+  outline: none;
+}
+.is-design-list:focus-visible .snippet-item.is-active-snippet {
+  outline: var(--cb-field-focus-outline);
+  outline-offset: 2px;
+}
+
+.snippet-item {
   cursor: move;
   position: relative;
   overflow: hidden;
@@ -377,33 +391,33 @@ button:focus-visible {
   border-radius: 2px;
   transition: box-shadow 0.2s ease;
 }
-[data-cb-ui] .snippet-item img {
+.snippet-item img {
   display: block;
   width: 100%;
   box-sizing: border-box;
 }
-[data-cb-ui] .snippet-item .is-overlay {
+.snippet-item .is-overlay {
   position: absolute;
   inset: 0;
 }
-[data-cb-ui] .snippet-item:hover {
+.snippet-item:hover {
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
 }
-[data-cb-ui] .snippet-item:focus-visible {
+.snippet-item:focus-visible {
   outline: var(--cb-field-focus-outline);
   outline-offset: 2px;
 }
-[data-cb-ui] .snippet-item.sortable-chosen {
+.snippet-item.sortable-chosen {
   height: auto;
 }
-[data-cb-ui] .snippet-item.sortable-chosen * {
+.snippet-item.sortable-chosen * {
   visibility: visible;
 }
-[data-cb-ui] .snippet-item.sortable-chosen.sortable-drag * {
+.snippet-item.sortable-chosen.sortable-drag * {
   visibility: hidden;
   transition: none !important;
 }
-[data-cb-ui] .snippet-item.sortable-drag {
+.snippet-item.sortable-drag {
   outline: none !important;
 }
 
@@ -1114,7 +1128,7 @@ button:focus-visible {
   height: 100%;
   position: absolute;
   top: 0;
-  border-top: transparent 20px solid;
+  border-top: transparent 24px solid;
   box-sizing: border-box;
   margin-top: 0;
 }
@@ -1123,14 +1137,14 @@ button:focus-visible {
 }
 [data-cb-ui] .is-modal.snippetwindow .is-modal-bar {
   line-height: 30px;
-  height: 20px;
+  height: 24px;
   background-color: transparent;
   transition: none !important;
 }
 [data-cb-ui] .is-modal.snippetwindow .is-modal-bar .is-modal-close {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
   font-size: 10px;
   top: 0px;
 }
@@ -1139,7 +1153,7 @@ button:focus-visible {
 }
 [data-cb-ui] .is-modal.snippetwindow > div:not(.is-draggable) {
   width: 100%;
-  margin-top: 20px;
+  margin-top: 24px;
 }
 [data-cb-ui] .is-modal.snippetwindow #divSnippetHandle {
   display: none !important;
@@ -1653,7 +1667,7 @@ button:focus-visible {
   height: 16px;
 }
 [data-cb-ui] .is-modal.columnsettings .is-tab-content .cb-cs-chip-clear, [data-cb-ui] .is-modal.rowsettings .is-tab-content .cb-cs-chip-clear, [data-cb-ui] .is-modal.viewconfig .is-tab-content .cb-cs-chip-clear {
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
 }
 [data-cb-ui] .is-modal.columnsettings .is-tab-content .image-src, [data-cb-ui] .is-modal.rowsettings .is-tab-content .image-src, [data-cb-ui] .is-modal.viewconfig .is-tab-content .image-src {
   display: flex;
@@ -2666,6 +2680,21 @@ button:focus-visible {
   outline-offset: var(--cb-field-focus-offset);
   box-shadow: none;
 }
+[data-cb-ui] input[type=text]::placeholder,
+[data-cb-ui] input[type=number]::placeholder,
+[data-cb-ui] input[type=email]::placeholder,
+[data-cb-ui] input[type=url]::placeholder,
+[data-cb-ui] input[type=tel]::placeholder,
+[data-cb-ui] input[type=search]::placeholder,
+[data-cb-ui] input[type=password]::placeholder,
+[data-cb-ui] input[type=date]::placeholder,
+[data-cb-ui] input[type=time]::placeholder,
+[data-cb-ui] input[type=datetime-local]::placeholder,
+[data-cb-ui] input[type=month]::placeholder,
+[data-cb-ui] input[type=week]::placeholder {
+  color: var(--cb-text-3);
+  opacity: 1;
+}
 [data-cb-ui] input[type=text] [type=checkbox], [data-cb-ui] input[type=text] [type=radio],
 [data-cb-ui] input[type=number] [type=checkbox],
 [data-cb-ui] input[type=number] [type=radio],
@@ -2993,29 +3022,30 @@ button:focus-visible {
 [data-cb-ui] .is-tabs-more li:hover, [data-cb-ui] .is-tabs-more li:focus, [data-cb-ui] .is-tabs-more li.active {
   background: var(--cb-fill-hover);
 }
-[data-cb-ui] .snippet-cathead {
+.snippet-cathead {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
 }
-[data-cb-ui] .inp-snippets.custom-select {
+.snippet-cathead .inp-snippets.custom-select {
   width: 100%;
 }
-[data-cb-ui] .inp-snippets.custom-select .select-styled {
+.snippet-cathead .inp-snippets.custom-select .select-styled {
   background: transparent;
   border: none;
   border-bottom: 1px solid var(--cb-line);
   border-radius: 0;
   padding: 0 10px 0 16px;
 }
-[data-cb-ui] .inp-snippets.custom-select .select-styled:hover {
+.snippet-cathead .inp-snippets.custom-select .select-styled:hover {
   background: var(--cb-fill);
 }
-[data-cb-ui] .inp-snippets.custom-select .select-options {
+.snippet-cathead .inp-snippets.custom-select .select-options {
   max-height: 320px;
 }
+
 [data-cb-ui] #divSnippetList {
   right: -230px;
   width: 230px;
@@ -3053,7 +3083,7 @@ button:focus-visible {
   right: -41px;
   box-shadow: none !important;
 }
-[data-cb-ui] .is-design-list {
+.is-design-list {
   height: 100%;
   margin: 0;
   padding: 0 0 20px !important;
@@ -3066,35 +3096,36 @@ button:focus-visible {
   scrollbar-width: thin;
   scrollbar-color: var(--cb-line) transparent;
 }
-[data-cb-ui] .is-design-list::-webkit-scrollbar {
+.is-design-list::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
-[data-cb-ui] .is-design-list::-webkit-scrollbar-track {
+.is-design-list::-webkit-scrollbar-track {
   background: transparent;
 }
-[data-cb-ui] .is-design-list::-webkit-scrollbar-thumb {
+.is-design-list::-webkit-scrollbar-thumb {
   background: var(--cb-line);
   border-radius: 6px;
   border: 3px solid transparent;
   background-clip: padding-box;
 }
-[data-cb-ui] .is-design-list::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+.is-design-list::-webkit-scrollbar-thumb:hover {
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
-[data-cb-ui] .is-design-list .snippet-item {
+.is-design-list .snippet-item {
   width: 178px;
   margin: 22px 22px 0;
   display: inline-block;
 }
-[data-cb-ui] .is-design-list .snippet-item.hide {
+.is-design-list .snippet-item.hide {
   display: none;
   height: 0;
   opacity: 0;
   overflow: hidden;
   transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
 }
+
 [data-cb-ui] .is-selectbox {
   height: 40px;
   box-sizing: border-box;
@@ -3607,7 +3638,7 @@ button:focus-visible {
   border-radius: 1px;
   transition: all ease 0.3s;
 }
-.is-tool button:focus {
+.is-tool button:focus:not(:focus-visible) {
   outline: none !important;
   outline-offset: 0;
 }
@@ -3645,6 +3676,45 @@ button:focus-visible {
   display: flex;
 }
 
+.is-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.is-modal [tabindex]:focus-visible,
+.is-modal input:focus-visible,
+.is-modal select:focus-visible,
+.is-modal textarea:focus-visible {
+  outline: var(--cb-field-focus-outline);
+  outline-offset: 1px;
+}
+
+.is-pop input:focus-visible,
+.is-pop select:focus-visible,
+.is-pop textarea:focus-visible,
+.is-rte-pop input:focus-visible,
+.is-rte-pop select:focus-visible,
+.is-rte-pop textarea:focus-visible {
+  outline: var(--cb-field-focus-outline);
+  outline-offset: 1px;
+}
+
+.is-section-tool button:focus-visible,
+.is-box-tool button:focus-visible,
+.is-rowadd-tool button:focus-visible,
+.is-tool button:focus-visible,
+.is-tool [role=button]:focus-visible,
+.is-rte-tool button:focus-visible,
+.is-elementrte-tool button:focus-visible {
+  outline: 2px solid var(--cb-tool-focus-ring);
+  outline-offset: -4px;
+  box-shadow: inset 0 0 0 2px var(--cb-tool-focus-ring-edge);
+}
+
 .row-active .is-col-tool {
   display: flex;
   width: auto;
@@ -3979,14 +4049,23 @@ button:focus-visible {
   display: block;
   margin-top: 5px;
   font-size: 13px;
-  opacity: 0.5;
-  color: var(--cb-text);
+  color: var(--cb-text-3);
 }
 
 .is-builder .row-active.row-add-initial {
   outline: none;
 }
 
+.grid-sortable > * {
+  -webkit-touch-callout: none;
+  touch-action: none;
+}
+
+.grid-sortable img,
+.grid-sortable video {
+  -webkit-user-drag: none;
+}
+
 .is-tool.is-row-tool .row-grideditor {
   display: none;
 }
@@ -4654,7 +4733,8 @@ div[data-html] {
   padding: 0 2px 4px !important;
 }
 
-[data-cb-ui] .custom-select {
+[data-cb-ui] .custom-select,
+.inp-snippets.custom-select {
   --cs-height: 44px;
   position: relative;
   display: inline-block;
@@ -4662,7 +4742,8 @@ div[data-html] {
   height: var(--cs-height);
   font-size: 14px;
 }
-[data-cb-ui] .custom-select .select-styled {
+[data-cb-ui] .custom-select .select-styled,
+.inp-snippets.custom-select .select-styled {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4680,39 +4761,47 @@ div[data-html] {
   transition: background 0.15s ease, border-color 0.15s ease;
   outline: none;
 }
-[data-cb-ui] .custom-select .select-styled:hover {
+[data-cb-ui] .custom-select .select-styled:hover,
+.inp-snippets.custom-select .select-styled:hover {
   background: var(--cb-fill-hover);
 }
-[data-cb-ui] .custom-select .select-styled > span:first-child {
+[data-cb-ui] .custom-select .select-styled > span:first-child,
+.inp-snippets.custom-select .select-styled > span:first-child {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-cb-ui] .custom-select .select-styled > span:first-child img {
+[data-cb-ui] .custom-select .select-styled > span:first-child img,
+.inp-snippets.custom-select .select-styled > span:first-child img {
   height: 24px;
   vertical-align: middle;
 }
-[data-cb-ui] .custom-select .select-styled > span:nth-child(2) {
+[data-cb-ui] .custom-select .select-styled > span:nth-child(2),
+.inp-snippets.custom-select .select-styled > span:nth-child(2) {
   flex: none;
   display: flex;
   align-items: center;
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
   transition: transform 0.2s ease;
 }
-[data-cb-ui] .custom-select .select-styled svg {
+[data-cb-ui] .custom-select .select-styled svg,
+.inp-snippets.custom-select .select-styled svg {
   width: 16px;
   height: 16px;
 }
-[data-cb-ui] .custom-select .select-styled:focus-visible {
+[data-cb-ui] .custom-select .select-styled:focus-visible,
+.inp-snippets.custom-select .select-styled:focus-visible {
   outline: var(--cb-field-focus-outline);
   outline-offset: -1px;
 }
-[data-cb-ui] .custom-select .select-styled[aria-expanded=true] > span:nth-child(2) {
+[data-cb-ui] .custom-select .select-styled[aria-expanded=true] > span:nth-child(2),
+.inp-snippets.custom-select .select-styled[aria-expanded=true] > span:nth-child(2) {
   transform: rotate(-180deg);
 }
-[data-cb-ui] .custom-select input {
+[data-cb-ui] .custom-select input,
+.inp-snippets.custom-select input {
   display: none;
   position: absolute;
   top: calc(var(--cs-height) + 6px);
@@ -4731,13 +4820,16 @@ div[data-html] {
   border-radius: 7px 7px 0 0;
   outline: none;
 }
-[data-cb-ui] .custom-select input::placeholder {
+[data-cb-ui] .custom-select input::placeholder,
+.inp-snippets.custom-select input::placeholder {
   color: var(--cb-text-3);
 }
-[data-cb-ui] .custom-select input:focus {
+[data-cb-ui] .custom-select input:focus,
+.inp-snippets.custom-select input:focus {
   outline: none;
 }
-[data-cb-ui] .custom-select .select-options {
+[data-cb-ui] .custom-select .select-options,
+.inp-snippets.custom-select .select-options {
   display: none;
   position: absolute;
   top: calc(var(--cs-height) - 1px);
@@ -4755,16 +4847,19 @@ div[data-html] {
   border-radius: 8px;
   box-shadow: var(--cb-shadow-2);
 }
-[data-cb-ui] .custom-select.has-search .select-options {
+[data-cb-ui] .custom-select.has-search .select-options,
+.inp-snippets.custom-select.has-search .select-options {
   top: calc(var(--cs-height) + 44px);
   padding-top: 0;
   border-top: none;
   border-radius: 0 0 8px 8px;
 }
-[data-cb-ui] .custom-select .select-options.active {
+[data-cb-ui] .custom-select .select-options.active,
+.inp-snippets.custom-select .select-options.active {
   display: block;
 }
-[data-cb-ui] .custom-select .select-options li {
+[data-cb-ui] .custom-select .select-options li,
+.inp-snippets.custom-select .select-options li {
   display: flex;
   align-items: center;
   min-height: 34px;
@@ -4774,15 +4869,19 @@ div[data-html] {
   cursor: pointer;
   white-space: nowrap;
 }
-[data-cb-ui] .custom-select .select-options li img {
+[data-cb-ui] .custom-select .select-options li img,
+.inp-snippets.custom-select .select-options li img {
   margin: 6px 0;
   height: 24px;
 }
-[data-cb-ui] .custom-select .select-options li:hover {
+[data-cb-ui] .custom-select .select-options li:hover,
+.inp-snippets.custom-select .select-options li:hover {
   background: var(--cb-fill);
 }
 [data-cb-ui] .custom-select .select-options li.selected,
-[data-cb-ui] .custom-select .select-options li[aria-selected=true] {
+[data-cb-ui] .custom-select .select-options li[aria-selected=true],
+.inp-snippets.custom-select .select-options li.selected,
+.inp-snippets.custom-select .select-options li[aria-selected=true] {
   background: var(--cb-fill-active);
 }
 
@@ -6631,6 +6730,8 @@ iframe.wait-autoplay {
    * source order, so the editor's own light/dark flip drives the whole
    * image editor and the theme attribute is never set. --- */
   /* Focus ring: the editor's own focus token (Kanvas outlines with its ink). */
+  /* The empty-stage message sits on the grey stage, not on the panel,
+     where the secondary ink is too light to read (4.5:1). */
   /* Take back what ContentBuilder's generic button/input/select rules
    * set. Bare elements here score below every .kanvas-* component rule,
    * so the library keeps ownership of anything it styles itself. */
@@ -7546,7 +7647,7 @@ iframe.wait-autoplay {
   --kanvas-ink: var(--cb-text);
   --kanvas-ink-2: var(--cb-text-2);
   --kanvas-ink-3: var(--cb-text-3);
-  --kanvas-ink-4: var(--cb-text-4);
+  --kanvas-ink-4: var(--cb-mark-faint);
   --kanvas-stage: var(--cb-backdrop);
   --kanvas-sel: var(--cb-text);
   --kanvas-sel-contrast: var(--cb-modal-bg);
@@ -7561,6 +7662,9 @@ iframe.wait-autoplay {
   outline: var(--cb-field-focus-outline);
   outline-offset: 2px;
 }
+[data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-editor .kanvas-empty p {
+  color: var(--cb-label-color);
+}
 [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host button, [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host input, [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host select {
   position: static;
   width: auto;
@@ -7652,7 +7756,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-pane::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools {
@@ -7673,7 +7777,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 [data-cb-ui] .is-modal.imageedit-kanvas .cb-ike-host .kanvas-tools::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 @media (max-width: 760px) {
@@ -7825,10 +7929,10 @@ iframe.wait-autoplay {
 [data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button]:hover {
   background: var(--cb-rte-fill-hover);
 }
-[data-cb-ui] .is-rte-tool div[role=button]:focus,
-[data-cb-ui] .is-elementrte-tool div[role=button]:focus,
-[data-cb-ui] .is-rte-pop.rte-more-options div[role=button]:focus,
-[data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button]:focus {
+[data-cb-ui] .is-rte-tool div[role=button]:focus:not(:focus-visible),
+[data-cb-ui] .is-elementrte-tool div[role=button]:focus:not(:focus-visible),
+[data-cb-ui] .is-rte-pop.rte-more-options div[role=button]:focus:not(:focus-visible),
+[data-cb-ui] .is-rte-pop.elementrte-more-options div[role=button]:focus:not(:focus-visible) {
   outline: none;
 }
 [data-cb-ui] .is-rte-tool div[role=button] svg:not([fill]),
@@ -7873,10 +7977,10 @@ iframe.wait-autoplay {
 [data-cb-ui] .is-rte-pop.elementrte-more-options button:hover {
   background: var(--cb-rte-fill-hover);
 }
-[data-cb-ui] .is-rte-tool button:focus,
-[data-cb-ui] .is-elementrte-tool button:focus,
-[data-cb-ui] .is-rte-pop.rte-more-options button:focus,
-[data-cb-ui] .is-rte-pop.elementrte-more-options button:focus {
+[data-cb-ui] .is-rte-tool button:focus:not(:focus-visible),
+[data-cb-ui] .is-elementrte-tool button:focus:not(:focus-visible),
+[data-cb-ui] .is-rte-pop.rte-more-options button:focus:not(:focus-visible),
+[data-cb-ui] .is-rte-pop.elementrte-more-options button:focus:not(:focus-visible) {
   outline: none;
 }
 [data-cb-ui] .is-rte-tool button svg:not([fill]),
@@ -9359,7 +9463,7 @@ iframe.wait-autoplay {
   font-weight: normal;
   outline: none;
 }
-[data-cb-ui] .pluginsettings {
+[data-cb-ui] .pluginsettings.pluginsettings {
   /* Spacing scale for the .cbx-* custom-editor helpers. Single source of
       truth — every helper derives its spacing from these, so plugin code
       never needs to set a margin/padding (and never should). */
@@ -9421,44 +9525,44 @@ iframe.wait-autoplay {
       so a couple of !important are needed only to neutralise those; all
       actual spacing comes from the shared tokens + gap (container owns it). */
 }
-[data-cb-ui] .pluginsettings select {
+[data-cb-ui] .pluginsettings.pluginsettings select {
   width: 100%;
   height: var(--cb-field-height);
 }
-[data-cb-ui] .pluginsettings input[type=text], [data-cb-ui] .pluginsettings input[type=number], [data-cb-ui] .pluginsettings input[type=email], [data-cb-ui] .pluginsettings input[type=url],
-[data-cb-ui] .pluginsettings input[type=tel], [data-cb-ui] .pluginsettings input[type=search], [data-cb-ui] .pluginsettings input[type=password], [data-cb-ui] .pluginsettings input[type=date],
-[data-cb-ui] .pluginsettings input[type=time], [data-cb-ui] .pluginsettings input[type=datetime-local], [data-cb-ui] .pluginsettings input[type=month], [data-cb-ui] .pluginsettings input[type=week] {
+[data-cb-ui] .pluginsettings.pluginsettings input[type=text], [data-cb-ui] .pluginsettings.pluginsettings input[type=number], [data-cb-ui] .pluginsettings.pluginsettings input[type=email], [data-cb-ui] .pluginsettings.pluginsettings input[type=url],
+[data-cb-ui] .pluginsettings.pluginsettings input[type=tel], [data-cb-ui] .pluginsettings.pluginsettings input[type=search], [data-cb-ui] .pluginsettings.pluginsettings input[type=password], [data-cb-ui] .pluginsettings.pluginsettings input[type=date],
+[data-cb-ui] .pluginsettings.pluginsettings input[type=time], [data-cb-ui] .pluginsettings.pluginsettings input[type=datetime-local], [data-cb-ui] .pluginsettings.pluginsettings input[type=month], [data-cb-ui] .pluginsettings.pluginsettings input[type=week] {
   font-size: 13px;
 }
-[data-cb-ui] .pluginsettings textarea {
+[data-cb-ui] .pluginsettings.pluginsettings textarea {
   width: 100%;
   line-height: 1.4;
   font-family: inherit;
   font-size: 14px;
   padding: 10px 13px;
 }
-[data-cb-ui] .pluginsettings button {
+[data-cb-ui] .pluginsettings.pluginsettings button {
   background-color: var(--cb-btn-bg);
   /* #efefef */
   width: 100%;
   height: var(--cb-btn-height);
   margin: 0px;
 }
-[data-cb-ui] .pluginsettings button svg {
+[data-cb-ui] .pluginsettings.pluginsettings button svg {
   width: 17px;
   height: 17px;
 }
-[data-cb-ui] .pluginsettings button.is-btn-color {
+[data-cb-ui] .pluginsettings.pluginsettings button.is-btn-color {
   width: 35px;
   height: 35px;
   padding: 0;
   margin: 4px 0 6px;
 }
-[data-cb-ui] .pluginsettings button:not(.is-btn-color):hover {
+[data-cb-ui] .pluginsettings.pluginsettings button:not(.is-btn-color):hover {
   background-color: var(--cb-btn-bg-hover);
   /* #ededed */
 }
-[data-cb-ui] .pluginsettings label {
+[data-cb-ui] .pluginsettings.pluginsettings label {
   font-size: 13px;
   font-weight: 500;
   /* Stack the label text above its control with the shared gap. This
@@ -9469,7 +9573,7 @@ iframe.wait-autoplay {
   gap: var(--cbx-label-gap);
   margin: 0;
 }
-[data-cb-ui] .pluginsettings label.checkbox {
+[data-cb-ui] .pluginsettings.pluginsettings label.checkbox {
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -9477,14 +9581,14 @@ iframe.wait-autoplay {
   gap: 3px;
   align-items: center;
 }
-[data-cb-ui] .pluginsettings .cbx-item {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-item {
   border: 1px solid var(--cb-item-border);
   border-radius: 6px;
   margin-bottom: var(--cbx-card-gap);
   background: var(--cb-item);
   overflow: hidden;
 }
-[data-cb-ui] .pluginsettings .cbx-item-head {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-item-head {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -9494,10 +9598,10 @@ iframe.wait-autoplay {
   background: var(--cb-item-head);
   cursor: pointer;
 }
-[data-cb-ui] .pluginsettings .cbx-item-head:hover {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-item-head:hover {
   background: var(--cb-item-head-hover);
 }
-[data-cb-ui] .pluginsettings .cbx-item-head .cbx-title {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-item-head .cbx-title {
   flex: 1;
   min-width: 0;
   font-size: 13px;
@@ -9506,49 +9610,49 @@ iframe.wait-autoplay {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-[data-cb-ui] .pluginsettings .cbx-item-body {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-item-body {
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: var(--cbx-space);
 }
-[data-cb-ui] .pluginsettings .cbx-field {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-field {
   display: flex;
   flex-direction: column;
 }
-[data-cb-ui] .pluginsettings .cbx-field > label {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-field > label {
   margin: 0 0 var(--cbx-label-gap);
 }
-[data-cb-ui] .pluginsettings .cbx-field:has(> .cbx-stack) > label {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-field:has(> .cbx-stack) > label {
   margin-bottom: var(--cbx-space);
 }
-[data-cb-ui] .pluginsettings .cbx-row {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-row {
   display: flex;
   gap: 8px;
   align-items: center;
 }
-[data-cb-ui] .pluginsettings .cbx-row > .cbx-grow {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-row > .cbx-grow {
   flex: 1;
   min-width: 0;
 }
-[data-cb-ui] .pluginsettings .cbx-stack {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-stack {
   display: flex;
   flex-direction: column;
   gap: var(--cbx-space);
 }
-[data-cb-ui] .pluginsettings .cbx-stack:has(> .cbx-item) {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-stack:has(> .cbx-item) {
   gap: var(--cbx-card-gap);
 }
-[data-cb-ui] .pluginsettings .cbx-stack:has(> .cbx-row):not(:has(> :not(.cbx-row))) {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-stack:has(> .cbx-row):not(:has(> :not(.cbx-row))) {
   gap: var(--cbx-row-gap);
 }
-[data-cb-ui] .pluginsettings .cbx-stack > .cbx-item {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-stack > .cbx-item {
   margin-bottom: 0;
 }
-[data-cb-ui] .pluginsettings .cbx-sortable-ghost {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-sortable-ghost {
   opacity: 0.4;
 }
-[data-cb-ui] .pluginsettings .cbx-drag {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-drag {
   flex: 0 0 auto;
   cursor: move;
   color: var(--cb-text-3);
@@ -9557,21 +9661,21 @@ iframe.wait-autoplay {
   line-height: 1;
   user-select: none;
 }
-[data-cb-ui] .pluginsettings .cbx-thumb {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-thumb {
   flex: 0 0 auto;
   width: 30px;
   height: 30px;
   object-fit: cover;
   border-radius: 4px;
 }
-[data-cb-ui] .pluginsettings .cbx-preview {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-preview {
   display: block;
   width: 100%;
   height: 160px;
   object-fit: cover;
   border-radius: 6px;
 }
-[data-cb-ui] .pluginsettings .cbx-iconpreview {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-iconpreview {
   flex: 0 0 auto;
   width: 64px;
   height: 64px;
@@ -9587,56 +9691,56 @@ iframe.wait-autoplay {
   /* stays white on a colored dialog */
   overflow: hidden;
 }
-[data-cb-ui] .pluginsettings .cbx-iconpreview svg, [data-cb-ui] .pluginsettings .cbx-iconpreview i {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-iconpreview svg, [data-cb-ui] .pluginsettings.pluginsettings .cbx-iconpreview i {
   max-width: 40px;
   max-height: 40px;
   font-size: 32px;
 }
-[data-cb-ui] .pluginsettings .cbx-iconbtn {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-iconbtn {
   flex: 0 0 auto;
   width: 34px;
   height: 34px;
   padding: 0;
   background: transparent;
 }
-[data-cb-ui] .pluginsettings .cbx-iconbtn svg {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-iconbtn svg {
   width: 16px;
   height: 16px;
 }
-[data-cb-ui] .pluginsettings .cbx-iconbtn.is-danger {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-iconbtn.is-danger {
   color: var(--cb-danger);
   /* was #dc2626; unifies with the editor delete red */
 }
-[data-cb-ui] .pluginsettings button.cbx-iconbtn:hover {
+[data-cb-ui] .pluginsettings.pluginsettings button.cbx-iconbtn:hover {
   background: var(--cb-fill-hover);
   /* rgba(0,0,0,.06) */
 }
-[data-cb-ui] .pluginsettings button.cbx-iconbtn.is-active {
+[data-cb-ui] .pluginsettings.pluginsettings button.cbx-iconbtn.is-active {
   background: var(--cb-fill-active);
   /* ~rgba(0,0,0,.09) */
 }
-[data-cb-ui] .pluginsettings .cbx-hint {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-hint {
   display: block;
   font-size: 12px;
   line-height: 1.5;
   color: var(--cb-text-3);
   /* #888 */
 }
-[data-cb-ui] .pluginsettings .cbx-rte-field {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-rte-field {
   display: flex;
   flex-direction: column;
   gap: var(--cbx-label-gap);
 }
-[data-cb-ui] .pluginsettings .cbx-rte-field > label {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-rte-field > label {
   margin: 0;
   /* gap owns spacing */
 }
-[data-cb-ui] .pluginsettings .cbx-rte-toolbar {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-rte-toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
 }
-[data-cb-ui] .pluginsettings .cbx-rte {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-rte {
   min-height: 160px;
   max-height: 300px;
   overflow-y: auto;
@@ -9649,71 +9753,64 @@ iframe.wait-autoplay {
   font-size: 14px;
   line-height: 1.6;
 }
-[data-cb-ui] .pluginsettings .cbx-rte.cbx-rte-code {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-rte.cbx-rte-code {
   font-family: var(--mono);
   font-size: 12px;
   white-space: pre-wrap;
 }
-[data-cb-ui] .pluginsettings .cbx-stack:has(> .cbx-removebtn) {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-stack:has(> .cbx-removebtn) {
   position: relative;
 }
-[data-cb-ui] .pluginsettings .cbx-removebtn {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-removebtn.cbx-removebtn {
   position: absolute;
   top: -12px;
   right: 0;
   width: auto;
   height: auto;
   padding: 6px;
-  background: none;
-  color: var(--cb-danger);
-  /* was #dc2626 */
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 13px;
-  line-height: 1;
+  gap: 2px;
 }
-[data-cb-ui] .pluginsettings .cbx-removebtn svg {
+[data-cb-ui] .pluginsettings.pluginsettings .cbx-removebtn.cbx-removebtn svg {
   width: 15px;
   height: 15px;
 }
-[data-cb-ui] .pluginsettings button.cbx-removebtn:hover {
+[data-cb-ui] .pluginsettings.pluginsettings button.cbx-removebtn:hover {
   background: var(--cb-danger-fill);
   /* was rgba(220,38,38,.09) */
 }
-[data-cb-ui] .pluginsettings .cb-settings-form {
+[data-cb-ui] .pluginsettings.pluginsettings .cb-settings-form {
   display: flex;
   flex-direction: column;
   gap: var(--cbx-space);
   /* flat form: gap between fields */
   margin-top: 0;
 }
-[data-cb-ui] .pluginsettings * ~ .cb-settings-form {
+[data-cb-ui] .pluginsettings.pluginsettings * ~ .cb-settings-form {
   margin-top: 20px;
 }
-[data-cb-ui] .pluginsettings .cb-settings-form:has(> .cb-settings-group) {
+[data-cb-ui] .pluginsettings.pluginsettings .cb-settings-form:has(> .cb-settings-group) {
   gap: 24px;
   /* grouped form: more air between sections */
 }
-[data-cb-ui] .pluginsettings .cb-settings-group {
+[data-cb-ui] .pluginsettings.pluginsettings .cb-settings-group {
   display: flex;
   flex-direction: column;
   gap: var(--cbx-space);
   /* group title + its fields */
 }
-[data-cb-ui] .pluginsettings .cb-settings-group-title {
+[data-cb-ui] .pluginsettings.pluginsettings .cb-settings-group-title {
   margin: 0;
   /* drop default <h3> margins; gap owns spacing */
 }
-[data-cb-ui] .pluginsettings .cb-settings-field {
+[data-cb-ui] .pluginsettings.pluginsettings .cb-settings-field {
   margin-bottom: 0 !important;
   /* kill uigenerator's inline 20px; gap owns spacing */
 }
-[data-cb-ui] .pluginsettings .cb-settings-field input[type=number] {
+[data-cb-ui] .pluginsettings.pluginsettings .cb-settings-field input[type=number] {
   width: 100% !important;
   /* kill inline 100px; match the full-width fields */
 }
-[data-cb-ui] .pluginsettings div[contenteditable=true]:focus-visible {
+[data-cb-ui] .pluginsettings.pluginsettings div[contenteditable=true]:focus-visible {
   outline: var(--focus-outline-color) 2px solid;
 }
 [data-cb-ui] .cb-colorbtn {
@@ -9842,7 +9939,7 @@ iframe.wait-autoplay {
 [data-cb-ui] .cb-chip button {
   border: 0;
   background: transparent;
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
   cursor: pointer;
   width: 17px;
   height: 17px;
@@ -9871,7 +9968,7 @@ iframe.wait-autoplay {
   padding: 0;
 }
 [data-cb-ui] .cb-chips input.cb-chipinput::placeholder {
-  color: var(--cb-text-4);
+  color: var(--cb-text-3);
   font-family: var(--sans);
 }
 [data-cb-ui] .cb-chips input.cb-chipinput:focus {
@@ -9943,8 +10040,8 @@ iframe.wait-autoplay {
   width: 6px;
   height: 6px;
   pointer-events: none;
-  border-right: 1.5px solid var(--cb-text-3);
-  border-bottom: 1.5px solid var(--cb-text-3);
+  border-right: 1.5px solid var(--cb-text-4);
+  border-bottom: 1.5px solid var(--cb-text-4);
   transform: translateY(-65%) rotate(45deg);
 }
 [data-cb-ui] .cb-tabs {
@@ -10209,7 +10306,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 [data-cb-ui] .is-modal.snippets .snippet-grid::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 [data-cb-ui] .is-modal.snippets .snippet-item {
@@ -10322,7 +10419,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 [data-cb-ui] #chatPanel .messages::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 [data-cb-ui] #chatPanel .message {
@@ -10460,7 +10557,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 [data-cb-ui] #chatPanel .input-area textarea::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 [data-cb-ui] #chatPanel .input-area textarea::placeholder {
@@ -10599,7 +10696,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 [data-cb-ui] #chatPanel .image-size-popover::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 [data-cb-ui] #chatPanel .size-options {
@@ -10780,7 +10877,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 [data-cb-ui] #settingsDialog .settings-content::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 [data-cb-ui] #settingsDialog .setting-group {
@@ -11098,7 +11195,7 @@ iframe.wait-autoplay {
 }
 [data-cb-ui] .cb-switchrow .lbl {
   font-size: 13px;
-  color: var(--cb-text);
+  color: var(--cb-label-color);
 }
 [data-cb-ui] .cb-switchrow .lbl small {
   display: block;
@@ -11332,7 +11429,7 @@ iframe.wait-autoplay {
   cursor: text;
 }
 [data-cb-ui] .cb-elmspacing .cb-sp-value::placeholder {
-  color: var(--cb-text-4);
+  color: var(--cb-text-3);
 }
 [data-cb-ui] .cb-elmspacing .cb-sp-pad.is-auto .cb-sp-value {
   color: var(--cb-text-3);
@@ -11367,7 +11464,7 @@ iframe.wait-autoplay {
   height: 30px;
   border-radius: 50%;
   background: transparent;
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11442,8 +11539,8 @@ iframe.wait-autoplay {
   width: 6px;
   height: 6px;
   pointer-events: none;
-  border-right: 1.5px solid var(--cb-text-3);
-  border-bottom: 1.5px solid var(--cb-text-3);
+  border-right: 1.5px solid var(--cb-text-4);
+  border-bottom: 1.5px solid var(--cb-text-4);
   transform: translateY(-65%) rotate(45deg);
 }
 [data-cb-ui] .cb-elmtext .cb-tx-toggles {
@@ -11669,7 +11766,7 @@ iframe.wait-autoplay {
   transition: background 0.12s;
 }
 [data-cb-ui] .cb-elmcorner .cb-cn-handle:hover:before {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
 }
 [data-cb-ui] .cb-elmcorner .cb-cn-handle.on:before {
   background: var(--cb-text-2);
@@ -11811,7 +11908,7 @@ iframe.wait-autoplay {
   height: 26px;
   border-radius: 6px;
   background: var(--cb-fill);
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -11879,7 +11976,7 @@ iframe.wait-autoplay {
   flex: none;
   border-radius: 5px;
   background: transparent;
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
   font-size: 11px;
   display: flex;
   align-items: center;
@@ -11961,8 +12058,8 @@ iframe.wait-autoplay {
   width: 6px;
   height: 6px;
   pointer-events: none;
-  border-right: 1.5px solid var(--cb-text-3);
-  border-bottom: 1.5px solid var(--cb-text-3);
+  border-right: 1.5px solid var(--cb-text-4);
+  border-bottom: 1.5px solid var(--cb-text-4);
   transform: translateY(-65%) rotate(45deg);
 }
 [data-cb-ui] .cb-elmlayout .cb-lo-reveal {
@@ -12069,7 +12166,7 @@ iframe.wait-autoplay {
   cursor: text;
 }
 [data-cb-ui] .cb-elmlayout .cb-lo-value::placeholder {
-  color: var(--cb-text-4);
+  color: var(--cb-text-3);
 }
 [data-cb-ui] .cb-elmlayout .cb-lo-box {
   grid-area: 2/2/3/3;
@@ -12200,7 +12297,7 @@ iframe.wait-autoplay {
   outline: none;
 }
 [data-cb-ui] .cb-elmmore #inpElmId::placeholder {
-  color: var(--cb-text-4);
+  color: var(--cb-text-3);
   font-family: var(--sans);
 }
 [data-cb-ui] .cb-dim:focus-within,
@@ -12350,33 +12447,33 @@ iframe.wait-autoplay {
   font-size: 12.5px;
 }
 
-.dark [data-cb-ui] .pluginsettings {
+.dark [data-cb-ui] .pluginsettings.pluginsettings {
   /* Dark overrides for the .cbx-* custom-editor helpers.
      (.cbx-item + .cbx-item-head are fully token-driven now via --cb-item*.) */
 }
-.dark [data-cb-ui] .pluginsettings button:not(.is-btn-color):hover {
+.dark [data-cb-ui] .pluginsettings.pluginsettings button:not(.is-btn-color):hover {
   background-color: rgba(113, 113, 113, 0.55);
 }
-.dark [data-cb-ui] .pluginsettings .cbx-iconbtn.is-danger {
+.dark [data-cb-ui] .pluginsettings.pluginsettings .cbx-iconbtn.is-danger {
   color: #fafafa;
 }
-.dark [data-cb-ui] .pluginsettings button.cbx-iconbtn:hover {
+.dark [data-cb-ui] .pluginsettings.pluginsettings button.cbx-iconbtn:hover {
   background: rgba(255, 255, 255, 0.07);
 }
-.dark [data-cb-ui] .pluginsettings button.cbx-iconbtn.is-active {
+.dark [data-cb-ui] .pluginsettings.pluginsettings button.cbx-iconbtn.is-active {
   background: rgba(255, 255, 255, 0.14);
 }
-.dark [data-cb-ui] .pluginsettings .cbx-hint {
+.dark [data-cb-ui] .pluginsettings.pluginsettings .cbx-hint {
   color: #9a9a9a;
 }
-.dark [data-cb-ui] .pluginsettings .cbx-rte {
+.dark [data-cb-ui] .pluginsettings.pluginsettings .cbx-rte {
   border-color: #6e6e6e;
   background: transparent;
 }
-.dark [data-cb-ui] .pluginsettings .cbx-removebtn {
+.dark [data-cb-ui] .pluginsettings.pluginsettings .cbx-removebtn {
   color: #f87171;
 }
-.dark [data-cb-ui] .pluginsettings button.cbx-removebtn:hover {
+.dark [data-cb-ui] .pluginsettings.pluginsettings button.cbx-removebtn:hover {
   background: rgba(248, 113, 113, 0.14);
 }
 
@@ -12489,10 +12586,10 @@ iframe.wait-autoplay {
   z-index: -1;
 }
 
-[data-cb-ui] .pluginsettings input[type=text], [data-cb-ui] .pluginsettings input[type=number], [data-cb-ui] .pluginsettings input[type=email], [data-cb-ui] .pluginsettings input[type=url],
-[data-cb-ui] .pluginsettings input[type=tel], [data-cb-ui] .pluginsettings input[type=search], [data-cb-ui] .pluginsettings input[type=password], [data-cb-ui] .pluginsettings input[type=date],
-[data-cb-ui] .pluginsettings input[type=time], [data-cb-ui] .pluginsettings input[type=datetime-local], [data-cb-ui] .pluginsettings input[type=month],
-[data-cb-ui] .pluginsettings input[type=week], [data-cb-ui] .pluginsettings select, [data-cb-ui] .pluginsettings textarea {
+[data-cb-ui] .pluginsettings.pluginsettings input[type=text], [data-cb-ui] .pluginsettings.pluginsettings input[type=number], [data-cb-ui] .pluginsettings.pluginsettings input[type=email], [data-cb-ui] .pluginsettings.pluginsettings input[type=url],
+[data-cb-ui] .pluginsettings.pluginsettings input[type=tel], [data-cb-ui] .pluginsettings.pluginsettings input[type=search], [data-cb-ui] .pluginsettings.pluginsettings input[type=password], [data-cb-ui] .pluginsettings.pluginsettings input[type=date],
+[data-cb-ui] .pluginsettings.pluginsettings input[type=time], [data-cb-ui] .pluginsettings.pluginsettings input[type=datetime-local], [data-cb-ui] .pluginsettings.pluginsettings input[type=month],
+[data-cb-ui] .pluginsettings.pluginsettings input[type=week], [data-cb-ui] .pluginsettings.pluginsettings select, [data-cb-ui] .pluginsettings.pluginsettings textarea {
   height: var(--cb-field-height);
   padding: 0 10px;
   box-sizing: border-box;
@@ -12504,19 +12601,19 @@ iframe.wait-autoplay {
   border-radius: var(--cb-field-radius);
   box-shadow: none;
 }
-[data-cb-ui] .pluginsettings textarea {
+[data-cb-ui] .pluginsettings.pluginsettings textarea {
   height: auto;
   min-height: 72px;
   padding: 8px 10px;
   line-height: 1.4;
 }
-[data-cb-ui] .pluginsettings input:focus, [data-cb-ui] .pluginsettings select:focus, [data-cb-ui] .pluginsettings textarea:focus {
+[data-cb-ui] .pluginsettings.pluginsettings input:focus, [data-cb-ui] .pluginsettings.pluginsettings select:focus, [data-cb-ui] .pluginsettings.pluginsettings textarea:focus {
   outline: var(--cb-field-focus-outline);
   outline-offset: var(--cb-field-focus-offset);
   border-color: var(--cb-line);
   box-shadow: none;
 }
-[data-cb-ui] .pluginsettings button:not(.is-btn-color) {
+[data-cb-ui] .pluginsettings.pluginsettings button:not(.is-btn-color) {
   height: var(--cb-field-height);
   background: var(--cb-btn-bg);
   color: var(--cb-text);
@@ -12525,13 +12622,13 @@ iframe.wait-autoplay {
   box-shadow: none;
   font-size: 12px;
 }
-[data-cb-ui] .pluginsettings button:not(.is-btn-color):hover {
+[data-cb-ui] .pluginsettings.pluginsettings button:not(.is-btn-color):hover {
   background: var(--cb-btn-bg-hover);
 }
-[data-cb-ui] .pluginsettings button:not(.is-btn-color):active {
+[data-cb-ui] .pluginsettings.pluginsettings button:not(.is-btn-color):active {
   background: var(--cb-btn-bg-active);
 }
-[data-cb-ui] .pluginsettings button:not(.is-btn-color):focus-visible {
+[data-cb-ui] .pluginsettings.pluginsettings button:not(.is-btn-color):focus-visible {
   outline: var(--cb-field-focus-outline);
   outline-offset: -2px;
 }
@@ -12589,7 +12686,7 @@ iframe.wait-autoplay {
   height: 15px;
   margin-top: -7px;
   pointer-events: none;
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
 }
 
 .cb-fontselect .cb-fs-caret svg {
@@ -12621,7 +12718,7 @@ iframe.wait-autoplay {
   border: none;
   border-radius: 50%;
   background: none;
-  color: var(--cb-text-3);
+  color: var(--cb-text-4);
   cursor: pointer;
 }
 
@@ -12681,7 +12778,7 @@ iframe.wait-autoplay {
   color: var(--cb-text-3);
 }
 
-.cb-fontselect .cb-fs-search:focus {
+.cb-fontselect .cb-fs-search:focus:not(:focus-visible) {
   outline: none !important;
 }
 
@@ -12706,7 +12803,7 @@ iframe.wait-autoplay {
   background-clip: padding-box;
 }
 .cb-fontselect .cb-fs-list::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
 
@@ -12948,6 +13045,15 @@ body.colored-dark .cb-fontselect.cb-fs-images .cb-fs-value img {
 .cb-symbols-list::-webkit-scrollbar-thumb:hover,
 .cbx-rte::-webkit-scrollbar-thumb:hover,
 .is-modal-controls::-webkit-scrollbar-thumb:hover {
-  background: var(--cb-text-3);
+  background: var(--cb-text-4);
   background-clip: padding-box;
 }
+
+.is-rowadd-tool button:focus-visible {
+  outline-offset: -1px;
+}
+
+.editableblocks .is-block:focus-visible {
+  outline: 2px solid var(--cb-tool-focus-ring);
+  outline-offset: 2px;
+}