.df-regex-section {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.df-regex-body {
  display: grid;
  gap: 14px;
  margin-top: 0;
}

.df-regex-top-controls {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

.df-regex-top-controls-disabled {
  grid-template-columns: auto;
}

.df-regex-enable-wrap {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.df-regex-mode-pill {
  display: flex;
  align-items: center;
}

.df-regex-mode-pill select {
  width: auto;
  min-width: 124px;
  padding-right: 32px;
}

.df-regex-top-action {
  display: flex;
  align-items: center;
  min-width: 0;
}

.df-regex-top-action .ghost-btn {
  white-space: nowrap;
}

.df-regex-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.df-regex-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.df-regex-rule-list {
  display: grid;
  gap: 12px;
}

.df-regex-rule {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.df-regex-inline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.df-regex-rule-action {
  min-width: 104px;
}

.df-regex-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.df-regex-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(21, 30, 56, 0.12);
  background: #f7f9fc;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}

.df-regex-chip input {
  width: auto;
  margin: 0;
}

.df-regex-count-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.df-regex-specific-values {
  width: 100%;
  min-height: 82px;
  resize: vertical;
}

.df-regex-output {
  display: grid;
  gap: 14px;
}

.df-regex-output textarea {
  min-height: 72px;
}

@media (max-width: 720px) {
  .df-regex-top-controls,
  .df-regex-inline-row,
  .df-regex-count-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .df-regex-rule-action,
  .df-regex-top-action {
    min-width: 0;
  }
}


.editor-pane[data-pane="regex"] {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.editor-pane[data-pane="regex"] .df-regex-body {
  gap: 12px;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls {
  margin-top: 0;
  margin-bottom: 2px;
}

.editor-pane[data-pane="regex"] .df-regex-top-divider {
  height: 1px;
  background: var(--line-soft, rgba(148, 163, 184, 0.22));
  width: 100%;
  margin: 0 0 2px;
}


.df-regex-top-controls .toggle-chip,
.df-regex-top-controls .ghost-btn,
.df-regex-top-controls select {
  min-height: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}

.df-regex-top-controls .ghost-btn,
.df-regex-top-controls select {
  border: 1px solid var(--df-border);
  background: rgba(255,255,255,.88);
}

.df-regex-top-controls .ghost-btn {
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.df-regex-top-controls .df-regex-mode-pill,
.df-regex-top-controls .df-regex-top-action,
.df-regex-top-controls .df-regex-enable-wrap {
  display: flex;
  align-items: center;
}

.df-regex-top-controls .df-regex-mode-pill select {
  width: auto;
  min-width: 124px;
  padding: 0 34px 0 15px;
}

.df-regex-top-controls .ghost-btn:hover,
.df-regex-top-controls select:hover {
  background: rgba(15,23,42,.05);
}

.df-regex-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.df-regex-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.df-regex-inline-row-two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.df-regex-inline-row-three {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.df-regex-count-row-single {
  grid-template-columns: minmax(0, 180px);
}

.df-regex-count-row-between {
  grid-template-columns: repeat(2, minmax(0, 180px));
}

.editor-pane[data-pane="regex"] .df-regex-toolbar {
  margin-bottom: 2px;
}



/* Regex top-row pill normalization */
.editor-pane[data-pane="regex"] .df-regex-top-controls{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled{
  display:flex !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls > *{
  flex:0 0 auto;
}

.editor-pane[data-pane="regex"] .df-regex-pill{
  height:38px;
  min-height:38px;
  border-radius:999px;
  border:1px solid var(--df-border);
  background:rgba(255,255,255,.88);
  color:rgba(15,23,42,.82);
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  box-sizing:border-box;
}

.editor-pane[data-pane="regex"] .df-regex-pill:hover{
  background:rgba(15,23,42,.05);
}

.editor-pane[data-pane="regex"] .df-regex-enable-wrap,
.editor-pane[data-pane="regex"] .df-regex-mode-pill,
.editor-pane[data-pane="regex"] .df-regex-top-action{
  display:flex;
  align-items:center;
}

.editor-pane[data-pane="regex"] .df-regex-enable-pill{
  cursor:pointer;
}

.editor-pane[data-pane="regex"] .df-regex-enable-pill input{
  width:14px;
  height:14px;
  margin:0;
  accent-color:#716aca;
  flex:0 0 auto;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell{
  position:relative;
  padding-right:34px;
  min-width:126px;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  height:100%;
  min-height:0;
  width:100%;
  min-width:0;
  padding:0 !important;
  padding-right:0 !important;
  margin:0;
  font:inherit;
  color:inherit;
  line-height:1;
  outline:none;
  cursor:pointer;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:6px;
  margin-top:-3px;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:10px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.editor-pane[data-pane="regex"] .df-regex-top-action .df-regex-pill-button{
  cursor:pointer;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls .toggle-chip,
.editor-pane[data-pane="regex"] .df-regex-top-controls .ghost-btn,
.editor-pane[data-pane="regex"] .df-regex-top-controls select{
  min-height:0 !important;
  height:auto !important;
  border-radius:0 !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}


/* Regex top row — reuse Basic/Floating Inspector pill system properly */
.editor-pane[data-pane="regex"] .df-regex-top-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled{
  display:flex !important;
}
.editor-pane[data-pane="regex"] .df-regex-top-controls > *{
  flex:0 0 auto !important;
}
.editor-pane[data-pane="regex"] .df-regex-top-chip,
.editor-pane[data-pane="regex"] .df-regex-top-controls .toggle-chip,
.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-shell{
  height:34px !important;
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  background:#fff !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--df-m-text) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  line-height:1 !important;
  vertical-align:middle !important;
}
.editor-pane[data-pane="regex"] .df-regex-enable-wrap,
.editor-pane[data-pane="regex"] .df-regex-mode-pill,
.editor-pane[data-pane="regex"] .df-regex-top-action{
  display:flex !important;
  align-items:center !important;
}
.editor-pane[data-pane="regex"] .df-regex-enable-pill{
  cursor:pointer;
}
.editor-pane[data-pane="regex"] .df-regex-enable-pill input{
  margin:0 !important;
  width:auto !important;
  flex:0 0 auto;
  accent-color:#6366f1 !important;
}
.editor-pane[data-pane="regex"] .df-regex-enable-pill span,
.editor-pane[data-pane="regex"] .df-regex-pill-button{
  white-space:nowrap !important;
}
.editor-pane[data-pane="regex"] .df-regex-mode-shell{
  position:relative !important;
  min-width:126px !important;
  justify-content:flex-start !important;
  padding-right:34px !important;
}
.editor-pane[data-pane="regex"] .df-regex-mode-shell select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  font:inherit !important;
  color:inherit !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.editor-pane[data-pane="regex"] .df-regex-mode-shell::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:10px;
  height:6px;
  margin-top:-3px;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:10px 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.editor-pane[data-pane="regex"] .df-regex-top-action .df-regex-pill-button{
  cursor:pointer !important;
}


/* Regex top row — Builder/Add Rule match Enable Regex pill width + height */
.editor-pane[data-pane="regex"] .df-regex-top-controls{
  --df-regex-top-pill-width: 132px;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell,
.editor-pane[data-pane="regex"] .df-regex-pill-button{
  width:var(--df-regex-top-pill-width) !important;
  min-width:var(--df-regex-top-pill-width) !important;
  max-width:var(--df-regex-top-pill-width) !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell{
  justify-content:center !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell select{
  text-align-last:center;
}

.editor-pane[data-pane="regex"] .df-regex-top-action .df-regex-pill-button{
  justify-content:center !important;
}


/* Regex top row — fix Builder single-pill shell outside editor-pane scope */
.df-regex-top-controls{
  --df-regex-top-pill-width: 132px;
}

.df-regex-top-controls .df-regex-mode-shell,
.df-regex-top-controls .df-regex-pill-button{
  width:var(--df-regex-top-pill-width) !important;
  min-width:var(--df-regex-top-pill-width) !important;
  max-width:var(--df-regex-top-pill-width) !important;
}

.df-regex-top-controls .df-regex-mode-shell{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 34px 0 12px !important;
  overflow:hidden !important;
}

.df-regex-top-controls .df-regex-mode-shell select,
.df-regex-top-controls .df-regex-mode-shell select:hover,
.df-regex-top-controls .df-regex-mode-shell select:focus{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  font:inherit !important;
  color:inherit !important;
  line-height:1 !important;
  text-align:center !important;
  text-align-last:center !important;
  cursor:pointer !important;
}

.df-regex-top-controls .df-regex-mode-shell select::-ms-expand{
  display:none;
}

.df-regex-top-controls .df-regex-top-action .df-regex-pill-button{
  justify-content:center !important;
}

/* Regex top row — center Builder text against arrow and align Remove with pill system */
.editor-pane[data-pane="regex"] .df-regex-mode-shell{
  padding-left:34px !important;
  padding-right:34px !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell::after{
  right:12px !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell select{
  text-align:center !important;
  text-align-last:center !important;
}

.editor-pane[data-pane="regex"] .df-regex-delete-pill,
.df-regex-delete-pill{
  min-height:34px !important;
  height:34px !important;
  border-radius:999px !important;
  border:1px solid var(--df-border) !important;
  background:rgba(255,255,255,.88) !important;
  color:rgba(15,23,42,.82) !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 15px !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-delete-pill:hover,
.df-regex-delete-pill:hover{
  background:rgba(15,23,42,.05) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions .df-regex-delete-pill,
.df-regex-toolbar-actions .df-regex-delete-pill{
  min-width:88px;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-regex-delete-pill,
.df-regex-rule-action .df-regex-delete-pill{
  width:100%;
}


/* Regex top row — force Builder to render as one single pill */
.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-pill,
.df-regex-top-controls .df-regex-mode-pill{
  display:flex !important;
  align-items:center !important;
  width:var(--df-regex-top-pill-width) !important;
  min-width:var(--df-regex-top-pill-width) !important;
  max-width:var(--df-regex-top-pill-width) !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-shell,
.df-regex-top-controls .df-regex-mode-shell{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:100% !important;
  padding:0 34px 0 18px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-shell::before,
.df-regex-top-controls .df-regex-mode-shell::before{
  content:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-shell select,
.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-shell select:hover,
.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-shell select:focus,
.df-regex-top-controls .df-regex-mode-shell select,
.df-regex-top-controls .df-regex-mode-shell select:hover,
.df-regex-top-controls .df-regex-mode-shell select:focus{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none !important;
  font:inherit !important;
  color:inherit !important;
  line-height:1 !important;
  text-align:center !important;
  text-align-last:center !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls .df-regex-mode-shell::after,
.df-regex-top-controls .df-regex-mode-shell::after{
  right:12px !important;
}


/* Regex top row — final Builder single-pill fix */
.editor-pane[data-pane="regex"] .df-regex-top-controls{
  --df-regex-top-pill-height: 34px;
  align-items: center !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls > *{
  min-width: 0;
}

.editor-pane[data-pane="regex"] .df-regex-enable-pill,
.editor-pane[data-pane="regex"] .df-regex-top-action .df-regex-pill-button,
.editor-pane[data-pane="regex"] .df-regex-mode-pill{
  height: var(--df-regex-top-pill-height) !important;
  min-height: var(--df-regex-top-pill-height) !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-pill{
  width: var(--df-regex-top-pill-width, 132px) !important;
  min-width: var(--df-regex-top-pill-width, 132px) !important;
  max-width: var(--df-regex-top-pill-width, 132px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: stretch !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell{
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 36px 0 16px !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell::before{
  content: none !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell::after{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 1.5px solid #475569 !important;
  border-bottom: 1.5px solid #475569 !important;
  transform: translateY(-62%) rotate(45deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-label{
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--df-m-text) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell select,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:hover,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:focus,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:focus-visible,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:active{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-image: none !important;
  color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell select::-ms-expand{
  display: none !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-action .df-regex-pill-button{
  width: var(--df-regex-top-pill-width, 132px) !important;
  min-width: var(--df-regex-top-pill-width, 132px) !important;
  max-width: var(--df-regex-top-pill-width, 132px) !important;
}

.editor-pane[data-pane="regex"] .df-regex-delete-pill{
  min-width: 88px !important;
}


/* Regex top row — final visual alignment cleanup */
.editor-pane[data-pane="regex"] .df-regex-top-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-wrap,
.editor-pane[data-pane="regex"] .df-regex-mode-pill,
.editor-pane[data-pane="regex"] .df-regex-top-action{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-pill,
.editor-pane[data-pane="regex"] .df-regex-mode-pill,
.editor-pane[data-pane="regex"] .df-regex-top-action .df-regex-pill-button{
  height:34px !important;
  min-height:34px !important;
  margin:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-pill{
  width:var(--df-regex-top-pill-width, 132px) !important;
  min-width:var(--df-regex-top-pill-width, 132px) !important;
  max-width:var(--df-regex-top-pill-width, 132px) !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  position:relative !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 16px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-label{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  display:block !important;
  width:auto !important;
  max-width:calc(100% - 38px) !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  color:var(--df-m-text) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  pointer-events:none !important;
  user-select:none !important;
  z-index:1 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell::after{
  content:"" !important;
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  width:8px !important;
  height:8px !important;
  margin:0 !important;
  border-right:1.5px solid #475569 !important;
  border-bottom:1.5px solid #475569 !important;
  transform:translateY(-62%) rotate(45deg) !important;
  pointer-events:none !important;
  z-index:2 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-shell select,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:hover,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:focus,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:focus-visible,
.editor-pane[data-pane="regex"] .df-regex-mode-shell select:active{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  background-image:none !important;
  color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  opacity:0 !important;
  cursor:pointer !important;
  z-index:3 !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-action .df-regex-pill-button{
  width:var(--df-regex-top-pill-width, 132px) !important;
  min-width:var(--df-regex-top-pill-width, 132px) !important;
  max-width:var(--df-regex-top-pill-width, 132px) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 16px !important;
  margin:0 !important;
}



/* Regex popup refresh — simplified quick-settings style */
.editor-pane[data-pane="regex"] .df-regex-body{
  gap:14px !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled,
.df-regex-top-controls-disabled{
  grid-template-columns:minmax(0, 188px) !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls > *,
.df-regex-top-controls > *{
  min-width:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile,
.df-regex-control-tile{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:100% !important;
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(148, 163, 184, .35) !important;
  background:#fff !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  color:var(--df-m-text, #334155) !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile:focus-within,
.df-regex-control-tile:focus-within{
  border-color:rgba(99, 102, 241, .5) !important;
  box-shadow:0 0 0 3px rgba(99, 102, 241, .12) !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile,
.df-regex-enable-tile{
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile input,
.df-regex-enable-tile input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:#6366f1 !important;
  flex:0 0 auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile span,
.df-regex-enable-tile span{
  white-space:nowrap !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile,
.df-regex-mode-tile{
  justify-content:center !important;
  padding:0 38px 0 14px !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-label,
.df-regex-mode-label{
  position:absolute !important;
  left:14px !important;
  right:38px !important;
  text-align:center !important;
  pointer-events:none !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile select,
.df-regex-mode-tile select{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  opacity:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile::after,
.df-regex-mode-tile::after{
  content:"" !important;
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  width:10px !important;
  height:6px !important;
  margin-top:-3px !important;
  pointer-events:none !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:10px 6px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-divider,
.df-regex-top-divider{
  margin:2px 0 0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar,
.df-regex-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-top:-2px !important;
}

.editor-pane[data-pane="regex"] .df-regex-subtitle,
.df-regex-subtitle{
  font-size:12px !important;
  font-weight:700 !important;
  color:#475569 !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
.df-regex-toolbar-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn,
.editor-pane[data-pane="regex"] .df-regex-delete-btn,
.df-regex-toolbar-btn,
.df-regex-delete-btn{
  min-height:36px !important;
  height:36px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  border:1px solid rgba(148, 163, 184, .32) !important;
  background:#fff !important;
  color:rgba(15, 23, 42, .84) !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn-primary,
.df-regex-toolbar-btn-primary{
  background:#f8fafc !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn:hover,
.editor-pane[data-pane="regex"] .df-regex-delete-btn:hover,
.df-regex-toolbar-btn:hover,
.df-regex-delete-btn:hover{
  background:rgba(15, 23, 42, .05) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions .df-regex-delete-btn,
.df-regex-toolbar-actions .df-regex-delete-btn{
  min-width:84px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action,
.df-regex-rule-action{
  min-width:96px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-regex-delete-btn,
.df-regex-rule-action .df-regex-delete-btn{
  width:100% !important;
}

@media (max-width: 720px){
  .editor-pane[data-pane="regex"] .df-regex-top-controls,
  .df-regex-top-controls{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-top-controls-disabled,
  .df-regex-top-controls-disabled{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-toolbar,
  .df-regex-toolbar{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
  .df-regex-toolbar-actions{
    justify-content:flex-start !important;
  }
}



/* Regex popup — cozy quick-panel pass */
.editor-pane[data-pane="regex"] #dfRegexDesignSection,
#dfRegexDesignSection{
  padding-top:2px !important;
}

.editor-pane[data-pane="regex"] .df-regex-body,
.df-regex-body{
  gap:16px !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  align-items:stretch !important;
  gap:12px !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls > *,
.df-regex-top-controls > *{
  min-width:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile,
.df-regex-control-tile{
  min-height:42px !important;
  height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(203, 213, 225, .82) !important;
  background:linear-gradient(180deg, rgba(251, 253, 255, .98) 0%, rgba(241, 245, 249, .98) 100%) !important;
  color:#334155 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 1px 2px rgba(15, 23, 42, .04) !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile:hover,
.df-regex-control-tile:hover{
  background:linear-gradient(180deg, rgba(248, 250, 252, .99) 0%, rgba(233, 239, 246, .99) 100%) !important;
  border-color:rgba(191, 200, 214, .95) !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile:focus-within,
.df-regex-control-tile:focus-within{
  border-color:rgba(129, 140, 248, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 0 0 3px rgba(99, 102, 241, .12) !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile,
.df-regex-enable-tile{
  justify-content:flex-start !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile.is-checked,
.df-regex-enable-tile.is-checked{
  border-color:rgba(165, 180, 252, .95) !important;
  background:linear-gradient(180deg, rgba(240, 244, 255, .98) 0%, rgba(232, 239, 255, .98) 100%) !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile input,
.df-regex-enable-tile input{
  accent-color:#5b6ee1 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile,
.df-regex-mode-tile{
  justify-content:center !important;
  padding:0 40px 0 16px !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-label,
.df-regex-mode-label{
  left:16px !important;
  right:40px !important;
  color:#1f2937 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile::after,
.df-regex-mode-tile::after{
  right:16px !important;
  width:10px !important;
  height:10px !important;
  margin-top:-6px !important;
  background-size:10px 10px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-divider,
.df-regex-top-divider{
  margin:0 !important;
  background:rgba(203, 213, 225, .7) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar,
.df-regex-toolbar{
  align-items:center !important;
  gap:12px !important;
}

.editor-pane[data-pane="regex"] .df-regex-subtitle,
.df-regex-subtitle{
  font-size:13px !important;
  font-weight:700 !important;
  color:#475569 !important;
  letter-spacing:.01em !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
.df-regex-toolbar-actions{
  gap:10px !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn,
.editor-pane[data-pane="regex"] .df-regex-delete-btn,
.df-regex-toolbar-btn,
.df-regex-delete-btn{
  min-height:40px !important;
  height:40px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(203, 213, 225, .86) !important;
  background:linear-gradient(180deg, rgba(249, 251, 255, .99) 0%, rgba(239, 244, 249, .99) 100%) !important;
  color:#334155 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 1px 2px rgba(15, 23, 42, .04) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn:hover,
.editor-pane[data-pane="regex"] .df-regex-delete-btn:hover,
.df-regex-toolbar-btn:hover,
.df-regex-delete-btn:hover{
  background:linear-gradient(180deg, rgba(244, 248, 255, .99) 0%, rgba(232, 239, 248, .99) 100%) !important;
  border-color:rgba(191, 200, 214, .98) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn-primary,
.df-regex-toolbar-btn-primary{
  border-color:rgba(186, 198, 255, .95) !important;
  background:linear-gradient(180deg, rgba(239, 244, 255, .99) 0%, rgba(230, 238, 255, .99) 100%) !important;
  color:#334155 !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn-secondary,
.editor-pane[data-pane="regex"] .df-regex-delete-btn,
.df-regex-toolbar-btn-secondary,
.df-regex-delete-btn{
  background:linear-gradient(180deg, rgba(248, 250, 252, .99) 0%, rgba(242, 246, 250, .99) 100%) !important;
  color:#475569 !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action,
.df-regex-rule-action{
  min-width:98px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-regex-delete-btn,
.df-regex-rule-action .df-regex-delete-btn{
  width:100% !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule,
.df-regex-rule{
  gap:14px !important;
}

.editor-pane[data-pane="regex"] .df-regex-output,
.df-regex-output{
  gap:16px !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]),
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group select,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group textarea,
#dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]),
#dfRegexDesignSection .field-group select,
#dfRegexDesignSection .field-group textarea{
  border-radius:14px !important;
  border:1px solid rgba(203, 213, 225, .82) !important;
  background:rgba(250, 252, 255, .92) !important;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]):focus,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group select:focus,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group textarea:focus,
#dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]):focus,
#dfRegexDesignSection .field-group select:focus,
#dfRegexDesignSection .field-group textarea:focus{
  border-color:rgba(129, 140, 248, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 0 0 3px rgba(99, 102, 241, .12) !important;
}

@media (max-width: 720px){
  .editor-pane[data-pane="regex"] .df-regex-top-controls,
  .df-regex-top-controls{
    gap:10px !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
  .df-regex-toolbar-actions{
    gap:8px !important;
  }
}


/* v217 regex popup — reset to v213 layout, tighten control language only */
.editor-pane[data-pane="regex"] #dfRegexDesignSection,
#dfRegexDesignSection{
  padding-top:2px !important;
}

.editor-pane[data-pane="regex"] .df-regex-body,
.df-regex-body{
  gap:14px !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 180px)) !important;
  align-items:center !important;
  gap:10px !important;
  width:max-content !important;
  max-width:100% !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled,
.df-regex-top-controls-disabled{
  grid-template-columns:minmax(0, 180px) !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile,
.editor-pane[data-pane="regex"] .df-regex-toolbar-btn,
.editor-pane[data-pane="regex"] .df-regex-delete-btn,
.df-regex-control-tile,
.df-regex-toolbar-btn,
.df-regex-delete-btn{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  border:1px solid rgba(203, 213, 225, .95) !important;
  background:#f3f6fa !important;
  color:#334155 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 1px 1px rgba(15, 23, 42, .03) !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  text-decoration:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile:hover,
.editor-pane[data-pane="regex"] .df-regex-toolbar-btn:hover,
.editor-pane[data-pane="regex"] .df-regex-delete-btn:hover,
.df-regex-control-tile:hover,
.df-regex-toolbar-btn:hover,
.df-regex-delete-btn:hover{
  background:#eef2f7 !important;
  border-color:rgba(186, 197, 209, .95) !important;
}

.editor-pane[data-pane="regex"] .df-regex-control-tile:focus-within,
.editor-pane[data-pane="regex"] .df-regex-toolbar-btn:focus-visible,
.editor-pane[data-pane="regex"] .df-regex-delete-btn:focus-visible,
.df-regex-control-tile:focus-within,
.df-regex-toolbar-btn:focus-visible,
.df-regex-delete-btn:focus-visible{
  border-color:rgba(148, 163, 184, .95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 0 2px rgba(148, 163, 184, .16) !important;
  outline:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile,
.df-regex-enable-tile{
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile.is-checked,
.df-regex-enable-tile.is-checked{
  background:#eaf0f8 !important;
  border-color:rgba(167, 180, 204, .95) !important;
  color:#314154 !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-tile input,
.df-regex-enable-tile input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:#6176a6 !important;
  flex:0 0 auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile,
.df-regex-mode-tile{
  padding:0 34px 0 14px !important;
  justify-content:flex-start !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-label,
.df-regex-mode-label{
  display:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile select,
.df-regex-mode-tile select{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 18px 0 0 !important;
  opacity:1 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#334155 !important;
  font:inherit !important;
  line-height:1 !important;
  cursor:pointer !important;
  outline:none !important;
  z-index:1 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-tile::after,
.df-regex-mode-tile::after{
  content:"" !important;
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  width:8px !important;
  height:8px !important;
  margin-top:-6px !important;
  border-right:1.5px solid #556579 !important;
  border-bottom:1.5px solid #556579 !important;
  transform:rotate(45deg) !important;
  pointer-events:none !important;
  background:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-divider,
.df-regex-top-divider{
  background:rgba(203, 213, 225, .72) !important;
  margin:0 0 2px !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar,
.df-regex-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:2px !important;
}

.editor-pane[data-pane="regex"] .df-regex-subtitle,
.df-regex-subtitle{
  font-size:13px !important;
  font-weight:700 !important;
  color:#5b6675 !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
.df-regex-toolbar-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn,
.df-regex-toolbar-btn{
  min-width:90px !important;
  justify-content:center !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn-primary,
.df-regex-toolbar-btn-primary{
  background:#edf2f8 !important;
  border-color:rgba(186, 197, 209, .95) !important;
  color:#334155 !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-btn-secondary,
.editor-pane[data-pane="regex"] .df-regex-delete-btn,
.df-regex-toolbar-btn-secondary,
.df-regex-delete-btn{
  background:#f3f6fa !important;
  color:#4a5565 !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule,
.df-regex-rule{
  gap:12px !important;
}

.editor-pane[data-pane="regex"] .df-regex-inline-row,
.df-regex-inline-row{
  gap:12px !important;
  align-items:end !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action,
.df-regex-rule-action{
  min-width:96px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-regex-delete-btn,
.df-regex-rule-action .df-regex-delete-btn{
  width:100% !important;
  justify-content:center !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]),
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group select,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group textarea,
#dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]),
#dfRegexDesignSection .field-group select,
#dfRegexDesignSection .field-group textarea{
  border-radius:10px !important;
  border:1px solid rgba(203, 213, 225, .95) !important;
  background:#ffffff !important;
  color:#334155 !important;
  box-shadow:none !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]):focus,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group select:focus,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .field-group textarea:focus,
#dfRegexDesignSection .field-group input:not([type="checkbox"]):not([type="radio"]):focus,
#dfRegexDesignSection .field-group select:focus,
#dfRegexDesignSection .field-group textarea:focus{
  border-color:rgba(148, 163, 184, .95) !important;
  box-shadow:0 0 0 2px rgba(148, 163, 184, .14) !important;
  outline:none !important;
}

@media (max-width: 720px){
  .editor-pane[data-pane="regex"] .df-regex-top-controls,
  .df-regex-top-controls{
    grid-template-columns:minmax(0, 1fr) !important;
    width:100% !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-top-controls-disabled,
  .df-regex-top-controls-disabled{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-toolbar,
  .df-regex-toolbar{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
  .df-regex-toolbar-actions{
    justify-content:flex-start !important;
  }
}


/* v218 regex controls final pass — compact bhumlu-like button language without importing framework */
.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled,
.df-regex-top-controls-disabled{
  display:flex !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls > *,
.df-regex-top-controls > *{
  flex:0 0 auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle,
.df-regex-top-toggle,
.editor-pane[data-pane="regex"] .df-regex-mode-select,
.df-regex-mode-select,
.editor-pane[data-pane="regex"] .df-regex-btn,
.df-regex-btn{
  min-height:34px !important;
  height:34px !important;
  box-sizing:border-box !important;
  border-radius:6px !important;
  border:1px solid #cfd8e3 !important;
  background:#ffffff !important;
  color:#4b5563 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-shadow:0 1px 2px rgba(15, 23, 42, .08) !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle,
.df-regex-top-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 12px !important;
  cursor:pointer !important;
  user-select:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle input,
.df-regex-top-toggle input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:#716aca !important;
  flex:0 0 auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle.is-checked,
.df-regex-top-toggle.is-checked{
  border-color:#bcc8da !important;
  background:#f6f8fb !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle:hover,
.df-regex-top-toggle:hover,
.editor-pane[data-pane="regex"] .df-regex-mode-select:hover,
.df-regex-mode-select:hover,
.editor-pane[data-pane="regex"] .df-regex-btn:hover,
.df-regex-btn:hover{
  background:#f8fafc !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle:focus-within,
.df-regex-top-toggle:focus-within,
.editor-pane[data-pane="regex"] .df-regex-mode-select:focus,
.df-regex-mode-select:focus,
.editor-pane[data-pane="regex"] .df-regex-btn:focus,
.df-regex-btn:focus{
  outline:none !important;
  border-color:#b9c6d8 !important;
  box-shadow:0 2px 4px rgba(15, 23, 42, .10) !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap,
.df-regex-select-wrap{
  min-width:112px !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.df-regex-mode-select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  padding:0 34px 0 12px !important;
  cursor:pointer !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23556370' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:10px 6px !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar,
.df-regex-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
.df-regex-toolbar-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn,
.df-regex-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 14px !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn-primary,
.df-regex-btn-primary{
  background:#eef2f7 !important;
  border-color:#cad4df !important;
  color:#384457 !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn-primary:hover,
.df-regex-btn-primary:hover{
  background:#e8edf4 !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn-secondary,
.df-regex-btn-secondary{
  background:#ffffff !important;
  border-color:#cfd8e3 !important;
  color:#556070 !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action,
.df-regex-rule-action{
  min-width:84px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-regex-btn,
.df-regex-rule-action .df-regex-btn{
  width:100% !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group select,
.df-regex-section .field-group select,
.editor-pane[data-pane="regex"] .df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]),
.df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]),
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea,
.df-regex-section .field-group textarea{
  min-height:34px !important;
  border-radius:6px !important;
  border:1px solid #d8e1eb !important;
  background:#ffffff !important;
  color:#475569 !important;
  box-shadow:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea,
.df-regex-section .field-group textarea{
  min-height:92px !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group label,
.df-regex-section .field-group label,
.editor-pane[data-pane="regex"] .df-regex-subtitle,
.df-regex-subtitle{
  color:#5b6576 !important;
}


/* v219: exact bhumlu button language for regex popup controls */
.editor-pane[data-pane="regex"] .df-regex-top-toggle,
.df-regex-top-toggle,
.editor-pane[data-pane="regex"] .df-regex-mode-select,
.df-regex-mode-select,
.editor-pane[data-pane="regex"] .df-regex-btn,
.df-regex-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:35px !important;
  height:35px !important;
  padding:0.5rem 1rem !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:0.125rem !important;
  background:#ffffff !important;
  color:#4E5155 !important;
  font-size:0.8125rem !important;
  font-weight:500 !important;
  line-height:1.47 !important;
  text-align:center !important;
  vertical-align:middle !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.03) !important;
  transition:all 0.2s ease-in-out !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle,
.df-regex-top-toggle{
  gap:8px !important;
  padding-left:0.875rem !important;
  padding-right:0.875rem !important;
  cursor:pointer !important;
  user-select:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle input,
.df-regex-top-toggle input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:#716aca !important;
  flex:0 0 auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle.is-checked,
.df-regex-top-toggle.is-checked{
  background:#8897AA !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle.is-checked input,
.df-regex-top-toggle.is-checked input{
  accent-color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap,
.df-regex-select-wrap{
  min-width:124px !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.df-regex-mode-select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  justify-content:flex-start !important;
  padding-right:2.25rem !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234E5155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 0.875rem center !important;
  background-size:12px 12px !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle:hover,
.df-regex-top-toggle:hover,
.editor-pane[data-pane="regex"] .df-regex-mode-select:hover,
.df-regex-mode-select:hover,
.editor-pane[data-pane="regex"] .df-regex-btn:hover,
.df-regex-btn:hover{
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.10), 0px 1px 10px 0px rgba(0, 0, 0, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle:focus-within,
.df-regex-top-toggle:focus-within,
.editor-pane[data-pane="regex"] .df-regex-mode-select:focus,
.df-regex-mode-select:focus,
.editor-pane[data-pane="regex"] .df-regex-btn:focus,
.df-regex-btn:focus{
  outline:none !important;
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.10), 0px 1px 10px 0px rgba(0, 0, 0, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle.is-checked:hover,
.df-regex-top-toggle.is-checked:hover,
.editor-pane[data-pane="regex"] .df-regex-top-toggle.is-checked:focus-within,
.df-regex-top-toggle.is-checked:focus-within{
  background:#8e9cae !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn,
.df-regex-btn{
  white-space:nowrap !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn-primary,
.df-regex-btn-primary{
  background:#8897AA !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn-primary:hover,
.df-regex-btn-primary:hover,
.editor-pane[data-pane="regex"] .df-regex-btn-primary:focus,
.df-regex-btn-primary:focus{
  background:#8e9cae !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-regex-btn-secondary,
.df-regex-btn-secondary{
  background:#ffffff !important;
  color:#4E5155 !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
.df-regex-toolbar-actions{
  gap:10px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action,
.df-regex-rule-action{
  min-width:84px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-regex-btn,
.df-regex-rule-action .df-regex-btn{
  width:100% !important;
}




/* v220: use Bhumlu button source tokens for actual regex buttons only */
.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled,
.df-regex-top-controls-disabled{
  display:flex !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline,
.df-regex-enable-inline{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:35px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#4E5155 !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.33 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  user-select:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline input,
.df-regex-enable-inline input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:#716aca !important;
  flex:0 0 auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline span,
.df-regex-enable-inline span{
  display:inline-block !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap,
.df-regex-select-wrap{
  display:inline-flex !important;
  align-items:center !important;
  min-width:132px !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.df-regex-mode-select{
  display:block !important;
  width:132px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0.5rem 2rem 0.5rem 0.875rem !important;
  font-size:0.8125rem !important;
  font-weight:400 !important;
  line-height:1.33 !important;
  color:#4E5155 !important;
  background-color:#fff !important;
  border:1px solid #d7dde5 !important;
  border-radius:0.125rem !important;
  box-shadow:none !important;
  appearance:auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select:hover,
.df-regex-mode-select:hover{
  border-color:#c9d2dd !important;
  background-color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select:focus,
.df-regex-mode-select:focus{
  color:#4E5155 !important;
  background-color:#fff !important;
  border-color:#cbc8eb !important;
  outline:0 !important;
  box-shadow:none !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn,
.df-bhumlu-btn{
  display:inline-block !important;
  font-weight:500 !important;
  color:#4E5155 !important;
  text-align:center !important;
  vertical-align:middle !important;
  user-select:none !important;
  background-color:transparent !important;
  border:0 solid transparent !important;
  padding:0.5rem 1rem !important;
  font-size:0.8125rem !important;
  line-height:1.47 !important;
  border-radius:0.125rem !important;
  transition:all 0.2s ease-in-out !important;
  text-transform:uppercase !important;
  letter-spacing:0 !important;
  min-height:0 !important;
  height:auto !important;
  white-space:nowrap !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn:hover,
.editor-pane[data-pane="regex"] .df-bhumlu-btn:focus,
.df-bhumlu-btn:hover,
.df-bhumlu-btn:focus{
  text-decoration:none !important;
  outline:0 !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary,
.df-bhumlu-btn-secondary{
  background:#8897AA !important;
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.03) !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary:hover,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary:focus,
.df-bhumlu-btn-secondary:hover,
.df-bhumlu-btn-secondary:focus{
  background:#8e9cae !important;
  color:#fff !important;
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.1), 0px 1px 10px 0px rgba(0, 0, 0, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary:active,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary.active,
.df-bhumlu-btn-secondary:active,
.df-bhumlu-btn-secondary.active{
  background:#97a5b5 !important;
  color:#fff !important;
  box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.15), 0px 8px 10px 1px rgba(0, 0, 0, 0.1), 0px 3px 14px 2px rgba(0, 0, 0, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-default,
.df-bhumlu-btn-default{
  background:#fff !important;
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.03) !important;
  color:#4E5155 !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-default:hover,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-default:focus,
.df-bhumlu-btn-default:hover,
.df-bhumlu-btn-default:focus{
  background:#fff !important;
  color:#4E5155 !important;
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.1), 0px 1px 10px 0px rgba(0, 0, 0, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-default:active,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-default.active,
.df-bhumlu-btn-default:active,
.df-bhumlu-btn-default.active{
  background:#fff !important;
  color:#4E5155 !important;
  box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.15), 0px 8px 10px 1px rgba(0, 0, 0, 0.1), 0px 3px 14px 2px rgba(0, 0, 0, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions,
.df-regex-toolbar-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action,
.df-regex-rule-action{
  min-width:auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-bhumlu-btn,
.df-regex-rule-action .df-bhumlu-btn{
  width:100% !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-toggle,
.df-regex-top-toggle{
  all:unset;
}

.editor-pane[data-pane="regex"] .df-regex-btn,
.df-regex-btn{
  all:unset;
}


/* v221: regex popup full Bhumlu control pass */
.editor-pane[data-pane="regex"]{
  --df-rx-bhumlu-text:#4E5155;
  --df-rx-bhumlu-muted:#babbbc;
  --df-rx-bhumlu-border:rgba(24, 28, 33, 0.10);
  --df-rx-bhumlu-border-strong:rgba(24, 28, 33, 0.18);
  --df-rx-bhumlu-line:rgba(24, 28, 33, 0.06);
  --df-rx-bhumlu-focus:#716aca;
  --df-rx-bhumlu-focus-soft:rgba(203, 200, 235, 0.5);
  --df-rx-bhumlu-secondary:#8897AA;
  --df-rx-bhumlu-secondary-hover:#8e9cae;
  --df-rx-bhumlu-secondary-active:#97a5b5;
  --df-rx-bhumlu-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.03);
  --df-rx-bhumlu-shadow-hover:0px 2px 4px -1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.10), 0px 1px 10px 0px rgba(0, 0, 0, 0.06);
  --df-rx-bhumlu-shadow-active:0px 5px 5px -3px rgba(0, 0, 0, 0.15), 0px 8px 10px 1px rgba(0, 0, 0, 0.10), 0px 3px 14px 2px rgba(0, 0, 0, 0.06);
}

.editor-pane[data-pane="regex"] .df-regex-body{
  gap:1rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:1rem !important;
  margin:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled{
  gap:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline{
  display:inline-flex !important;
  align-items:center !important;
  gap:0.625rem !important;
  min-height:2.1875rem !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--df-rx-bhumlu-text) !important;
  box-shadow:none !important;
  cursor:pointer !important;
  font-size:0.83125rem !important;
  font-weight:500 !important;
  line-height:1.47 !important;
  text-transform:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:var(--df-rx-bhumlu-focus) !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline span{
  color:var(--df-rx-bhumlu-text) !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap{
  display:inline-flex !important;
  align-items:center !important;
  min-width:8.5rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select,
.editor-pane[data-pane="regex"] .df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]),
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea{
  display:block !important;
  width:100% !important;
  min-height:2.1875rem !important;
  height:2.1875rem !important;
  padding:0.5rem 0.875rem calc(0.5rem - 1px) !important;
  font-size:0.8125rem !important;
  font-weight:400 !important;
  line-height:1.33 !important;
  color:var(--df-rx-bhumlu-text) !important;
  background-color:transparent !important;
  background-clip:padding-box !important;
  border:0 !important;
  border-bottom:1px solid var(--df-rx-bhumlu-border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  padding-right:1.875rem !important;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAMCAYAAACEJVa/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNpi+P//PwMIUwKYGKgABo8hLMQo8vDxa/j/7189NjlGJqZGolyyY8umBpBibAaA5Ij2DrpBMAPAHFKjGOQ1EEYRHE0nGAAgwAD7ACa5V929KwAAAABJRU5ErkJggg==") !important;
  background-repeat:no-repeat !important;
  background-position:right 0.875rem center !important;
  background-size:17px 12px !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select:hover,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select:hover,
.editor-pane[data-pane="regex"] .df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]):hover,
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea:hover{
  border-bottom-color:var(--df-rx-bhumlu-border-strong) !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select:focus,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select:focus,
.editor-pane[data-pane="regex"] .df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]):focus,
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea:focus{
  border-bottom-color:var(--df-rx-bhumlu-focus) !important;
  box-shadow:0 -1px 0 0 var(--df-rx-bhumlu-focus) inset !important;
  outline:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea{
  min-height:5rem !important;
  height:auto !important;
  resize:vertical !important;
}

.editor-pane[data-pane="regex"] .df-regex-output textarea{
  min-height:5rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group input::placeholder,
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea::placeholder{
  color:var(--df-rx-bhumlu-muted) !important;
  opacity:1 !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group label,
.editor-pane[data-pane="regex"] .df-regex-subtitle,
.editor-pane[data-pane="regex"] .df-regex-section .df-prop-helptext{
  color:var(--df-rx-bhumlu-text) !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group label,
.editor-pane[data-pane="regex"] .df-regex-subtitle{
  margin-bottom:0.5rem !important;
  font-weight:500 !important;
  font-size:0.83125rem !important;
  line-height:1.47 !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .df-prop-helptext{
  margin-top:0.25rem !important;
  font-size:0.75rem !important;
  line-height:1.45 !important;
  opacity:0.85 !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-divider{
  height:1px !important;
  margin:0.25rem 0 0.5rem !important;
  background:var(--df-rx-bhumlu-line) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
  margin:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:0.75rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-inline-row{
  gap:1rem !important;
  align-items:end !important;
}

.editor-pane[data-pane="regex"] .df-regex-inline-row-two{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
}

.editor-pane[data-pane="regex"] .df-regex-inline-row-three{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-count-row,
.editor-pane[data-pane="regex"] .df-regex-rule-list{
  gap:1rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action{
  min-width:auto !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn{
  display:inline-block !important;
  min-height:0 !important;
  height:auto !important;
  padding:0.5rem 1rem !important;
  border:0 solid transparent !important;
  border-radius:0.125rem !important;
  box-shadow:var(--df-rx-bhumlu-shadow) !important;
  font-size:0.8125rem !important;
  font-weight:500 !important;
  line-height:1.47 !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn:hover,
.editor-pane[data-pane="regex"] .df-bhumlu-btn:focus{
  text-decoration:none !important;
  outline:0 !important;
  box-shadow:var(--df-rx-bhumlu-shadow-hover) !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn:active,
.editor-pane[data-pane="regex"] .df-bhumlu-btn.active{
  box-shadow:var(--df-rx-bhumlu-shadow-active) !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary{
  background:var(--df-rx-bhumlu-secondary) !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary:hover,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary:focus{
  background:var(--df-rx-bhumlu-secondary-hover) !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary:active,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-secondary.active{
  background:var(--df-rx-bhumlu-secondary-active) !important;
  color:#fff !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-default{
  background:#fff !important;
  color:var(--df-rx-bhumlu-text) !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-btn-default:hover,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-default:focus,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-default:active,
.editor-pane[data-pane="regex"] .df-bhumlu-btn-default.active{
  background:#fff !important;
  color:var(--df-rx-bhumlu-text) !important;
}

.editor-pane[data-pane="regex"] #dfRegexAddRuleBtn{
  min-width:91px !important;
}

.editor-pane[data-pane="regex"] .df-regex-delete-btn{
  min-width:84px !important;
}

@media (max-width: 720px){
  .editor-pane[data-pane="regex"] .df-regex-top-controls,
  .editor-pane[data-pane="regex"] .df-regex-inline-row,
  .editor-pane[data-pane="regex"] .df-regex-count-row,
  .editor-pane[data-pane="regex"] .df-regex-toolbar{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    align-items:stretch !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-toolbar-actions{
    justify-content:flex-start !important;
  }

  .editor-pane[data-pane="regex"] .df-regex-delete-btn,
  .editor-pane[data-pane="regex"] #dfRegexAddRuleBtn{
    min-width:0 !important;
  }
}


/* v222: exact Bhumlu mapping from user references
   1) popup shell = dropdown popup cleanliness
   2) checkbox = Bhumlu custom checkbox
   3) buttons = Bhumlu flat material default buttons
*/
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0.125rem !important;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.03) !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader {
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid rgba(24, 28, 33, 0.06) !important;
  background: #fff !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title-text {
  color: #4E5155 !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .df-fi-body {
  background: #fff !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .df-fi-nav-btn,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .df-fi-close-btn {
  border-radius: 0.125rem !important;
}

.editor-pane[data-pane="regex"] {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.editor-pane[data-pane="regex"] .df-regex-section {
  margin: 0 !important;
  padding: 1rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.editor-pane[data-pane="regex"] .df-regex-body {
  gap: 1rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls,
.editor-pane[data-pane="regex"] .df-regex-top-controls-disabled {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin: 0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-divider {
  width: 100% !important;
  height: 1px !important;
  margin: 0 0 0.5rem !important;
  background: rgba(24, 28, 33, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-subtitle,
.editor-pane[data-pane="regex"] .df-regex-section .field-group > label {
  color: #4E5155 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.47 !important;
}

.editor-pane[data-pane="regex"] .df-regex-subtitle {
  margin: 0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  min-height: 1.125rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check {
  position: relative !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-indicator {
  position: relative !important;
  display: inline-block !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  flex: 0 0 auto !important;
  background-color: transparent !important;
  border: rgba(24, 28, 33, 0.10) solid 2px !important;
  border-radius: 0.125rem !important;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-input:focus + .df-bhumlu-check-indicator {
  box-shadow: 0 0 0 0.2rem rgba(113, 106, 202, 0.25) !important;
  border-color: #cbc8eb !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-input:active + .df-bhumlu-check-indicator {
  background-color: #eeeef9 !important;
  border-color: #eeeef9 !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-input:checked + .df-bhumlu-check-indicator {
  background-color: #716aca !important;
  border-color: #716aca !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-input:checked + .df-bhumlu-check-indicator::after {
  content: "" !important;
  position: absolute !important;
  left: 0.28rem !important;
  top: 0.07rem !important;
  width: 0.28rem !important;
  height: 0.52rem !important;
  border: solid #fff !important;
  border-width: 0 0.125rem 0.125rem 0 !important;
  transform: rotate(45deg) !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-text {
  color: #4E5155 !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.33 !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 8.5rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select,
.editor-pane[data-pane="regex"] .df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]),
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea {
  display: block !important;
  width: 100% !important;
  min-height: 2.1875rem !important;
  height: 2.1875rem !important;
  padding: 0.5rem 0.875rem calc(0.5rem - 1px) !important;
  color: #4E5155 !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.33 !important;
  background-color: transparent !important;
  background-clip: padding-box !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(24, 28, 33, 0.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 1.875rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234E5155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  background-size: 10px 6px !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select:hover,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select:hover,
.editor-pane[data-pane="regex"] .df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]):hover,
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea:hover {
  border-bottom-color: rgba(24, 28, 33, 0.18) !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select:focus,
.editor-pane[data-pane="regex"] .df-regex-section .field-group select:focus,
.editor-pane[data-pane="regex"] .df-regex-section .field-group input:not([type="checkbox"]):not([type="radio"]):focus,
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea:focus {
  color: #4E5155 !important;
  background-color: transparent !important;
  border-bottom-color: #cbc8eb !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea,
.editor-pane[data-pane="regex"] .df-regex-output textarea {
  min-height: 5rem !important;
  height: auto !important;
  resize: vertical !important;
}

.editor-pane[data-pane="regex"] .df-regex-section .field-group input::placeholder,
.editor-pane[data-pane="regex"] .df-regex-section .field-group textarea::placeholder {
  color: #babbbc !important;
  opacity: 1 !important;
}

.editor-pane[data-pane="regex"] .df-regex-inline-row {
  gap: 1rem !important;
  align-items: end !important;
}

.editor-pane[data-pane="regex"] .df-regex-inline-row-two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.editor-pane[data-pane="regex"] .df-regex-inline-row-three {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-list,
.editor-pane[data-pane="regex"] .df-regex-count-row {
  gap: 1rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action {
  min-width: auto !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-flat-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.1875rem !important;
  height: 2.1875rem !important;
  padding: 0.5rem 1rem !important;
  border: 0 !important;
  border-radius: 0.125rem !important;
  background: none !important;
  box-shadow: none !important;
  color: #4E5155 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.47 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-flat-btn:hover,
.editor-pane[data-pane="regex"] .df-bhumlu-flat-btn:focus {
  background: rgba(78, 81, 85, 0.10) !important;
  box-shadow: none !important;
  color: #4E5155 !important;
  outline: 0 !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-flat-btn:active,
.editor-pane[data-pane="regex"] .df-bhumlu-flat-btn.active {
  background: rgba(78, 81, 85, 0.15) !important;
  box-shadow: none !important;
  color: #4E5155 !important;
}

.editor-pane[data-pane="regex"] .df-regex-rule-action .df-bhumlu-flat-btn {
  width: 100% !important;
}

.editor-pane[data-pane="regex"] .df-prop-helptext {
  margin-top: 0.25rem !important;
  color: #4E5155 !important;
  opacity: 0.85 !important;
}


/* v224: make Builder match the Bhumlu default dropdown button */
.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  align-items:center !important;
  gap:1rem !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap,
.df-regex-select-wrap{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  min-width:7.5rem !important;
  min-height:2.1875rem !important;
  height:2.1875rem !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0.125rem !important;
  background:#fff !important;
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.07), 0px 4px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.03) !important;
  transition:all 0.2s ease-in-out !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap:hover,
.df-regex-select-wrap:hover,
.editor-pane[data-pane="regex"] .df-regex-select-wrap:focus-within,
.df-regex-select-wrap:focus-within{
  box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.15), 0px 4px 5px 0px rgba(0, 0, 0, 0.1), 0px 1px 10px 0px rgba(0, 0, 0, 0.06) !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap::after,
.df-regex-select-wrap::after{
  content:"" !important;
  position:absolute !important;
  right:0.95rem !important;
  top:50% !important;
  width:0.42em !important;
  height:0.42em !important;
  margin-top:-0.18em !important;
  border:1px solid #4E5155 !important;
  border-top:0 !important;
  border-left:0 !important;
  transform:rotate(45deg) !important;
  pointer-events:none !important;
  opacity:1 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select,
.df-regex-mode-select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  width:100% !important;
  min-width:7.5rem !important;
  min-height:2.1875rem !important;
  height:2.1875rem !important;
  padding:0.5rem 2rem 0.5rem 1rem !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0.125rem !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#4E5155 !important;
  font-size:0.8125rem !important;
  font-weight:500 !important;
  line-height:1.47 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select:hover,
.df-regex-mode-select:hover,
.editor-pane[data-pane="regex"] .df-regex-mode-select:focus,
.df-regex-mode-select:focus{
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#4E5155 !important;
  outline:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-mode-select option,
.df-regex-mode-select option{
  color:#4E5155 !important;
}


/* v225: Builder should be a single Bhumlu dropdown button, not a styled select inside a button */
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn,
.df-regex-select-wrap.df-regex-dropdown-btn{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:7.25rem !important;
  height:2.1875rem !important;
  min-height:2.1875rem !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0.125rem !important;
  background:#ffffff !important;
  box-shadow:0px 2px 4px -1px rgba(0,0,0,.07), 0px 4px 5px 0px rgba(0,0,0,.05), 0px 1px 10px 0px rgba(0,0,0,.03) !important;
  overflow:hidden !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn::after,
.df-regex-select-wrap.df-regex-dropdown-btn::after{
  content:"" !important;
  position:absolute !important;
  right:0.875rem !important;
  top:50% !important;
  width:0.5rem !important;
  height:0.5rem !important;
  margin-top:-0.22rem !important;
  border-right:1px solid #4E5155 !important;
  border-bottom:1px solid #4E5155 !important;
  transform:rotate(45deg) !important;
  pointer-events:none !important;
  opacity:.9 !important;
}

.editor-pane[data-pane="regex"] .df-regex-dropdown-label,
.df-regex-dropdown-label{
  display:inline-flex !important;
  align-items:center !important;
  min-height:100% !important;
  padding:0.5rem 2rem 0.5rem 1rem !important;
  color:#4E5155 !important;
  font-size:0.8125rem !important;
  font-weight:500 !important;
  line-height:1.47 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  user-select:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select,
.df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select,
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select:hover,
.df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select:hover,
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select:focus,
.df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select:focus,
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select:focus-visible,
.df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select:focus-visible{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  color:transparent !important;
  opacity:0 !important;
  cursor:pointer !important;
  text-indent:-9999px !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn:hover,
.df-regex-select-wrap.df-regex-dropdown-btn:hover,
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn:focus-within,
.df-regex-select-wrap.df-regex-dropdown-btn:focus-within{
  box-shadow:0px 2px 4px -1px rgba(0,0,0,.10), 0px 4px 5px 0px rgba(0,0,0,.07), 0px 1px 10px 0px rgba(0,0,0,.05) !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn:focus-within::after,
.df-regex-select-wrap.df-regex-dropdown-btn:focus-within::after{
  border-color:#716aca !important;
}



/* v226: Builder should match the lightweight checkbox-row style, not render inside any container */
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn,
.df-regex-select-wrap.df-regex-dropdown-btn{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 16px 0 0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn::before,
.df-regex-select-wrap.df-regex-dropdown-btn::before{
  content:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn::after,
.df-regex-select-wrap.df-regex-dropdown-btn::after{
  content:"" !important;
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  width:0.42rem !important;
  height:0.42rem !important;
  margin-top:-0.23rem !important;
  border-right:1.5px solid #616a75 !important;
  border-bottom:1.5px solid #616a75 !important;
  transform:rotate(45deg) !important;
  pointer-events:none !important;
  opacity:1 !important;
}

.editor-pane[data-pane="regex"] .df-regex-dropdown-label,
.df-regex-dropdown-label{
  display:inline-flex !important;
  align-items:center !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  color:#4e5155 !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select,
.df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select{
  position:absolute !important;
  inset:-4px -8px -4px -8px !important;
  width:auto !important;
  min-width:calc(100% + 16px) !important;
  height:auto !important;
  min-height:calc(100% + 8px) !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:transparent !important;
  opacity:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn:hover,
.df-regex-select-wrap.df-regex-dropdown-btn:hover,
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn:focus-within,
.df-regex-select-wrap.df-regex-dropdown-btn:focus-within,
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn:hover .df-regex-dropdown-label,
.df-regex-select-wrap.df-regex-dropdown-btn:hover .df-regex-dropdown-label,
.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn:focus-within .df-regex-dropdown-label,
.df-regex-select-wrap.df-regex-dropdown-btn:focus-within .df-regex-dropdown-label{
  background:transparent !important;
  box-shadow:none !important;
  border-color:transparent !important;
  color:#374151 !important;
}

.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  align-items:center !important;
  gap:14px !important;
}


/* v227: normalize regex top-row typography and spacing only */
.editor-pane[data-pane="regex"] .df-regex-top-controls,
.df-regex-top-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:18px !important;
  min-height:24px !important;
}

.editor-pane[data-pane="regex"] .df-regex-enable-inline,
.df-regex-enable-inline{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  gap:8px !important;
  min-height:24px !important;
  line-height:24px !important;
  margin:0 !important;
  padding:0 !important;
}

.editor-pane[data-pane="regex"] .df-bhumlu-check-text,
.df-bhumlu-check-text,
.editor-pane[data-pane="regex"] .df-regex-dropdown-label,
.df-regex-dropdown-label{
  color:#4e5155 !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:24px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  vertical-align:middle !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn,
.df-regex-select-wrap.df-regex-dropdown-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 auto !important;
  gap:8px !important;
  min-height:24px !important;
  line-height:24px !important;
  margin:0 0 0 2px !important;
  padding:0 18px 0 0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn::after,
.df-regex-select-wrap.df-regex-dropdown-btn::after{
  right:0 !important;
  top:50% !important;
  margin-top:-3px !important;
  width:7px !important;
  height:7px !important;
  border-right:1.5px solid #717171 !important;
  border-bottom:1.5px solid #717171 !important;
}

.editor-pane[data-pane="regex"] .df-regex-dropdown-label,
.df-regex-dropdown-label{
  position:relative !important;
  top:0 !important;
}

.editor-pane[data-pane="regex"] .df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select,
.df-regex-select-wrap.df-regex-dropdown-btn .df-regex-mode-select{
  inset:-6px -10px -6px -10px !important;
  min-width:calc(100% + 20px) !important;
  min-height:calc(100% + 12px) !important;
}


/* v231: clean regex top-row same-line alignment from v227 baseline */
.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-topline,
#dfRegexDesignSection .df-rx-topline{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  column-gap:22px !important;
  row-gap:0 !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-topline.df-regex-top-controls-disabled,
#dfRegexDesignSection .df-rx-topline.df-regex-top-controls-disabled{
  column-gap:0 !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-enable,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode,
#dfRegexDesignSection .df-rx-enable,
#dfRegexDesignSection .df-rx-mode{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  align-self:center !important;
  flex:0 0 auto !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  line-height:20px !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-enable,
#dfRegexDesignSection .df-rx-enable{
  gap:8px !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode,
#dfRegexDesignSection .df-rx-mode{
  gap:7px !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-enable-indicator,
#dfRegexDesignSection .df-rx-enable-indicator{
  position:relative !important;
  top:0 !important;
  margin:0 !important;
  align-self:center !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-enable-text,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode-label,
#dfRegexDesignSection .df-rx-enable-text,
#dfRegexDesignSection .df-rx-mode-label{
  display:inline-flex !important;
  align-items:center !important;
  align-self:center !important;
  height:20px !important;
  min-height:20px !important;
  margin:0 !important;
  padding:0 !important;
  color:#4E5155 !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:20px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  vertical-align:middle !important;
  box-shadow:none !important;
  background:transparent !important;
  border:0 !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode-chevron,
#dfRegexDesignSection .df-rx-mode-chevron{
  display:inline-block !important;
  flex:0 0 auto !important;
  width:7px !important;
  height:7px !important;
  margin:0 !important;
  position:relative !important;
  top:-1px !important;
  border-right:1.5px solid #717171 !important;
  border-bottom:1.5px solid #717171 !important;
  transform:rotate(45deg) !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode-select,
#dfRegexDesignSection .df-rx-mode-select{
  position:absolute !important;
  inset:-6px -8px -6px -8px !important;
  width:auto !important;
  min-width:calc(100% + 16px) !important;
  height:auto !important;
  min-height:calc(100% + 12px) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  opacity:0 !important;
  color:transparent !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  cursor:pointer !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode::after,
#dfRegexDesignSection .df-rx-mode::after{
  content:none !important;
}


.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode,
#dfRegexDesignSection .df-rx-mode{
  min-width:96px !important;
  justify-content:flex-start !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode-label,
#dfRegexDesignSection .df-rx-mode-label{
  min-width:44px !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode-select,
#dfRegexDesignSection .df-rx-mode-select{
  left:-10px !important;
  right:auto !important;
  top:-6px !important;
  bottom:-6px !important;
  width:calc(100% + 20px) !important;
  min-width:112px !important;
  color:#4E5155 !important;
  font-size:13px !important;
  line-height:20px !important;
  opacity:0.001 !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode-select option,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rx-mode-select optgroup,
#dfRegexDesignSection .df-rx-mode-select option,
#dfRegexDesignSection .df-rx-mode-select optgroup{
  color:#4E5155 !important;
  background:#ffffff !important;
  font-size:13px !important;
}


/* v233: regex rule selects less pill, more compact form-control */
.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-regex-inline-row .field-group select,
#dfRegexDesignSection .df-regex-inline-row .field-group select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  min-height:34px !important;
  height:34px !important;
  padding:0 28px 0 12px !important;
  border-radius:8px !important;
  border:1px solid #cbd5e1 !important;
  background-color:#ffffff !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%) !important;
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50% !important;
  background-size:4px 4px, 4px 4px !important;
  background-repeat:no-repeat !important;
  box-shadow:none !important;
  color:#4b5563 !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:34px !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-regex-inline-row .field-group select:hover,
#dfRegexDesignSection .df-regex-inline-row .field-group select:hover{
  border-color:#b8c5d6 !important;
}

.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-regex-inline-row .field-group select:focus,
#dfRegexDesignSection .df-regex-inline-row .field-group select:focus{
  border-color:#94a3b8 !important;
  box-shadow:0 0 0 2px rgba(148, 163, 184, .14) !important;
  outline:none !important;
}


/* v234 regex rule cards + icon actions */
.editor-pane[data-pane="regex"] .df-regex-toolbar {
  align-items: center;
}

.editor-pane[data-pane="regex"] .df-regex-toolbar-actions {
  margin-left: auto;
}

.editor-pane[data-pane="regex"] .df-rx-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.editor-pane[data-pane="regex"] .df-rx-icon-btn:hover {
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.3);
  color: #334155;
}

.editor-pane[data-pane="regex"] .df-rx-icon-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.editor-pane[data-pane="regex"] .df-rx-add-rule-btn {
  width: 30px;
  height: 30px;
}

.editor-pane[data-pane="regex"] .df-rx-top-add-rule-btn {
  margin-left: 6px;
  flex: 0 0 auto;
}

.editor-pane[data-pane="regex"] .df-rx-rule-card {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.editor-pane[data-pane="regex"] .df-regex-rule-list {
  gap: 14px;
}

.editor-pane[data-pane="regex"] .df-rx-rule-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 28px;
}

.editor-pane[data-pane="regex"] .df-rx-rule-delete-spacer {
  width: 28px;
  height: 28px;
  visibility: hidden;
}

.editor-pane[data-pane="regex"] .df-rx-rule-delete:hover {
  background: #fff5f5;
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}

.editor-pane[data-pane="regex"] .df-rx-rule-card .df-regex-inline-row,
.editor-pane[data-pane="regex"] .df-rx-rule-card .df-regex-count-row {
  gap: 14px;
}

.editor-pane[data-pane="regex"] .df-rx-rule-card .field-group {
  margin-bottom: 0;
}

.editor-pane[data-pane="regex"] .df-rx-rule-card .field-group label {
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .editor-pane[data-pane="regex"] .df-rx-rule-card {
    padding: 12px;
  }
}


/* v236 regex add-button and rule titles */
.editor-pane[data-pane="regex"] .df-rx-topline,
#dfRegexDesignSection .df-rx-topline{
  column-gap: 14px !important;
}

.editor-pane[data-pane="regex"] .df-rx-top-add-btn,
#dfRegexDesignSection .df-rx-top-add-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.editor-pane[data-pane="regex"] .df-rx-top-add-btn:hover,
#dfRegexDesignSection .df-rx-top-add-btn:hover{
  background: #f8fafc !important;
  border-color: rgba(148, 163, 184, 0.75) !important;
}

.editor-pane[data-pane="regex"] .df-rx-top-add-btn-text,
#dfRegexDesignSection .df-rx-top-add-btn-text{
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: inherit !important;
}

.editor-pane[data-pane="regex"] .df-rx-top-add-btn-icon,
#dfRegexDesignSection .df-rx-top-add-btn-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  color: inherit !important;
}

.editor-pane[data-pane="regex"] .df-rx-top-add-btn-icon svg,
#dfRegexDesignSection .df-rx-top-add-btn-icon svg{
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

.editor-pane[data-pane="regex"] .df-rx-rule-head,
#dfRegexDesignSection .df-rx-rule-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 20px !important;
  margin-bottom: 2px !important;
}

.editor-pane[data-pane="regex"] .df-rx-rule-title,
#dfRegexDesignSection .df-rx-rule-title{
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #475569 !important;
}

.editor-pane[data-pane="regex"] .df-rx-rule-delete-spacer,
#dfRegexDesignSection .df-rx-rule-delete-spacer{
  width: 24px !important;
  height: 24px !important;
}

.editor-pane[data-pane="regex"] .df-rx-rule-delete,
#dfRegexDesignSection .df-rx-rule-delete{
  width: 24px !important;
  height: 24px !important;
}



/* v237 regex redesign to match provided validation popup */
#dfRegexDesignSection.df-rxv2-panel,
.editor-pane[data-pane="regex"] #dfRegexDesignSection.df-rxv2-panel{
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#dfRegexDesignSection .df-rxv2-body,
.editor-pane[data-pane="regex"] #dfRegexDesignSection .df-rxv2-body{
  display: grid !important;
  gap: 18px !important;
}

#dfRegexDesignSection .df-rxv2-toggle-row{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#dfRegexDesignSection .df-rxv2-switch{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

#dfRegexDesignSection .df-rxv2-switch-input{
  position: absolute !important;
  opacity: 0 !important;
  inset: 0 !important;
  cursor: pointer !important;
}

#dfRegexDesignSection .df-rxv2-switch-track{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 48px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #dbe2ee !important;
  transition: background .18s ease !important;
}

#dfRegexDesignSection .df-rxv2-switch-knob{
  width: 22px !important;
  height: 22px !important;
  margin-left: 3px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18) !important;
  transition: transform .18s ease !important;
}

#dfRegexDesignSection .df-rxv2-switch-input:checked + .df-rxv2-switch-track{
  background: #7c4dff !important;
}

#dfRegexDesignSection .df-rxv2-switch-input:checked + .df-rxv2-switch-track .df-rxv2-switch-knob{
  transform: translateX(20px) !important;
}

#dfRegexDesignSection .df-rxv2-toggle-copy{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#dfRegexDesignSection .df-rxv2-toggle-label{
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}

#dfRegexDesignSection .df-rxv2-enabled-badge{
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: #e9fbef !important;
  color: #1f9d53 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

#dfRegexDesignSection .df-rxv2-mode-block,
#dfRegexDesignSection .df-rxv2-section{
  display: grid !important;
  gap: 10px !important;
}

#dfRegexDesignSection .df-rxv2-section-label{
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
}

#dfRegexDesignSection .df-rxv2-mode-tabs{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#dfRegexDesignSection .df-rxv2-mode-tab{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid #e5dffc !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#dfRegexDesignSection .df-rxv2-mode-tab.is-active{
  border-color: #8b5cf6 !important;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.16) !important;
  color: #6d28d9 !important;
  background: #faf7ff !important;
}

#dfRegexDesignSection .df-rxv2-mode-tab-icon{
  display: inline-flex !important;
  width: 15px !important;
  height: 15px !important;
}

#dfRegexDesignSection .df-rxv2-mode-tab-icon svg{
  width: 100% !important;
  height: 100% !important;
}

#dfRegexDesignSection .df-rxv2-section-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#dfRegexDesignSection .df-rxv2-section-note{
  margin-top: -4px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#dfRegexDesignSection .df-rxv2-add-rule-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid #8b5cf6 !important;
  background: #fff !important;
  color: #7c3aed !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#dfRegexDesignSection .df-rxv2-add-rule-icon,
#dfRegexDesignSection .df-rxv2-copy-icon,
#dfRegexDesignSection .df-rxv2-add-another-icon{
  display: inline-flex !important;
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection .df-rxv2-add-rule-icon svg,
#dfRegexDesignSection .df-rxv2-copy-icon svg,
#dfRegexDesignSection .df-rxv2-add-another-icon svg{
  width: 100% !important;
  height: 100% !important;
}

#dfRegexDesignSection .df-rxv2-rule-list{
  display: grid !important;
  gap: 14px !important;
}

#dfRegexDesignSection .df-rxv2-rule-card{
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#dfRegexDesignSection .df-rxv2-rule-head{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#dfRegexDesignSection .df-rxv2-rule-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #7c4dff !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex: 0 0 auto !important;
}

#dfRegexDesignSection .df-rxv2-rule-title-wrap{
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#dfRegexDesignSection .df-rxv2-rule-title{
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#dfRegexDesignSection .df-rx-rule-delete{
  margin-left: auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #fff !important;
  color: #6b7280 !important;
}

#dfRegexDesignSection .df-rx-rule-delete svg{
  width: 14px !important;
  height: 14px !important;
}

#dfRegexDesignSection .df-rxv2-rule-preview{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#dfRegexDesignSection .df-rxv2-rule-preview::before{
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #f3f4f6, #e5e7eb) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35) !important;
}

#dfRegexDesignSection .df-rxv2-add-another{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px dashed #d8c9ff !important;
  border-radius: 14px !important;
  background: #fcfbff !important;
  color: #7c3aed !important;
  cursor: pointer !important;
  text-align: left !important;
}

#dfRegexDesignSection .df-rxv2-add-another-copy{
  display: grid !important;
  gap: 2px !important;
}

#dfRegexDesignSection .df-rxv2-add-another-copy strong{
  font-size: 13px !important;
  font-weight: 700 !important;
  color: inherit !important;
}

#dfRegexDesignSection .df-rxv2-add-another-copy small{
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #7c3aed !important;
}

#dfRegexDesignSection .df-rxv2-copy-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#dfRegexDesignSection .df-rxv2-copy-btn.is-copied{
  border-color: #8b5cf6 !important;
  color: #6d28d9 !important;
  background: #faf7ff !important;
}

#dfRegexDesignSection .field-group label,
#dfRegexDesignSection .df-rxv2-section .field-group label{
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4b5563 !important;
}

#dfRegexDesignSection select,
#dfRegexDesignSection input,
#dfRegexDesignSection textarea{
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
}

#dfRegexDesignSection select,
#dfRegexDesignSection input{
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection textarea{
  min-height: 92px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  resize: vertical !important;
}

#dfRegexDesignSection #dfRegexGeneratedExpression{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  color: #6d28d9 !important;
  font-weight: 700 !important;
  min-height: 88px !important;
}

#dfRegexDesignSection #dfRegexMessage{
  min-height: 88px !important;
  color: #111827 !important;
}

#dfRegexDesignSection .df-rxv2-help{
  margin-top: -2px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #6b7280 !important;
}

#dfRegexDesignSection .df-regex-chip{
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

@media (max-width: 720px){
  #dfRegexDesignSection .df-rxv2-mode-tabs{
    grid-template-columns: 1fr !important;
  }

  #dfRegexDesignSection .df-rxv2-section-head{
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Regex popup redesign v239 */
#dfRegexDesignSection.df-rxv3-root,
.editor-pane[data-pane="regex"] #dfRegexDesignSection.df-rxv3-root{
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell{
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section{
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-divider{
  height: 1px !important;
  margin: 16px 0 !important;
  background: #e6ebf2 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-input{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-track{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 42px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #cdd7e5 !important;
  transition: background .18s ease !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-knob{
  width: 18px !important;
  height: 18px !important;
  margin-left: 3px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16) !important;
  transition: transform .18s ease !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-input:checked + .df-rxv3-switch-track{
  background: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-input:checked + .df-rxv3-switch-track .df-rxv3-switch-knob{
  transform: translateX(18px) !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-copy{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label{
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status::before{
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status.is-enabled{
  color: #179c38 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status.is-disabled{
  color: #6b7280 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label{
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-note{
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #667085 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-head{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tabs{
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border-bottom: 1px solid #e6ebf2 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 2px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #1f2a44 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active{
  color: #1f6fff !important;
  font-weight: 700 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-separator{
  width: 1px !important;
  align-self: center !important;
  height: 28px !important;
  margin: 0 22px !important;
  background: #dbe3ef !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-preview-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-leading-icon{
  display: inline-flex !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab-icon svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action-icon svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field-icon svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-preview-icon svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-icon svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-leading-icon svg{
  width: 100% !important;
  height: 100% !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link{
  color: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action{
  color: #1f2a44 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost.is-copied{
  color: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action.is-danger{
  color: #e02424 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-list{
  display: grid !important;
  gap: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule{
  display: grid !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e6ebf2 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule:last-child{
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title-group{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #1f6fff !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title{
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider{
  width: 1px !important;
  height: 18px !important;
  background: #dbe3ef !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row-single{
  grid-template-columns: minmax(0, 1fr) !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block{
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block-wide{
  width: 100% !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label{
  display: block !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  border: 1px solid #d6deea !important;
  border-radius: 10px !important;
  background: #fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap.has-leading-icon{
  padding-left: 36px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-leading-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field-icon{
  position: absolute !important;
  left: 14px !important;
  color: #56627a !important;
  pointer-events: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field.is-code .df-rxv3-inline-field-icon{
  color: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block textarea,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input{
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select{
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 34px !important;
  cursor: pointer !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::after{
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid #24304a !important;
  border-bottom: 2px solid #24304a !important;
  transform: rotate(45deg) translateY(-2px) !important;
  pointer-events: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block textarea{
  min-height: 84px !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  resize: vertical !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input{
  padding-left: 44px !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedExpression{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  color: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-preview-row,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help{
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #667085 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-help.is-error{
  color: #b42318 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-help{
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: #667085 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-values-area{
  min-height: 88px !important;
  height: auto !important;
}

#dfRegexDesignSection.df-rxv3-root .df-regex-chip{
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid #d6deea !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer{
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding-bottom: 2px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn{
  min-width: 132px !important;
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: 1px solid #d6deea !important;
  background: #fff !important;
  color: #1f2a44 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  border-color: #1f6fff !important;
  background: #1f6fff !important;
  color: #fff !important;
}

@media (max-width: 900px){
  #dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
  #dfRegexDesignSection.df-rxv3-root .df-rxv3-section-head,
  #dfRegexDesignSection.df-rxv3-root .df-rxv3-footer{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tabs{
    flex-wrap: wrap !important;
  }

  #dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-separator{
    display: none !important;
  }
}


/* v243 compact target-match overrides */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell{
  gap: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section{
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-divider{
  margin: 14px 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-head{
  gap: 10px !important;
  align-items: flex-start !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-note{
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-rules{
  gap: 9px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-list{
  gap: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule{
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid #e7edf5 !important;
  border-radius: 8px !important;
  background: #fbfcff !important;
  overflow: hidden !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head{
  padding: 10px 14px !important;
  gap: 10px !important;
  border-bottom: 1px solid #edf2f7 !important;
  background: #fbfcff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title-group{
  gap: 9px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-badge{
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions{
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-body{
  display: grid !important;
  gap: 10px !important;
  padding: 12px 14px 12px !important;
  background: #fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row{
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block{
  gap: 6px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label{
  font-size: 12px !important;
  line-height: 1.3 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field{
  min-height: 38px !important;
  border-radius: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block textarea,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input{
  min-height: 36px !important;
  height: 36px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap.has-leading-icon{
  padding-left: 34px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-leading-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field-icon{
  left: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-preview-row,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help{
  gap: 6px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message{
  gap: 6px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field{
  padding: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input{
  padding-left: 40px !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedExpression,
#dfRegexDesignSection.df-rxv3-root #dfRegexMessage{
  min-height: 36px !important;
  height: 36px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer{
  gap: 10px !important;
  padding-bottom: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn{
  min-width: 116px !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  min-width: 136px !important;
}


/* v244 micro-fix: remove extra helper lines, relax icon spacing, reduce toggle label weight */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-rules .df-rxv3-section-note{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message .df-rxv3-help{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section{
  gap: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-copy{
  gap: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label{
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link{
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon{
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions{
  gap: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider{
  margin: 0 2px !important;
}



/* v245 typography-only pass: no functionality changes */
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title-text{
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #5b6472 !important;
  letter-spacing: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section{
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-copy{
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label{
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #4b5565 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status{
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section:has(> .df-rxv3-mode-tabs) > .df-rxv3-section-label{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link{
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab{
  color: #566074 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active{
  color: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost{
  color: #4b5565 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link{
  color: #1f6fff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action.is-danger{
  color: #ef4444 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block{
  gap: 5px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label{
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #8a93a3 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-preview-row,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-help{
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #8a93a3 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-leading-icon{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap.has-leading-icon{
  padding-left: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select{
  padding-left: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions{
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider{
  margin: 0 1px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon{
  width: 14px !important;
  height: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-rules .df-rxv3-section-note,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message .df-rxv3-help{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer{
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn{
  min-width: 90px !important;
  height: 31px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  min-width: 126px !important;
}


/* v246 spacing cleanup: UI-only */

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-list{
  gap: 8px !important;
  margin-bottom: 6px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule{
  border-radius: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head{
  padding-right: 18px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions{
  gap: 16px !important;
  padding-right: 2px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link{
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon{
  width: 15px !important;
  height: 15px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated .df-rxv3-section-head{
  padding-right: 3px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated .df-rxv3-inline-ghost{
  gap: 10px !important;
  padding-right: 2px !important;
}


/* v247 action polish: UI-only */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head{
  align-items: center !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions{
  gap: 8px !important;
  flex-wrap: nowrap !important;
  padding-right: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link{
  gap: 6px !important;
  line-height: 1.15 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon{
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider{
  width: 1px !important;
  height: 14px !important;
  margin: 0 6px 0 2px !important;
  background: rgba(138, 147, 163, 0.24) !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-rules{
  padding-bottom: 2px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-list{
  gap: 8px !important;
  margin-bottom: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule:last-child{
  margin-bottom: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated .df-rxv3-section-head{
  align-items: center !important;
  padding-right: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated .df-rxv3-inline-ghost{
  gap: 6px !important;
  padding-right: 6px !important;
}



/* === Basic popup layout alignment v249 (regex visual match, layout-only) === */
#dfFloatingInspector.df-fi-single-section[data-section="basic"]{
  width:620px !important;
  max-width:calc(100vw - 56px) !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:16px !important;
  box-shadow:0 18px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader{
  padding:18px 24px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:-0.01em !important;
  color:#1f2937 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-actions{
  gap:10px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-iconbtn{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  border-radius:10px !important;
  border:1px solid rgba(148,163,184,.24) !important;
  background:#ffffff !important;
  color:#334155 !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
  padding:20px 24px 22px !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiModeTabs,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-fi-group-label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiTabs,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiAuxTabs{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
  margin:0 0 22px !important;
  padding:0 0 20px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip{
  width:100% !important;
  min-height:42px !important;
  height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.26) !important;
  background:#ffffff !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  color:#4b5563 !important;
  white-space:nowrap !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip > span{
  display:inline-flex !important;
  align-items:center !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  accent-color:#2563eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .chip-icon,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row svg{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .chip-icon-danger{
  color:#ef4444 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"]{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px 32px !important;
  align-items:start !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact > .field-group.full,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact > .df-translation-custom-row,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact > .field-group:last-child{
  grid-column:1 / -1 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group{
  margin:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  margin:0 0 10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  color:#5b6473 !important;
  letter-spacing:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  min-height:44px !important;
  height:44px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  background:#ffffff !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:44px !important;
  color:#1f2937 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea{
  min-height:92px !important;
  height:auto !important;
  line-height:1.5 !important;
  padding:12px 16px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea::placeholder{
  color:#9aa4b2 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select{
  padding-right:40px !important;
  background-position:right 14px center !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-prop-helptext{
  margin-top:8px !important;
  font-size:12px !important;
  color:#7c8797 !important;
  line-height:1.45 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-row{
  margin-top:2px !important;
  padding-top:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-box{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:#4b5563 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-toggle input{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:4px !important;
  line-height:16px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  min-width:160px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .ghost-btn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .primary-btn{
  min-height:32px !important;
  height:32px !important;
  padding:0 24px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:32px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .ghost-btn{
  border:1px solid rgba(148,163,184,.28) !important;
  background:#ffffff !important;
  color:#334155 !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .primary-btn{
  border:1px solid transparent !important;
  background:#2563eb !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

@media (max-width: 760px){
  #dfFloatingInspector.df-fi-single-section[data-section="basic"]{
    width:min(620px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    right:12px !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
    grid-template-columns:1fr !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}@media (max-width: 720px){
  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
    grid-template-columns:1fr !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}



/* === Basic popup visual cleanup v250 (layout-only) === */
#dfFloatingInspector.df-fi-single-section[data-section="basic"]{
  width:540px !important;
  max-width:calc(100vw - 56px) !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:16px !important;
  box-shadow:0 12px 28px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.04) !important;
  overflow:hidden !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader{
  padding:14px 18px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title{
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
  color:#1f2937 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-actions{
  gap:8px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-iconbtn{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  border-radius:10px !important;
  border:1px solid rgba(148,163,184,.22) !important;
  background:#ffffff !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
  padding:14px 18px 16px !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
  margin:0 0 16px !important;
  padding:0 0 14px !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip{
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  gap:8px !important;
  font-size:12px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
  gap:14px 18px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  margin:0 0 8px !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  color:rgba(15,23,42,.62) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  background:#ffffff !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:40px !important;
  color:#1f2937 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea{
  min-height:80px !important;
  height:auto !important;
  line-height:1.45 !important;
  padding:10px 14px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select{
  padding-right:36px !important;
  background-position:right 12px center !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer{
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:14px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
}

.card.right-panel .editor-pane[data-pane="basic"] .df-basic-footer,
#selectedFieldPanel .editor-pane[data-pane="basic"] .df-basic-footer{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn{
  min-width:102px !important;
  height:30px !important;
  padding:0 18px !important;
  border-radius:10px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:30px !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn.ghost-btn{
  border:1px solid rgba(148,163,184,.28) !important;
  background:#ffffff !important;
  color:#334155 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn.primary-btn{
  border:1px solid transparent !important;
  background:#2563eb !important;
  color:#ffffff !important;
}

@media (max-width: 760px){
  #dfFloatingInspector.df-fi-single-section[data-section="basic"]{
    width:min(540px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    right:12px !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row,
  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
    grid-template-columns:1fr !important;
  }
}



#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldPanel .editor-pane[data-pane="basic"] .df-basic-footer,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer{
  display:flex !important;
}




/* === Basic popup shell swap v252 ===
   Why: make Basic use the same floating inspector shell/chrome as Regex,
   instead of a Basic-only outer shell treatment. Layout only. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"]{
  width:420px !important;
  max-width:calc(100vw - 56px) !important;
  background:#ffffff !important;
  border:1px solid rgba(148,163,184,.55) !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.12) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:hidden !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader{
  padding:8px 12px !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
  background:transparent !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title{
  font-weight:600 !important;
  color:rgba(15,23,42,.72) !important;
  font-size:12px !important;
  letter-spacing:0 !important;
  line-height:1.2 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-actions{
  gap:8px !important;
  justify-content:flex-start !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-iconbtn{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  border-radius:9px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  background:rgba(255,255,255,.88) !important;
  color:rgba(15,23,42,.72) !important;
  font-size:11px !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiBackBtn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiFwdBtn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiCloseBtn{
  display:inline-flex !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
  padding:10px !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer{
  margin-top:12px !important;
  padding-top:12px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer-btn{
  min-width:92px !important;
  height:30px !important;
  padding:0 16px !important;
  border-radius:9px !important;
  font-size:12px !important;
  line-height:30px !important;
}



/* === Basic popup shell hard swap v253 ===
   Why: user wants Basic to use the exact same outer container/chrome treatment as Regex.
   Only shell/container/layout is touched here.
*/
#dfFloatingInspector.df-fi-single-section[data-section="basic"]{
  background:#fff !important;
  border:0 !important;
  border-radius:0.125rem !important;
  box-shadow:0px 2px 4px -1px rgba(0,0,0,.07), 0px 4px 5px 0px rgba(0,0,0,.05), 0px 1px 10px 0px rgba(0,0,0,.03) !important;
  width:420px !important;
  max-width:calc(100vw - 56px) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"]::before,
#dfFloatingInspector.df-fi-single-section[data-section="basic"]::after{
  display:none !important;
  content:none !important;
  box-shadow:none !important;
  border:0 !important;
  background:transparent !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader{
  padding:0.875rem 1rem !important;
  border-bottom:1px solid rgba(24,28,33,.06) !important;
  background:#fff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title-text{
  color:#4E5155 !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-fi-body{
  padding:0 !important;
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-fi-nav-btn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-fi-close-btn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-iconbtn{
  border-radius:0.125rem !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
  margin:0 !important;
  padding:1rem !important;
  border-bottom:1px solid rgba(24,28,33,.06) !important;
  background:transparent !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip{
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  gap:8px !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:#4E5155 !important;
  border:1px solid rgba(148,163,184,.28) !important;
  background:#fff !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"]{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
  margin:0 !important;
  padding:1rem !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  gap:1rem 1rem !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  color:#4E5155 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  margin:0 0 8px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  background:#fff !important;
  box-shadow:none !important;
  font-size:12px !important;
  color:#334155 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea{
  min-height:80px !important;
  height:auto !important;
  padding:10px 14px !important;
  line-height:1.45 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer{
  display:flex !important;
  justify-content:flex-end !important;
  gap:10px !important;
  margin-top:12px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(24,28,33,.06) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer-btn{
  min-width:92px !important;
  height:30px !important;
  padding:0 16px !important;
  border-radius:10px !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:30px !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer-btn.ghost-btn{
  border:1px solid rgba(148,163,184,.28) !important;
  background:#fff !important;
  color:#334155 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer-btn.primary-btn{
  border:1px solid transparent !important;
  background:#2563eb !important;
  color:#fff !important;
}

@media (max-width:760px){
  #dfFloatingInspector.df-fi-single-section[data-section="basic"]{
    width:min(420px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    right:12px !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row,
  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
    grid-template-columns:1fr !important;
  }
}


/* Basic spacing polish v255.
   Why: give the Basic top pill row and footer the same breathing room as the cleaned Regex popup. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
  gap:14px !important;
  margin:0 0 18px !important;
  padding:4px 2px 16px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip{
  min-height:38px !important;
  height:38px !important;
  padding:0 14px !important;
  gap:9px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip .chip-icon,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip .chip-icon-danger{
  margin-right:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer{
  gap:12px !important;
  margin-top:16px !important;
  padding-top:16px !important;
  padding-right:2px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-basic-footer-btn{
  min-width:102px !important;
  height:32px !important;
  line-height:32px !important;
}


/* v277 exact regex target rebuild from v255 */
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root){
  width: 760px !important;
  min-width: 760px !important;
  max-width: 760px !important;
}
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiBackBtn,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiFwdBtn,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiBackBtn,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiFwdBtn{
  display: none !important;
}
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody{
  padding: 0 !important;
  background: #ffffff !important;
}
#dfRegexDesignSection.df-rxv3-root,
.df-regex-section.df-rxv3-root{
  margin: 0 !important;
  padding: 24px 28px 26px !important;
  border: 0 !important;
  background: #ffffff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell,
.df-regex-section.df-rxv3-root .df-rxv3-shell{
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section,
.df-regex-section.df-rxv3-root .df-rxv3-section{
  display: grid !important;
  gap: 12px !important;
  padding: 0 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-divider{
  height: 1px !important;
  margin: 22px 0 !important;
  background: #e6ebf2 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-section{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 40px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-copy,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-copy{
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-label{
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: #1f2a44 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-status,
.df-regex-section.df-rxv3-root .df-rxv3-status{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-status::before,
.df-regex-section.df-rxv3-root .df-rxv3-status::before{
  width: 10px !important;
  height: 10px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-status.is-enabled,
.df-regex-section.df-rxv3-root .df-rxv3-status.is-enabled{
  color: #24b047 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tabs,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tabs{
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-separator,
.df-regex-section.df-rxv3-root .df-rxv3-mode-separator{
  width: 1px !important;
  align-self: stretch !important;
  background: #e6ebf2 !important;
  margin: 0 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab{
  flex: 1 1 0 !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  gap: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border: 0 !important;
  background: transparent !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab.is-active{
  color: #2164ff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active::after,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab.is-active::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: #2164ff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab-icon,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab-icon{
  width: 18px !important;
  height: 18px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-head,
.df-regex-section.df-rxv3-root .df-rxv3-section-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-label{
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #1f2a44 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2164ff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link-icon{
  width: 18px !important;
  height: 18px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-list,
.df-regex-section.df-rxv3-root .df-rxv3-rule-list{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule,
.df-regex-section.df-rxv3-root .df-rxv3-rule{
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule::after,
.df-regex-section.df-rxv3-root .df-rxv3-rule::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 12px !important;
  pointer-events: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 16px 18px !important;
  background: #fbfcff !important;
  border-bottom: 1px solid #e6ebf2 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title-group,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title-group{
  gap: 14px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-badge,
.df-regex-section.df-rxv3-root .df-rxv3-rule-badge{
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title{
  font-size: 16px !important;
  font-weight: 700 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  width: 18px !important;
  height: 18px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn span:last-child,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn span:last-child{
  display: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider,
.df-regex-section.df-rxv3-root .df-rxv3-rule-action-divider{
  width: 1px !important;
  height: 22px !important;
  margin: 0 2px !important;
  background: #e6ebf2 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-body,
.df-regex-section.df-rxv3-root .df-rxv3-rule-body{
  display: grid !important;
  gap: 18px !important;
  padding: 18px 18px 20px !important;
  background: #ffffff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row,
.df-regex-section.df-rxv3-root .df-rxv3-form-row{
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 16px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-preview-row,
.df-regex-section.df-rxv3-root .df-rxv3-preview-row{
  display: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label,
.df-regex-section.df-rxv3-root .df-rxv3-field-block label{
  margin-bottom: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #667085 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block textarea,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root .df-rxv3-field-block input,
.df-regex-section.df-rxv3-root .df-rxv3-field-block textarea,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select{
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 16px !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: #223049 !important;
  background: #ffffff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap{
  min-height: 50px !important;
  border-radius: 12px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::after,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap::after{
  right: 16px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message,
.df-regex-section.df-rxv3-root .df-rxv3-section-generated,
.df-regex-section.df-rxv3-root .df-rxv3-section-message{
  gap: 10px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
.df-regex-section.df-rxv3-root .df-rxv3-inline-ghost{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2164ff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-inline-ghost .df-rxv3-inline-action-icon{
  width: 18px !important;
  height: 18px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain,
.df-regex-section.df-rxv3-root .df-rxv3-help-plain{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain .df-rxv3-help-icon,
.df-regex-section.df-rxv3-root .df-rxv3-help-plain .df-rxv3-help-icon{
  display: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field{
  min-height: 54px !important;
  border: 1px solid #d8e1ee !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field input{
  min-height: 54px !important;
  height: 54px !important;
  padding: 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 14px !important;
  color: #223049 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field-icon,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field-icon{
  display: none !important;
}
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedExpression,
.df-regex-section.df-rxv3-root #dfRegexGeneratedExpression{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  color: #1f6fff !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message .df-rxv3-help-plain,
.df-regex-section.df-rxv3-root .df-rxv3-section-message .df-rxv3-help-plain{
  margin-top: 4px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer,
.df-regex-section.df-rxv3-root .df-rxv3-footer{
  display: flex !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  padding-top: 2px !important;
  margin-top: 16px !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn{
  min-width: 124px !important;
  height: 44px !important;
  padding: 0 24px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  min-width: 170px !important;
}



/* v280 regex smaller-only from v277 base */
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root){
  transform: scale(0.84) !important;
  transform-origin: top left !important;
}


/* v281 regex compact centered modal */
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root){
  width: 560px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  max-height: min(78vh, calc(100vh - 48px)) !important;
  right: auto !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader{
  cursor: default !important;
}

#dfRegexDesignSection.df-rxv3-root,
.df-regex-section.df-rxv3-root{
  padding: 18px 20px 20px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell,
.df-regex-section.df-rxv3-root .df-rxv3-shell{
  display: grid !important;
  gap: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section,
.df-regex-section.df-rxv3-root .df-rxv3-section{
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-divider{
  margin: 16px 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-section{
  gap: 12px !important;
  min-height: 34px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-copy,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-copy{
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-track,
.df-regex-section.df-rxv3-root .df-rxv3-switch-track{
  width: 38px !important;
  height: 22px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-knob,
.df-regex-section.df-rxv3-root .df-rxv3-switch-knob{
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-label{
  font-size: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status,
.df-regex-section.df-rxv3-root .df-rxv3-status{
  gap: 8px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status::before,
.df-regex-section.df-rxv3-root .df-rxv3-status::before{
  width: 8px !important;
  height: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tabs,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tabs{
  border-radius: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab{
  min-height: 48px !important;
  padding: 0 14px !important;
  gap: 8px !important;
  font-size: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab-icon,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab-icon{
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-head,
.df-regex-section.df-rxv3-root .df-rxv3-section-head{
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-label{
  font-size: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link{
  gap: 8px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link-icon{
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule,
.df-regex-section.df-rxv3-root .df-rxv3-rule,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule::after,
.df-regex-section.df-rxv3-root .df-rxv3-rule::after{
  border-radius: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head{
  gap: 12px !important;
  padding: 12px 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title-group,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title-group{
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-badge,
.df-regex-section.df-rxv3-root .df-rxv3-rule-badge{
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title{
  font-size: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  width: 18px !important;
  height: 18px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider,
.df-regex-section.df-rxv3-root .df-rxv3-rule-action-divider{
  height: 18px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-body,
.df-regex-section.df-rxv3-root .df-rxv3-rule-body{
  gap: 14px !important;
  padding: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row,
.df-regex-section.df-rxv3-root .df-rxv3-form-row{
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label,
.df-regex-section.df-rxv3-root .df-rxv3-field-block label{
  margin-bottom: 8px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block textarea,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root .df-rxv3-field-block input,
.df-regex-section.df-rxv3-root .df-rxv3-field-block textarea,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select{
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap{
  min-height: 42px !important;
  border-radius: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::after,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap::after{
  right: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message,
.df-regex-section.df-rxv3-root .df-rxv3-section-generated,
.df-regex-section.df-rxv3-root .df-rxv3-section-message{
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
.df-regex-section.df-rxv3-root .df-rxv3-inline-ghost{
  gap: 6px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-inline-ghost .df-rxv3-inline-action-icon{
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain,
.df-regex-section.df-rxv3-root .df-rxv3-help-plain{
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field{
  min-height: 44px !important;
  border-radius: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field input{
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer,
.df-regex-section.df-rxv3-root .df-rxv3-footer{
  position: sticky !important;
  bottom: 0 !important;
  gap: 12px !important;
  padding-top: 12px !important;
  padding-bottom: 2px !important;
  margin-top: 12px !important;
  background: #ffffff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn{
  min-width: 104px !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  min-width: 132px !important;
}

@media (max-width: 640px){
  #dfFloatingInspector:has(#dfRegexDesignSection),
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root){
    max-width: calc(100vw - 24px) !important;
  }

  #dfRegexDesignSection.df-rxv3-root,
  .df-regex-section.df-rxv3-root{
    padding: 16px !important;
  }

  #dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section,
  .df-regex-section.df-rxv3-root .df-rxv3-toggle-section,
  #dfRegexDesignSection.df-rxv3-root .df-rxv3-section-head,
  .df-regex-section.df-rxv3-root .df-rxv3-section-head{
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  #dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row,
  .df-regex-section.df-rxv3-root .df-rxv3-form-row{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* v282 regex modal target-match */
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
#dfFloatingInspector.df-fi-single-section[data-section="regex"]{
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  max-height: calc(100vh - 48px) !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  color: #111827 !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  transform: none !important;
  transform-origin: center top !important;
  overflow: hidden !important;
  right: auto !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging{
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader{
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: default !important;
  user-select: none !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTitle,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTitle,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTitle{
  min-width: 0 !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) .df-fi-actions,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) .df-fi-actions,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] .df-fi-actions{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiBackBtn,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiFwdBtn,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiBackBtn,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiFwdBtn,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiBackBtn,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiFwdBtn{
  display: none !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiCloseBtn,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiCloseBtn,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiCloseBtn{
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border: 1px solid #d8dee8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #374151 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiCloseBtn:hover,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiCloseBtn:hover,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiCloseBtn:hover{
  background: #f9fafb !important;
  color: #111827 !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
  padding: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent::-webkit-scrollbar,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent::-webkit-scrollbar,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent::-webkit-scrollbar{
  width: 8px !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent::-webkit-scrollbar-thumb,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent::-webkit-scrollbar-thumb,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.16) !important;
  border-radius: 999px !important;
}

#dfRegexDesignSection.df-rxv3-root,
.df-regex-section.df-rxv3-root{
  margin: 0 !important;
  padding: 12px 20px 0 !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell,
.df-regex-section.df-rxv3-root .df-rxv3-shell{
  display: grid !important;
  gap: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section,
.df-regex-section.df-rxv3-root .df-rxv3-section{
  gap: 12px !important;
  padding: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-divider{
  height: 1px !important;
  margin: 12px 0 !important;
  background: #e5e7eb !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-section{
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch,
.df-regex-section.df-rxv3-root .df-rxv3-switch{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-input,
.df-regex-section.df-rxv3-root .df-rxv3-switch-input{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-track,
.df-regex-section.df-rxv3-root .df-rxv3-switch-track{
  width: 34px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #cfd6e4 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background .18s ease !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-knob,
.df-regex-section.df-rxv3-root .df-rxv3-switch-knob{
  width: 14px !important;
  height: 14px !important;
  margin-left: 2px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16) !important;
  transition: transform .18s ease !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-input:checked + .df-rxv3-switch-track,
.df-regex-section.df-rxv3-root .df-rxv3-switch-input:checked + .df-rxv3-switch-track{
  background: #2563eb !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-switch-input:checked + .df-rxv3-switch-track .df-rxv3-switch-knob,
.df-regex-section.df-rxv3-root .df-rxv3-switch-input:checked + .df-rxv3-switch-track .df-rxv3-switch-knob{
  transform: translateX(16px) !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-copy,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-copy{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-label{
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status,
.df-regex-section.df-rxv3-root .df-rxv3-status{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status::before,
.df-regex-section.df-rxv3-root .df-rxv3-status::before{
  width: 6px !important;
  height: 6px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status.is-enabled,
.df-regex-section.df-rxv3-root .df-rxv3-status.is-enabled{
  color: #16a34a !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status.is-disabled,
.df-regex-section.df-rxv3-root .df-rxv3-status.is-disabled{
  color: #667085 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tabs,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tabs{
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid #d8dee8 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-separator,
.df-regex-section.df-rxv3-root .df-rxv3-mode-separator{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab{
  flex: 1 1 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-right: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #374151 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab:last-of-type,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab:last-of-type{
  border-right: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab.is-active{
  color: #2563eb !important;
  font-weight: 600 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active::after,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab.is-active::after{
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: #2563eb !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-leading-icon,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab-icon,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link-icon,
.df-regex-section.df-rxv3-root .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-leading-icon{
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 auto !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-head,
.df-regex-section.df-rxv3-root .df-rxv3-section-head{
  min-height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-label{
  margin: 0 !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link,
.df-regex-section.df-rxv3-root .df-rxv3-inline-ghost,
.df-regex-section.df-rxv3-root .df-rxv3-inline-action{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2563eb !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action.is-danger,
.df-regex-section.df-rxv3-root .df-rxv3-inline-action.is-danger{
  color: #dc2626 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-rules,
.df-regex-section.df-rxv3-root .df-rxv3-section-rules{
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-list,
.df-regex-section.df-rxv3-root .df-rxv3-rule-list{
  display: grid !important;
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule,
.df-regex-section.df-rxv3-root .df-rxv3-rule{
  border: 1px solid #d8dee8 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head{
  min-height: 40px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title-group,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title-group{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-badge,
.df-regex-section.df-rxv3-root .df-rxv3-rule-badge{
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title{
  color: #374151 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider,
.df-regex-section.df-rxv3-root .df-rxv3-rule-action-divider{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #374151 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn.is-danger,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn[data-regex-remove-rule],
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn.is-danger,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn[data-regex-remove-rule]{
  color: #dc2626 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-body,
.df-regex-section.df-rxv3-root .df-rxv3-rule-body{
  padding: 10px 12px 12px !important;
  display: grid !important;
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row,
.df-regex-section.df-rxv3-root .df-rxv3-form-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row-single,
.df-regex-section.df-rxv3-root .df-rxv3-form-row-single{
  grid-template-columns: 1fr !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block,
.df-regex-section.df-rxv3-root .df-rxv3-field-block{
  min-width: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label,
.df-regex-section.df-rxv3-root .df-rxv3-field-block label{
  display: block !important;
  margin: 0 0 6px !important;
  color: #4b5563 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 14px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-leading-icon,
.df-regex-section.df-rxv3-root .df-rxv3-leading-icon{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap{
  position: relative !important;
  min-height: 32px !important;
  border: 1px solid #d8dee8 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::after,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap::after{
  content: "" !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 13px !important;
  height: 13px !important;
  margin-top: -6.5px !important;
  pointer-events: none !important;
  background: center / 13px 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M3.25 5.2L6.5 8.45L9.75 5.2' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block textarea,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input,
.df-regex-section.df-rxv3-root .df-rxv3-field-block input,
.df-regex-section.df-rxv3-root .df-rxv3-field-block textarea,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field input{
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 1px solid #d8dee8 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 32px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 30px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select:hover,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select:focus,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select:hover,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select:focus{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field{
  min-height: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-help,
.df-regex-section.df-rxv3-root .df-rxv3-help{
  color: #667085 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-help.is-error,
.df-regex-section.df-rxv3-root .df-rxv3-help.is-error{
  color: #b42318 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated,
.df-regex-section.df-rxv3-root .df-rxv3-section-generated{
  margin-top: 2px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field.is-code input,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field.is-code input{
  color: #2563eb !important;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexMessage::placeholder,
.df-regex-section.df-rxv3-root #dfRegexMessage::placeholder{
  color: #98a2b3 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer,
.df-regex-section.df-rxv3-root .df-rxv3-footer{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 10px 20px !important;
  margin: 12px -20px 0 !important;
  border-top: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn{
  height: 30px !important;
  min-width: 92px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
  border: 1px solid #d8dee8 !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 28px !important;
  box-shadow: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  border-color: #2563eb !important;
  background: #2563eb !important;
  color: #ffffff !important;
}

@media (max-width: 520px){
  #dfFloatingInspector:has(#dfRegexDesignSection),
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
  #dfFloatingInspector.df-fi-single-section[data-section="regex"]{
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }

  #dfRegexDesignSection.df-rxv3-root,
  .df-regex-section.df-rxv3-root{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #dfRegexDesignSection.df-rxv3-root .df-rxv3-footer,
  .df-regex-section.df-rxv3-root .df-rxv3-footer{
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #dfRegexDesignSection.df-rxv3-root .df-rxv3-form-row,
  .df-regex-section.df-rxv3-root .df-rxv3-form-row{
    grid-template-columns: 1fr !important;
  }
}


/* v283 regex modal polish fixes
   Why: restore drag, icon visibility, compact select arrows, and equal footer buttons. */
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader{
  cursor: grab !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging #dfFloatingInspectorHeader{
  cursor: grabbing !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  line-height: 0 !important;
  flex: 0 0 16px !important;
  cursor: pointer !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon svg{
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  overflow: visible !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn:hover,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn:hover{
  opacity: .9 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap{
  overflow: hidden !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::before,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap::before{
  content: "" !important;
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  right: 31px !important;
  width: 1px !important;
  background: #e5e7eb !important;
  pointer-events: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::after,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap::after{
  right: 10px !important;
  width: 10px !important;
  height: 10px !important;
  margin-top: -5px !important;
  background: center / 10px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.75L5 6.75L8 3.75' stroke='%234b5563' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select:hover,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select:focus,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select:hover,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select:focus{
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 40px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select::-ms-expand,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select::-ms-expand{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  min-width: 92px !important;
  width: auto !important;
}


/* v284 regex modal visibility/drag cleanup
   Why: keep the popup draggable without pointer-capture glitches and make icon/select chrome render exactly. */
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
#dfFloatingInspector.df-fi-single-section[data-section="regex"]{
  border: 0 !important;
  outline: 0 !important;
  background-clip: padding-box !important;
  will-change: auto !important;
  contain: none !important;
  isolation: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
  background: transparent !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent{
  background: #ffffff !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  min-width: 52px !important;
  flex: 0 0 auto !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  opacity: 1 !important;
  visibility: visible !important;
  color: #374151 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn.is-danger,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn[data-regex-remove-rule],
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn.is-danger,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn[data-regex-remove-rule]{
  color: #dc2626 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn > span.df-rxv3-inline-action-icon:last-child,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn > span.df-rxv3-inline-action-icon:last-child{
  display: inline-flex !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  color: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn svg path,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn svg path{
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap{
  border: 1px solid #d8dee8 !important;
  box-shadow: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::before,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap::before{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap::after,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap::after{
  right: 11px !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: -4.5px !important;
  background: center / 9px 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath d='M2 3.2L4.5 5.7L7 3.2' stroke='%234b5563' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select:hover,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select:focus,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select:hover,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select:focus{
  padding-right: 26px !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader{
  cursor: grab !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging #dfFloatingInspectorHeader{
  cursor: grabbing !important;
}


/* v285 regex modal shell/cursor/icon cleanup
   Why: flatten the outer inspector shell, switch drag cursor to move, loosen rule actions, and widen to 460px. */
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
#dfFloatingInspector.df-fi-single-section[data-section="regex"]{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: min(78vh, calc(100vh - 48px)) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.12)) !important;
  overflow: visible !important;
  right: auto !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging{
  box-shadow: none !important;
  filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.12)) !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 6px 6px 0 0 !important;
  cursor: move !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging #dfFloatingInspectorHeader{
  cursor: move !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-top: 0 !important;
  border-radius: 0 0 6px 6px !important;
  overflow: hidden !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent{
  width: 100% !important;
  background: transparent !important;
}

#dfRegexDesignSection.df-rxv3-root,
.df-regex-section.df-rxv3-root,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell,
.df-regex-section.df-rxv3-root .df-rxv3-shell{
  width: 100% !important;
  max-width: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head{
  padding-right: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  min-width: 0 !important;
  gap: 14px !important;
  padding-left: 8px !important;
  padding-right: 2px !important;
  margin-right: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 560px){
  #dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
  #dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
  #dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }
}



/* v286 regex modal hard flatten + drag cursor fix
   Why: the old .editor-pane[data-pane="regex"] shell styles were still winning in some states,
   leaving a visible outer box and a grab cursor. This forces the outer shell to be invisible,
   fixes width on the actual floating container, and loosens the rule action icons. */
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]),
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
#dfFloatingInspector.df-fi-single-section[data-section="regex"]{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  height: auto !important;
  max-height: min(78vh, calc(100vh - 48px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  contain: none !important;
  isolation: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]).df-fi-dragging,
#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging{
  box-shadow: none !important;
  filter: none !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  clip-path: inset(0 0 -40px 0 round 6px 6px 0 0) !important;
  cursor: move !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title{
  cursor: move !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorBody,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-top: 0 !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFiTabContent,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFiModeTabs,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .df-fi-group-label,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFiTabs,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFiAuxTabs,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiModeTabs,
#dfFloatingInspector:has(#dfRegexDesignSection) .df-fi-group-label,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabs,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiAuxTabs,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiModeTabs,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) .df-fi-group-label,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabs,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiAuxTabs,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiModeTabs,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] .df-fi-group-label,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabs,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiAuxTabs{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head{
  padding-right: 24px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  min-width: 0 !important;
  gap: 16px !important;
  padding-left: 12px !important;
  padding-right: 6px !important;
  margin-right: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 560px){
  #dfFloatingInspector:has(.editor-pane[data-pane="regex"]),
  #dfFloatingInspector:has(#dfRegexDesignSection),
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
  #dfFloatingInspector.df-fi-single-section[data-section="regex"],
  #dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorBody,
  #dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
  #dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
  #dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }
}



/* v287 regex shell tighten
   Why: keep the existing inspector shell, but make it wrap the regex content much tighter,
   remove the extra blank frame feeling, keep the drag cursor visible, and loosen rule icons. */
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]),
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
#dfFloatingInspector.df-fi-single-section[data-section="regex"]{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  height: auto !important;
  max-height: calc(100vh - 32px) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  cursor: default !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(#dfRegexDesignSection).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root).df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"].df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title{
  cursor: default !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorBody,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
  width: 460px !important;
  min-width: 460px !important;
  max-width: 460px !important;
  height: auto !important;
  max-height: calc(100vh - 76px) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 auto !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-top: 0 !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  overflow: hidden !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFiTabContent,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent{
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 76px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex: 0 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #ffffff !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .editor-pane[data-pane="regex"],
#dfFloatingInspector:has(#dfRegexDesignSection) .editor-pane[data-pane="regex"],
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) .editor-pane[data-pane="regex"],
#dfFloatingInspector.df-fi-single-section[data-section="regex"] .editor-pane[data-pane="regex"]{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  display: block !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .editor-pane[data-pane="regex"] .prop-grid,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .editor-pane[data-pane="regex"] .df-prop-grid-compact,
#dfFloatingInspector:has(#dfRegexDesignSection) .editor-pane[data-pane="regex"] .prop-grid,
#dfFloatingInspector:has(#dfRegexDesignSection) .editor-pane[data-pane="regex"] .df-prop-grid-compact,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) .editor-pane[data-pane="regex"] .prop-grid,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) .editor-pane[data-pane="regex"] .df-prop-grid-compact,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] .editor-pane[data-pane="regex"] .prop-grid,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] .editor-pane[data-pane="regex"] .df-prop-grid-compact{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  background: transparent !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) .editor-pane[data-pane="regex"] .field-group.full.df-regex-section.df-rxv3-root,
#dfFloatingInspector:has(#dfRegexDesignSection) .field-group.full.df-regex-section.df-rxv3-root,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) .field-group.full.df-regex-section.df-rxv3-root,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] .field-group.full.df-regex-section.df-rxv3-root{
  width: 100% !important;
  margin: 0 !important;
  grid-column: auto !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head{
  padding-right: 18px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  gap: 18px !important;
  padding-left: 14px !important;
  padding-right: 8px !important;
}

@media (max-width: 560px){
  #dfFloatingInspector:has(.editor-pane[data-pane="regex"]),
  #dfFloatingInspector:has(#dfRegexDesignSection),
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
  #dfFloatingInspector.df-fi-single-section[data-section="regex"],
  #dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorBody,
  #dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
  #dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader,
  #dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
  #dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
  #dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody{
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }
}


/* v288 regex shell shadow removal
   Why: the remaining "dark stuff" is the header/body box-shadow halo from the floating inspector shell.
   Keep the current shell structure, but remove the shell shadow/filter completely so only a flat card remains. */
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]),
#dfFloatingInspector:has(#dfRegexDesignSection),
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root),
#dfFloatingInspector.df-fi-single-section[data-section="regex"]{
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorBody,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorBody,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorBody,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFiTabContent,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTabContent,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTabContent,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTabContent{
  filter: none !important;
  box-shadow: none !important;
}

#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader{
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

#dfRegexDesignSection.df-rxv3-root,
.df-regex-section.df-rxv3-root,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell,
.df-regex-section.df-rxv3-root .df-rxv3-shell{
  filter: none !important;
  box-shadow: none !important;
}


/* v290 regex popup typography refresh
   Why: app-font matching looked too generic in the compact modal. Give the popup its own cleaner hierarchy. */
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader,
#dfRegexDesignSection.df-rxv3-root,
#dfRegexDesignSection.df-rxv3-root *,
.df-regex-section.df-rxv3-root,
.df-regex-section.df-rxv3-root *{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedExpression,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field.is-code input,
.df-regex-section.df-rxv3-root #dfRegexGeneratedExpression,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field.is-code input{
  font-family: "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

#dfFiTitle,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTitle,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTitle,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTitle{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  color: #374151 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
.df-regex-section.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn{
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-label{
  font-weight: 600 !important;
  color: #111827 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-status,
.df-regex-section.df-rxv3-root .df-rxv3-status{
  font-size: 11px !important;
  font-weight: 500 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-label{
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title{
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  letter-spacing: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-help,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-note,
.df-regex-section.df-rxv3-root .df-rxv3-help,
.df-regex-section.df-rxv3-root .df-rxv3-help-plain,
.df-regex-section.df-rxv3-root .df-rxv3-section-note{
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #667085 !important;
  letter-spacing: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label,
#dfRegexDesignSection.df-rxv3-root .field-group label,
.df-regex-section.df-rxv3-root label,
.df-regex-section.df-rxv3-root .df-rxv3-field-block label,
.df-regex-section.df-rxv3-root .field-group label{
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 14px !important;
  color: #4b5563 !important;
  letter-spacing: 0 !important;
}

#dfRegexDesignSection.df-rxv3-root input,
#dfRegexDesignSection.df-rxv3-root select,
#dfRegexDesignSection.df-rxv3-root textarea,
.df-regex-section.df-rxv3-root input,
.df-regex-section.df-rxv3-root select,
.df-regex-section.df-rxv3-root textarea{
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #111827 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab{
  font-weight: 600 !important;
  color: #374151 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active,
.df-regex-section.df-rxv3-root .df-rxv3-mode-tab.is-active{
  color: #2563eb !important;
  font-weight: 600 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
.df-regex-section.df-rxv3-root .df-rxv3-primary-link{
  font-weight: 500 !important;
  color: #2563eb !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn{
  font-weight: 600 !important;
  line-height: 1 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary,
.df-regex-section.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  color: #ffffff !important;
}

/* v291: regex header matches right-panel "Display Name" label typography */
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(.editor-pane[data-pane="regex"]) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title-text{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(15, 23, 42, 0.75) !important;
}


/* Patch v292: apply right-panel Display Name typography across the regex popup.
   Why: user wants the popup text to use the same Display Name font style everywhere,
   while preserving existing accent colors such as active blue, enabled green, and danger red. */
#dfRegexDesignSection.df-rxv3-root,
#dfRegexDesignSection.df-rxv3-root *,
.df-regex-section.df-rxv3-root,
.df-regex-section.df-rxv3-root *{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
}

#dfRegexDesignSection.df-rxv3-root :is(
  .df-rxv3-toggle-label,
  .df-rxv3-status,
  .df-rxv3-mode-tab,
  .df-rxv3-primary-link,
  .df-rxv3-inline-action,
  .df-rxv3-footer-btn,
  .df-rxv3-rule-title,
  .df-rxv3-section-label,
  .df-rxv3-section-note,
  .df-rxv3-help,
  .df-rxv3-help-plain,
  .df-rxv3-field-help,
  .df-rxv3-inline-field input,
  .df-rxv3-inline-field textarea,
  .df-rxv3-select-wrap select,
  #dfRegexGeneratedExpression,
  input,
  textarea,
  select,
  button,
  label,
  span,
  small,
  strong,
  a,
  div
),
.df-regex-section.df-rxv3-root :is(
  .df-rxv3-toggle-label,
  .df-rxv3-status,
  .df-rxv3-mode-tab,
  .df-rxv3-primary-link,
  .df-rxv3-inline-action,
  .df-rxv3-footer-btn,
  .df-rxv3-rule-title,
  .df-rxv3-section-label,
  .df-rxv3-section-note,
  .df-rxv3-help,
  .df-rxv3-help-plain,
  .df-rxv3-field-help,
  .df-rxv3-inline-field input,
  .df-rxv3-inline-field textarea,
  .df-rxv3-select-wrap select,
  #dfRegexGeneratedExpression,
  input,
  textarea,
  select,
  button,
  label,
  span,
  small,
  strong,
  a,
  div
){
  font-weight: 600 !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFiTitle,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFiTitle,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFiTitle,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector:has(.df-regex-section.df-rxv3-root) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title-text{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
}



/* Patch v293: apply exact right-panel "Display Name" typography across the rendered regex popup.
   Why: v292 targeted the regex root, but many popup nodes still had stronger legacy size/weight rules.
   This pass overrides the actual rendered regex nodes with the same font metrics as .field-group label. */
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title-text,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-status,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-help,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-caption,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field textarea,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
#dfRegexDesignSection.df-rxv3-root button,
#dfRegexDesignSection.df-rxv3-root input,
#dfRegexDesignSection.df-rxv3-root textarea,
#dfRegexDesignSection.df-rxv3-root select{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedExpression,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-code-field,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-generated-regex{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
}

#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title-text,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-caption,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
#dfRegexDesignSection.df-rxv3-root button,
#dfRegexDesignSection.df-rxv3-root input,
#dfRegexDesignSection.df-rxv3-root textarea,
#dfRegexDesignSection.df-rxv3-root select{
  color: rgba(15, 23, 42, 0.75) !important;
}

/* Preserve popup accent colors after the typography override. */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  color: #2563eb !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-status.is-enabled{
  color: #16a34a !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action.is-delete,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action.is-delete *{
  color: #dc2626 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary{
  color: #ffffff !important;
}



/* Patch v294: exact "Display Name" label typography everywhere in regex popup.
   Why: v291-v293 used the wrong target metrics (11/700). The actual right-panel
   "Display Name" label is 12px / 600 / 16px with rgba(15,23,42,.78). */
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader .df-fi-title-text,
#dfRegexDesignSection.df-rxv3-root,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-shell,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-copy,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-status,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-caption,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field textarea,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn,
#dfRegexDesignSection.df-rxv3-root button,
#dfRegexDesignSection.df-rxv3-root input,
#dfRegexDesignSection.df-rxv3-root textarea,
#dfRegexDesignSection.df-rxv3-root select {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(15, 23, 42, 0.78) !important;
}

/* Keep semantic accents after the blanket typography override. */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-mode-tab.is-active,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-primary-link,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-ghost[data-regex-copy-generated],
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action.is-copy {
  color: #2563eb !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-status.is-enabled {
  color: #16a34a !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action.is-delete,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action.is-delete * {
  color: #dc2626 !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer-btn.is-primary * {
  color: #ffffff !important;
}


/* Patch v295: mixed native app typography mapping.
   Why: user wants popup header left as-is, selected structural labels to match the
   right-rail "UsedClass Manager" style, and dropdown text to match "(Read Only)". */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block > label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain span,
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp,
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp span{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(15, 23, 42, 0.78) !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root select[data-regex-rule-type],
#dfRegexDesignSection.df-rxv3-root select[data-regex-allow-set],
#dfRegexDesignSection.df-rxv3-root select[data-regex-count-set],
#dfRegexDesignSection.df-rxv3-root #dfRegexPreset{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.58) !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexMessage::placeholder,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input::placeholder,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field textarea::placeholder{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  color: rgba(15, 23, 42, 0.58) !important;
}


/* Patch v296: exact native typography mapping requested by user.
   Why: "UsedClass Manager" does not use the earlier Roboto 10px token.
   In the live right rail it is overridden later to the app header style:
   SF Pro/Segoe UI/Roboto, 13px, 600, rgba(60,60,67,.88).
   "Read Only" keeps the lighter 11px/400 muted support style. */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block > label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-help-plain span,
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp,
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field .df-rxv3-field-caption {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: .01em !important;
  color: rgba(60, 60, 67, .88) !important;
  text-transform: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root select[data-regex-rule-type],
#dfRegexDesignSection.df-rxv3-root select[data-regex-allow-set],
#dfRegexDesignSection.df-rxv3-root select[data-regex-count-set],
#dfRegexDesignSection.df-rxv3-root #dfRegexPreset,
#dfRegexDesignSection.df-rxv3-root #dfRegexMessage,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field textarea {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.58) !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexMessage::placeholder,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input::placeholder,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field textarea::placeholder {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.58) !important;
}



/* Patch v297: exact typography mapping from the user's last screenshot.
   Why: only these popup labels should match the right-panel "Display Name" label,
   while secondary helper/value text should match the right-panel "(Read Only)" text. */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-rules > .df-rxv3-section-head .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated > .df-rxv3-section-head .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message > .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-rules > .df-rxv3-section-head .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-generated > .df-rxv3-section-head .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-message > .df-rxv3-section-label{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: rgba(15,23,42,.75) !important;
  text-transform: none !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp,
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp span,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-select-wrap select,
#dfRegexDesignSection.df-rxv3-root select[data-regex-rule-type],
#dfRegexDesignSection.df-rxv3-root select[data-regex-allow-set],
#dfRegexDesignSection.df-rxv3-root select[data-regex-count-set],
#dfRegexDesignSection.df-rxv3-root #dfRegexPreset,
#dfRegexDesignSection.df-rxv3-root #dfRegexMessage::placeholder,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field input::placeholder,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-field textarea::placeholder,
.df-regex-section.df-rxv3-root #dfRegexGeneratedHelp,
.df-regex-section.df-rxv3-root #dfRegexGeneratedHelp span,
.df-regex-section.df-rxv3-root .df-rxv3-select-wrap select,
.df-regex-section.df-rxv3-root select[data-regex-rule-type],
.df-regex-section.df-rxv3-root select[data-regex-allow-set],
.df-regex-section.df-rxv3-root select[data-regex-count-set],
.df-regex-section.df-rxv3-root #dfRegexPreset,
.df-regex-section.df-rxv3-root #dfRegexMessage::placeholder,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field input::placeholder,
.df-regex-section.df-rxv3-root .df-rxv3-inline-field textarea::placeholder{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: var(--muted, #6e6e73) !important;
  text-transform: none !important;
}


/* Patch v298: exact user-requested typography/display mapping only.
   Why: only the three section labels should match the right-panel Display Name title,
   only the generated helper should match Selected XML subtitle,
   the regex-enabled row must stay enabled but be hidden, and Copy must be removed. */

/* 1) Display Name style for: Rules, Generated regex, Error message shown to user */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-rules > .df-rxv3-section-head .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-generated > .df-rxv3-section-head .df-rxv3-section-label,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message > .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-rules > .df-rxv3-section-head .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-generated > .df-rxv3-section-head .df-rxv3-section-label,
.df-regex-section.df-rxv3-root .df-rxv3-section-message > .df-rxv3-section-label{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.78) !important;
  text-transform: none !important;
}

/* 2) Selected XML sub style for: Live generated from Rule 1. */
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp,
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp span,
.df-regex-section.df-rxv3-root #dfRegexGeneratedHelp,
.df-regex-section.df-rxv3-root #dfRegexGeneratedHelp span{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.58) !important;
  text-transform: none !important;
}

/* 3) Hide Regex validation / Enabled row entirely, and hide its following divider */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-row,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-row{
  display: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-row + .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-row + .df-rxv3-divider{
  display: none !important;
}

/* 4) Remove Copy from Generated regex */
#dfRegexDesignSection.df-rxv3-root [data-regex-copy-generated],
.df-regex-section.df-rxv3-root [data-regex-copy-generated]{
  display: none !important;
}


/* Patch v300: only the user-requested follow-up adjustments.
   Why: keep the visible toggle row, match Rule 1 / Constraint / Character set
   to the same font size as "Generated regex", and place the generated help below the field. */

/* 1) Keep the regex validation row visible in this base. */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-row,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-row{
  display: flex !important;
  align-items: center !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-row + .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-row + .df-rxv3-divider{
  display: block !important;
}

/* 2) Size only: Rule 1 / Constraint / Character set should match "Generated regex". */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-field-block label,
.df-regex-section.df-rxv3-root .df-rxv3-field-block label{
  font-size: 12px !important;
}

/* 3) Keep the generated helper below the regex field with a small top gap. */
#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedHelp,
.df-regex-section.df-rxv3-root #dfRegexGeneratedHelp{
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}



/* v302: rebuild rule header action block from screenshot target */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  min-height: 40px !important;
  padding: 0 0 0 12px !important;
  background: #f3f4f6 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-title-group,
.df-regex-section.df-rxv3-root .df-rxv3-rule-title-group{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-self: stretch !important;
  gap: 0 !important;
  padding: 0 10px 0 12px !important;
  margin-left: 12px !important;
  border-left: 1px solid #e5e7eb !important;
  background: transparent !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #475467 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-inline-action.is-danger.df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-inline-action.is-danger.df-rxv3-rule-iconbtn{
  color: #ef4444 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn svg,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn svg path,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn svg path{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider,
.df-regex-section.df-rxv3-root .df-rxv3-rule-action-divider{
  display: block !important;
  width: 1px !important;
  height: 20px !important;
  margin: 0 10px !important;
  background: #d7dde6 !important;
  align-self: center !important;
}



/* v303: remove bottom divider/border lines and enlarge rule action icons slightly */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-footer,
.df-regex-section.df-rxv3-root .df-rxv3-footer{
  border-top: 0 !important;
  margin-top: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-section-message + .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-section-message + .df-rxv3-divider{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  padding-left: 14px !important;
  padding-right: 12px !important;
  min-width: 84px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  width: 18px !important;
  height: 18px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider,
.df-regex-section.df-rxv3-root .df-rxv3-rule-action-divider{
  height: 22px !important;
  margin: 0 12px !important;
}


/* v306 icon-only bump */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  flex: 0 0 34px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon{
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg{
  width: 20px !important;
  height: 20px !important;
  overflow: visible !important;
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg path,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg path{
  stroke-width: 2.15 !important;
}


/* v308 icon slightly smaller + generated field grey */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  gap: 8px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn svg{
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider,
.df-regex-section.df-rxv3-root .df-rxv3-rule-action-divider{
  height: 20px !important;
  margin: 0 1px !important;
}

#dfRegexDesignSection.df-rxv3-root #dfRegexGeneratedExpression,
.df-regex-section.df-rxv3-root #dfRegexGeneratedExpression{
  background: #f3f4f6 !important;
}


/* v309 icon slightly smaller + lighter */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn svg{
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg{
  transform: scale(1) !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg path,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg path{
  stroke-width: 1.85 !important;
}


/* Patch v310: slightly smaller/lighter rule icons + hide regex validation row visually only. */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-row,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-row{
  display: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-row + .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-row + .df-rxv3-divider{
  display: none !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-actions,
.df-regex-section.df-rxv3-root .df-rxv3-rule-actions{
  min-width: 72px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn{
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-iconbtn svg{
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg{
  transform: scale(1) !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg path,
#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg rect,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg path,
.df-regex-section.df-rxv3-root .df-rxv3-rule-head .df-rxv3-rule-iconbtn svg rect{
  stroke-width: 1.6 !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-rule-action-divider,
.df-regex-section.df-rxv3-root .df-rxv3-rule-action-divider{
  height: 18px !important;
  margin: 0 2px !important;
}


/* v311: hide regex validation row visually while keeping logic intact */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-section{
  display: none !important;
}
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section + .df-rxv3-divider,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-section + .df-rxv3-divider{
  display: none !important;
}


/* v312: restore top breathing room after hiding the regex toggle row */
#dfRegexDesignSection.df-rxv3-root .df-rxv3-toggle-section + .df-rxv3-divider + .df-rxv3-section,
.df-regex-section.df-rxv3-root .df-rxv3-toggle-section + .df-rxv3-divider + .df-rxv3-section{
  padding-top: 10px !important;
}



/* === Basic popup shell parity with final regex popup v314 === */
#dfFloatingInspector.df-fi-single-section[data-section="basic"]{
  width:474px !important;
  max-width:calc(100vw - 32px) !important;
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  background:#ffffff !important;
  box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
  overflow:hidden !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiBackBtn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiFwdBtn{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader{
  padding:12px 18px !important;
  border-bottom:1px solid #e5e7eb !important;
  background:#ffffff !important;
  cursor:move !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title{
  font-size:12px !important;
  font-weight:700 !important;
  line-height:16px !important;
  letter-spacing:0 !important;
  color:#344054 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-actions{
  gap:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-iconbtn{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  padding:0 !important;
  border-radius:8px !important;
  border:1px solid #d8dee8 !important;
  background:#ffffff !important;
  color:#344054 !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
  padding:14px 18px 16px !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiModeTabs,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .df-fi-group-label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiTabs,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFiAuxTabs{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
  align-items:stretch !important;
  margin:0 0 18px !important;
  padding:0 0 18px !important;
  border-bottom:1px solid #e5e7eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip{
  width:100% !important;
  min-height:42px !important;
  height:42px !important;
  padding:0 14px !important;
  border-radius:12px !important;
  border:1px solid #d8dee8 !important;
  background:#ffffff !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1 !important;
  color:#374151 !important;
  white-space:nowrap !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  accent-color:#2563eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .chip-icon,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row svg{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .chip-icon-danger{
  color:#ef4444 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"]{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:16px 22px !important;
  align-items:start !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact > .field-group.full,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact > .df-translation-custom-row,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact > .field-group:last-child{
  grid-column:1 / -1 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group{
  margin:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-row > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  display:block !important;
  margin:0 0 8px !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:16px !important;
  color:#344054 !important;
  letter-spacing:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  min-height:40px !important;
  height:40px !important;
  padding:0 16px !important;
  border-radius:12px !important;
  border:1px solid #d8dee8 !important;
  background:#ffffff !important;
  box-shadow:none !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:40px !important;
  color:#344054 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea::placeholder{
  color:#98a2b3 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select{
  padding-right:38px !important;
  background-position:right 12px center !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer{
  display:flex !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin-top:18px !important;
  padding-top:14px !important;
  border-top:1px solid #e5e7eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn{
  min-width:96px !important;
  height:30px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:30px !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn.ghost-btn{
  border:1px solid #d8dee8 !important;
  background:#ffffff !important;
  color:#111827 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn.primary-btn{
  border:1px solid #2563eb !important;
  background:#2563eb !important;
  color:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-row{
  margin-top:-2px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-box{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  padding:14px !important;
  border:1px solid #e5e7eb !important;
  background:#f8fafc !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  font-size:11px !important;
  font-weight:600 !important;
  color:#344054 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-toggle input{
  width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  accent-color:#2563eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:nowrap !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline[hidden]{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  margin:0 !important;
  min-width:64px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  display:inline-flex !important;
  align-items:center !important;
  min-width:140px !important;
  width:140px !important;
  padding:0 16px !important;
  background:#ffffff !important;
  color:#667085 !important;
  font-family:inherit !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
}

@media (max-width: 760px){
  #dfFloatingInspector.df-fi-single-section[data-section="basic"]{
    width:min(474px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    right:12px !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
    grid-template-columns:1fr !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .prop-grid.df-prop-grid-compact{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline{
    flex-wrap:wrap !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
    width:100% !important;
    min-width:0 !important;
  }
}


/* v315 basic typography parity with regex */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title-text{
  font-size:11.5px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
  color:#5b6472 !important;
  letter-spacing:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip > span,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-row > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  font-size:12px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  color:#111827 !important;
  letter-spacing:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  color:#111827 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea::placeholder{
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  color:#98a2b3 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-prop-helptext,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-note{
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  color:#667085 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .ghost-btn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .primary-btn{
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  font-family: inherit !important;
}


/* v316 basic shell cleanup + alignment + typography parity */
#dfFloatingInspector.df-fi-single-section[data-section="basic"]{
  width:474px !important;
  max-width:calc(100vw - 32px) !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader{
  width:474px !important;
  min-width:474px !important;
  max-width:474px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-bottom:1px solid #e5e7eb !important;
  border-radius:6px 6px 0 0 !important;
  box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
  width:474px !important;
  min-width:474px !important;
  max-width:474px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-top:0 !important;
  border-radius:0 0 6px 6px !important;
  box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
  overflow:hidden !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
  margin:0 0 18px !important;
  padding:0 0 18px !important;
  border-bottom:1px solid #e5e7eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip{
  align-items:center !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip input[type="checkbox"],
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip .chip-icon,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip svg,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip > span{
  align-self:center !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip input[type="checkbox"]{
  display:block !important;
  transform:translateY(0) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip .chip-icon-danger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-row > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  color:#111827 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  color:#111827 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea::placeholder{
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  color:#98a2b3 !important;
}

@media (max-width: 760px){
  #dfFloatingInspector.df-fi-single-section[data-section="basic"],
  #dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader,
  #dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
    width:min(474px, calc(100vw - 24px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 24px) !important;
  }
}


/* v317 basic final cleanup per user feedback */
#dfFloatingInspector.df-fi-single-section[data-section="basic"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"]::before,
#dfFloatingInspector.df-fi-single-section[data-section="basic"]::after{
  display: none !important;
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
  box-shadow: none !important;
  filter: none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader{
  border-radius: 6px 6px 0 0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorBody{
  border-radius: 0 0 6px 6px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row{
  border-bottom: 1px solid #e5e7eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip{
  min-height: 34px !important;
  height: 34px !important;
  gap: 8px !important;
  padding: 0 12px !important;
  align-items: center !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip input[type="checkbox"],
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-toggle input[type="checkbox"]{
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  flex: 0 0 16px !important;
  accent-color: #2563eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip .chip-icon,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .toggle-chip svg{
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex: 0 0 14px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.58) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea::placeholder{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.58) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 16px !important;
  box-shadow: none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer::before,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer::after{
  display: none !important;
  content: none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] hr,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .divider,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-divider{
  display: none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-row{
  margin-top: 0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-box{
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-ibl-head{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-toggle{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-toggle span{
  display: none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  color: #111827 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline{
  display: block !important;
  margin: 0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline[hidden]{
  display: none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 14px !important;
  min-height: 44px !important;
  height: 44px !important;
  background: #ffffff !important;
  border: 1px solid #d8dee8 !important;
  border-radius: 10px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label{
  margin-bottom: 8px !important;
}


/* Patch v318: Basic popup typography parity with Regex.
   Why: Basic should reuse Regex as the single source of truth for font family, size, weight, and placeholder/value tone. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader .df-fi-title-text,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"],
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .toggle-chip,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .toggle-chip span,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-prop-helptext,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-basic-footer-btn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] button{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(15, 23, 42, 0.78) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] option,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-box code{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(15, 23, 42, 0.58) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select:invalid,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code:empty::before{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0 !important;
  color: rgba(15, 23, 42, 0.58) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .ghost-btn.df-basic-footer-btn{
  color: rgba(15, 23, 42, 0.78) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .primary-btn.df-basic-footer-btn{
  color: #ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .toggle-chip input[type="checkbox"]{
  accent-color: #2563eb !important;
}


/* v325: Basic popup only - keep DatePicker no-future option under Read only and widen the chip. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .field-options-row .df-no-future-date-chip{
  grid-column:2 / 3 !important;
  justify-self:center !important;
  min-width:180px !important;
  width:180px !important;
  white-space:nowrap !important;
}

/* v327: Basic popup typography matches UsedClass Manager.
   Why: only the Basic field labels/values requested by the user should inherit the right-sidebar section typography. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .field-group label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-custom-row > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline-label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] select,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] option,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] .df-translation-keyline code{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:16px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:rgba(15,23,42,.78) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] input::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] .editor-pane[data-pane="basic"] textarea::placeholder{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:16px !important;
  color:rgba(15,23,42,.78) !important;
  opacity:1 !important;
}


/* v329: Basic popup highlighted fields use XML Preview grey typography.
   Why: keep the Basic editor text visually quieter, matching the right-panel XML Preview tone. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .field-group > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-custom-row > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:16px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:rgba(15,23,42,.78) !important;
  -webkit-text-fill-color:rgba(15,23,42,.78) !important;
  opacity:1 !important;
  text-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propLabel,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propStyle,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propRow,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propRowSpan,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propColumn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propColumnSpan,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propBlock,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-keyline,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-keyline code{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:14px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:rgba(15,23,42,.58) !important;
  -webkit-text-fill-color:rgba(15,23,42,.58) !important;
  opacity:1 !important;
  text-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propLabel::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propBlock::placeholder{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:14px !important;
  letter-spacing:0 !important;
  color:rgba(15,23,42,.58) !important;
  -webkit-text-fill-color:rgba(15,23,42,.58) !important;
  opacity:1 !important;
}


/* v330: make Basic popup XML Preview grey typography slightly bolder without changing layout or behavior. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .field-group > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-custom-row > label,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-keyline-label{
  font-weight:600 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propLabel,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propStyle,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propRow,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propRowSpan,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propColumn,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propColumnSpan,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propBlock,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-keyline,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] .df-translation-keyline code{
  font-weight:500 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propLabel::placeholder,
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #selectedFieldEditorPanel .editor-pane[data-pane="basic"] #propBlock::placeholder{
  font-weight:500 !important;
}



/* v333 Visibility popup: Regex-like card layout, polished shell/action treatment. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"]{
  width:626px !important;
  max-width:calc(100vw - 28px) !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:6px !important;
  box-shadow:0 10px 28px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.05) !important;
  overflow:hidden !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiBackBtn,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiFwdBtn{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader{
  min-height:40px !important;
  padding:8px 14px 8px 22px !important;
  border-bottom:1px solid #e6ebf2 !important;
  background:#ffffff !important;
  cursor:move !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader .df-fi-title{
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#1f2937 !important;
  letter-spacing:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader .df-fi-actions{
  justify-content:flex-end !important;
  gap:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader .df-fi-iconbtn{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  min-height:27px !important;
  border-radius:6px !important;
  border:1px solid #d8e0eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  box-shadow:none !important;
  font-size:13px !important;
  line-height:1 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorBody{
  padding:0 !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #selectedFieldPanel,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #selectedFieldEditorPanel,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiPropsWrap,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"]{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

#dfVisibilityDesignSection.df-viv3-root{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-shell{
  display:grid !important;
  gap:0 !important;
  padding:18px 22px 8px !important;
  background:#ffffff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section{
  display:grid !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-divider{
  height:1px !important;
  margin:14px 0 !important;
  background:#e6ebf2 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-section{
  display:flex !important;
  align-items:center !important;
  min-height:28px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:30px !important;
  padding:0 12px !important;
  border:1px solid #d6deea !important;
  border-radius:10px !important;
  background:#ffffff !important;
  color:#1f2a44 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  user-select:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:#2563eb !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-form-row{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:20px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block{
  display:grid !important;
  gap:7px !important;
  min-width:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block label,
#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-label{
  display:block !important;
  margin:0 !important;
  font-size:12px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  color:#334155 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block input,
#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block select{
  width:100% !important;
  min-height:33px !important;
  height:33px !important;
  margin:0 !important;
  padding:0 12px !important;
  border:1px solid #d6deea !important;
  border-radius:8px !important;
  background:#ffffff !important;
  color:#334155 !important;
  font-size:12px !important;
  line-height:33px !important;
  font-weight:500 !important;
  box-shadow:none !important;
  outline:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block select{
  padding-right:32px !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block input::placeholder{
  color:#9aa5b5 !important;
  opacity:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-rules{
  gap:9px !important;
  margin-top:12px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-action-row{
  display:flex !important;
  align-items:center !important;
  margin:0 0 2px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-add-rule-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:31px !important;
  height:31px !important;
  padding:0 13px !important;
  border:1px solid #d6deea !important;
  border-radius:8px !important;
  background:#ffffff !important;
  color:#1f2a44 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-add-icon,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-icon{
  width:15px !important;
  height:15px !important;
  display:inline-flex !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-list{
  display:grid !important;
  gap:9px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-card{
  display:grid !important;
  gap:0 !important;
  padding:0 !important;
  border:1px solid #e7edf5 !important;
  border-radius:8px !important;
  background:#fbfcff !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-height:38px !important;
  padding:7px 10px !important;
  border-bottom:1px solid #edf2f7 !important;
  background:#fbfcff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-title-group{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  border-radius:999px !important;
  background:#2563eb !important;
  color:#ffffff !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:700 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-title{
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#334155 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-actions{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#334155 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn.is-danger{
  color:#e02424 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-divider{
  width:1px !important;
  height:22px !important;
  background:#dbe3ef !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-body{
  display:grid !important;
  gap:9px !important;
  padding:10px !important;
  background:#ffffff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-remove-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:28px !important;
  height:28px !important;
  padding:0 12px !important;
  border:1px solid #d6deea !important;
  border-radius:7px !important;
  background:#ffffff !important;
  color:#334155 !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-generated{
  gap:6px !important;
  margin-top:10px !important;
  padding:9px 10px !important;
  border:1px dashed #b7cffd !important;
  border-radius:8px !important;
  background:#fbfdff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-generated-box{
  min-height:18px !important;
  color:#64748b !important;
  font-size:12px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-empty{
  padding:12px !important;
  border:1px dashed #d6deea !important;
  border-radius:8px !important;
  color:#64748b !important;
  font-size:12px !important;
  font-weight:500 !important;
  background:#ffffff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  margin-top:16px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border-top:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-footer-btn{
  min-width:88px !important;
  height:31px !important;
  padding:0 18px !important;
  border-radius:8px !important;
  border:1px solid #d6deea !important;
  background:#ffffff !important;
  color:#334155 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:31px !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-footer-btn.is-primary{
  min-width:88px !important;
  border-color:#2563eb !important;
  background:#2563eb !important;
  color:#ffffff !important;
}

#selectedFieldPanel .editor-pane[data-pane="visibility"] .df-viv3-footer{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #selectedFieldPanel .editor-pane[data-pane="visibility"] .df-viv3-footer,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"] .df-viv3-footer{
  display:flex !important;
}

@media (max-width: 700px){
  #dfFloatingInspector.df-fi-single-section[data-section="visibility"]{
    width:calc(100vw - 24px) !important;
    right:12px !important;
  }

  #dfVisibilityDesignSection.df-viv3-root .df-viv3-shell{
    padding:14px 14px 8px !important;
  }

  #dfVisibilityDesignSection.df-viv3-root .df-viv3-form-row{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  #dfVisibilityDesignSection.df-viv3-root .df-visible-rule-head{
    align-items:flex-start !important;
  }
}


/* v333 Visibility popup polish: remove extra shell width, align controls with Regex popup, visual-only. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"]{
  width:472px !important;
  max-width:calc(100vw - 28px) !important;
  background:#ffffff !important;
  border:1px solid #e1e7ef !important;
  border-radius:6px !important;
  box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
  overflow:hidden !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorBody,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #selectedFieldPanel,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #selectedFieldEditorPanel,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiPropsWrap,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"],
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-shell{
  width:100% !important;
  box-sizing:border-box !important;
  padding:16px 20px 8px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-section{
  display:flex !important;
  align-items:center !important;
  min-height:22px !important;
  padding:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:22px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#4e5155 !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip input{
  width:14px !important;
  height:14px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-add-rule-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#1f2a44 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-action-row{
  display:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-list{
  display:grid !important;
  gap:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-card{
  display:grid !important;
  gap:12px !important;
  padding:16px 0 !important;
  border:0 !important;
  border-bottom:1px solid #e6ebf2 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-card:last-child{
  border-bottom:0 !important;
  padding-bottom:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-head{
  min-height:0 !important;
  padding:0 !important;
  border-bottom:0 !important;
  background:transparent !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-badge{
  width:26px !important;
  height:26px !important;
  font-size:12px !important;
  background:#1f6fff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-title{
  font-size:13px !important;
  font-weight:700 !important;
  color:#111827 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-actions{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-add-icon,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-icon,
#dfVisibilityDesignSection.df-viv3-root .df-visible-add-icon svg,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-icon svg{
  width:15px !important;
  height:15px !important;
  display:inline-flex !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-divider{
  height:18px !important;
  width:1px !important;
  background:#dbe3ef !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-body{
  display:grid !important;
  gap:9px !important;
  padding:0 !important;
  background:transparent !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-remove-btn{
  display:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-generated{
  margin-top:10px !important;
}

@media (max-width: 700px){
  #dfFloatingInspector.df-fi-single-section[data-section="visibility"]{
    width:calc(100vw - 24px) !important;
    right:12px !important;
  }
}

/* v334 Visibility popup: tighten to Regex modal shell and card layout. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"]{
  width:420px !important;
  min-width:420px !important;
  max-width:420px !important;
  max-height:calc(100vh - 48px) !important;
  background:#ffffff !important;
  border:0 !important;
  border-radius:6px !important;
  box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
  color:#111827 !important;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  transform:none !important;
  transform-origin:center top !important;
  overflow:hidden !important;
  right:auto !important;
  box-sizing:border-box !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"].df-fi-dragging{
  box-shadow:0 8px 24px rgba(15,23,42,.12) !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader{
  height:44px !important;
  min-height:44px !important;
  padding:0 16px !important;
  border-bottom:1px solid #e5e7eb !important;
  background:#ffffff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  cursor:grab !important;
  user-select:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"].df-fi-dragging #dfFloatingInspectorHeader{
  cursor:grabbing !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiTitle,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader .df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader .df-fi-title-text{
  min-width:0 !important;
  color:#374151 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:16px !important;
  letter-spacing:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiBackBtn,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiFwdBtn{
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .df-fi-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiCloseBtn,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader .df-fi-iconbtn{
  width:24px !important;
  min-width:24px !important;
  height:24px !important;
  min-height:24px !important;
  padding:0 !important;
  border:1px solid #d8dee8 !important;
  border-radius:6px !important;
  background:#ffffff !important;
  color:#374151 !important;
  font-size:13px !important;
  line-height:1 !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorBody{
  padding:0 !important;
  background:#ffffff !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  color:#111827 !important;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiTabContent{
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #selectedFieldPanel,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #selectedFieldEditorPanel,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiPropsWrap,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"],
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#ffffff !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root{
  padding:12px 20px 0 !important;
  color:#111827 !important;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-shell{
  display:grid !important;
  gap:0 !important;
  width:100% !important;
  padding:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section{
  display:grid !important;
  gap:12px !important;
  margin:0 !important;
  padding:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-divider{
  height:1px !important;
  margin:12px 0 !important;
  background:#e5e7eb !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-section{
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#374151 !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip input{
  width:14px !important;
  height:14px !important;
  margin:0 !important;
  accent-color:#2563eb !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-form-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block{
  display:block !important;
  min-width:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block label{
  display:block !important;
  margin:0 0 6px !important;
  color:#4b5563 !important;
  font-size:10px !important;
  font-weight:600 !important;
  line-height:14px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-head{
  min-height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-label{
  margin:0 !important;
  color:#111827 !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-add-rule-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#2563eb !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-add-icon,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
  line-height:0 !important;
  color:currentColor !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-add-icon svg,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-icon svg{
  display:block !important;
  width:16px !important;
  height:16px !important;
  overflow:visible !important;
  stroke:currentColor !important;
  fill:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-rules{
  gap:8px !important;
  margin-top:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-list{
  display:grid !important;
  gap:10px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-card{
  display:grid !important;
  gap:0 !important;
  padding:0 !important;
  border:1px solid #d8dee8 !important;
  border-radius:7px !important;
  background:#ffffff !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-card:last-child{
  border-bottom:1px solid #d8dee8 !important;
  padding-bottom:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-head{
  min-height:40px !important;
  padding:0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  border-bottom:1px solid #e5e7eb !important;
  background:#ffffff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-title-group{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  border-radius:999px !important;
  background:#2563eb !important;
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:22px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-title{
  color:#374151 !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-actions{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#374151 !important;
  line-height:0 !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn.is-danger{
  color:#dc2626 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-divider{
  display:block !important;
  width:1px !important;
  height:18px !important;
  background:#dbe3ef !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-body{
  display:grid !important;
  gap:10px !important;
  padding:10px 12px 12px !important;
  background:#ffffff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block input,
#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block select{
  width:100% !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:0 10px !important;
  border:1px solid #d8dee8 !important;
  border-radius:7px !important;
  background:#ffffff !important;
  box-shadow:none !important;
  color:#111827 !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:32px !important;
  outline:0 !important;
  box-sizing:border-box !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block select{
  padding-right:30px !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block input::placeholder{
  color:#98a2b3 !important;
  opacity:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-remove-btn,
#dfVisibilityDesignSection.df-viv3-root .df-viv3-action-row{
  display:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-generated{
  gap:6px !important;
  margin-top:12px !important;
  padding:9px 10px !important;
  border:1px dashed #b7cffd !important;
  border-radius:8px !important;
  background:#fbfdff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-generated-box{
  min-height:18px !important;
  color:#64748b !important;
  font-size:11px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-empty{
  padding:12px !important;
  border:1px dashed #d8dee8 !important;
  border-radius:7px !important;
  color:#667085 !important;
  font-size:11px !important;
  font-weight:400 !important;
  background:#ffffff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-footer{
  position:sticky !important;
  bottom:0 !important;
  z-index:2 !important;
  height:52px !important;
  min-height:52px !important;
  padding:10px 20px !important;
  margin:12px -20px 0 !important;
  border-top:1px solid #e5e7eb !important;
  background:#ffffff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-footer-btn{
  height:30px !important;
  min-width:92px !important;
  padding:0 14px !important;
  border-radius:7px !important;
  border:1px solid #d8dee8 !important;
  background:#ffffff !important;
  color:#111827 !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:28px !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-footer-btn.is-primary{
  border-color:#2563eb !important;
  background:#2563eb !important;
  color:#ffffff !important;
}

@media (max-width:520px){
  #dfFloatingInspector.df-fi-single-section[data-section="visibility"]{
    width:calc(100vw - 24px) !important;
    min-width:0 !important;
    max-width:calc(100vw - 24px) !important;
  }

  #dfVisibilityDesignSection.df-viv3-root{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #dfVisibilityDesignSection.df-viv3-root .df-viv3-form-row{
    grid-template-columns:1fr !important;
  }

  #dfVisibilityDesignSection.df-viv3-root .df-viv3-footer{
    margin-left:-16px !important;
    margin-right:-16px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* v335 Visibility popup: exact Regex rule header/action match + 460px modal size.
   UI-only: no Visibility state, XML, save, or rule behavior changes. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"]{
  width:460px !important;
  min-width:460px !important;
  max-width:460px !important;
  height:auto !important;
  max-height:calc(100vh - 32px) !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  overflow:visible !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader{
  width:460px !important;
  min-width:460px !important;
  max-width:460px !important;
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-bottom:1px solid #e5e7eb !important;
  border-radius:6px 6px 0 0 !important;
  box-shadow:none !important;
  cursor:default !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorBody{
  width:460px !important;
  min-width:460px !important;
  max-width:460px !important;
  height:auto !important;
  max-height:calc(100vh - 76px) !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:block !important;
  flex:0 0 auto !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-top:0 !important;
  border-radius:0 0 6px 6px !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFiTabContent{
  width:100% !important;
  height:auto !important;
  max-height:calc(100vh - 76px) !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  flex:0 0 auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:#ffffff !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"],
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"] .prop-grid,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"] .df-prop-grid-compact,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection .df-viv3-shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root{
  width:100% !important;
  padding:12px 20px 0 !important;
  box-sizing:border-box !important;
  background:#ffffff !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-head{
  min-height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-add-rule-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#2563eb !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-add-icon,
#dfVisibilityDesignSection.df-viv3-root .df-visible-add-icon svg{
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  min-height:13px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-card{
  border:1px solid #d8dee8 !important;
  border-radius:7px !important;
  background:#ffffff !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0 !important;
  min-height:40px !important;
  padding:0 0 0 12px !important;
  background:#f3f4f6 !important;
  border-bottom:1px solid #e5e7eb !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-title-group{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-badge{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border-radius:999px !important;
  background:#2563eb !important;
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:22px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-title{
  color:#374151 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  align-self:stretch !important;
  gap:8px !important;
  min-width:72px !important;
  padding:0 10px !important;
  margin-left:12px !important;
  margin-right:0 !important;
  border-left:1px solid #e5e7eb !important;
  background:transparent !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  flex:0 0 20px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#475467 !important;
  box-shadow:none !important;
  line-height:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn.is-danger{
  color:#ef4444 !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-icon,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-icon svg{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  color:inherit !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn svg,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn svg path,
#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-iconbtn svg rect{
  display:block !important;
  width:15px !important;
  height:15px !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:1.6 !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-action-divider{
  display:block !important;
  width:1px !important;
  height:18px !important;
  margin:0 2px !important;
  background:#d7dde6 !important;
  align-self:center !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-visible-rule-body{
  padding:10px 12px 12px !important;
  background:#ffffff !important;
  display:grid !important;
  gap:10px !important;
}

@media (max-width:560px){
  #dfFloatingInspector.df-fi-single-section[data-section="visibility"],
  #dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader,
  #dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorBody{
    width:calc(100vw - 24px) !important;
    min-width:0 !important;
    max-width:calc(100vw - 24px) !important;
  }
}


/* v337 Visibility popup: use the real Regex rule DOM/classes for rule header, Add rule, and icons.
   UI-only: IDs/data attributes remain unchanged, so Visibility behavior is untouched. */
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-rules{
  gap:8px !important;
  margin-top:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-head{
  min-height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-label{
  margin:0 !important;
  color:#111827 !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#2563eb !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transform:none !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link span{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link-icon,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link-icon svg{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  min-height:13px !important;
  flex:0 0 13px !important;
  color:currentColor !important;
  overflow:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link-icon svg path{
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-list{
  display:grid !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule{
  position:relative !important;
  display:grid !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #d8dee8 !important;
  border-radius:7px !important;
  background:#ffffff !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule::after{
  content:none !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0 !important;
  min-height:40px !important;
  padding:0 0 0 12px !important;
  background:#f3f4f6 !important;
  border-bottom:1px solid #e5e7eb !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-title-group{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  border-radius:999px !important;
  background:#2563eb !important;
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:600 !important;
  line-height:22px !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-title{
  color:#374151 !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  align-self:stretch !important;
  gap:8px !important;
  min-width:72px !important;
  padding:0 10px !important;
  margin-left:12px !important;
  margin-right:0 !important;
  border-left:1px solid #e5e7eb !important;
  background:transparent !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  flex:0 0 20px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#475467 !important;
  box-shadow:none !important;
  line-height:0 !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-inline-action.is-danger.df-rxv3-rule-iconbtn{
  color:#ef4444 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-inline-action-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  flex:0 0 15px !important;
  color:inherit !important;
  line-height:0 !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn svg{
  display:block !important;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  overflow:visible !important;
  color:inherit !important;
  transform:scale(1) !important;
  transform-origin:center center !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn svg path,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn svg rect{
  display:block !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:1.6 !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-action-divider{
  display:block !important;
  width:1px !important;
  height:18px !important;
  margin:0 2px !important;
  background:#d7dde6 !important;
  align-self:center !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-body.df-viv3-visibility-rule-body{
  display:grid !important;
  gap:10px !important;
  padding:10px 12px 12px !important;
  background:#ffffff !important;
}


/* v338 Visibility popup: match Regex drag shell, Add rule typography, and rule action icon scale.
   UI-only: keeps Visibility IDs/data attributes and all VisibleIf behavior untouched. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"].df-fi-dragging{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  outline:0 !important;
  overflow:visible !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  contain:none !important;
  isolation:auto !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"].df-fi-dragging::before,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"].df-fi-dragging::after{
  content:none !important;
  display:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"].df-fi-dragging #dfFloatingInspectorHeader,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"].df-fi-dragging #dfFloatingInspectorBody{
  box-shadow:none !important;
  filter:none !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-rules > .df-rxv3-section-head{
  min-height:26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link:visited,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link:hover,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link:focus{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#1f2937 !important;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transform:none !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link span{
  display:inline-flex !important;
  align-items:center !important;
  color:inherit !important;
  font:inherit !important;
  line-height:inherit !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link-icon,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link-icon svg{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  flex:0 0 14px !important;
  color:inherit !important;
  overflow:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-primary-link-icon svg path{
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  align-self:stretch !important;
  gap:0 !important;
  min-width:84px !important;
  padding:0 12px 0 14px !important;
  margin-left:12px !important;
  margin-right:0 !important;
  border-left:1px solid #e5e7eb !important;
  background:transparent !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  flex:0 0 28px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#475467 !important;
  box-shadow:none !important;
  line-height:0 !important;
  cursor:pointer !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-inline-action.is-danger.df-rxv3-rule-iconbtn{
  color:#ef4444 !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn .df-rxv3-inline-action-icon,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-inline-action-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  flex:0 0 18px !important;
  color:inherit !important;
  line-height:0 !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn svg{
  display:block !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  overflow:visible !important;
  color:inherit !important;
  transform:scale(1.06) !important;
  transform-origin:center center !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn svg path,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-iconbtn svg rect{
  display:block !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:1.85 !important;
  opacity:1 !important;
  visibility:visible !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-action-divider{
  display:block !important;
  width:1px !important;
  height:20px !important;
  margin:0 8px !important;
  background:#d7dde6 !important;
  align-self:center !important;
}



/* v339 Visibility popup: match Basic popup label typography and label spacing.
   UI-only: keeps VisibleIf behavior, XML generation, and rule actions untouched. */
#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip,
#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip span,
#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block > label,
#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-label,
#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-label{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:16px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:rgba(15,23,42,.78) !important;
  -webkit-text-fill-color:rgba(15,23,42,.78) !important;
  opacity:1 !important;
  text-shadow:none !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-field-block{
  gap:8px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip{
  gap:8px !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-rules{
  gap:8px !important;
}

#dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-rule-body.df-viv3-visibility-rule-body{
  gap:14px !important;
}

#dfVisibilityDesignSection.df-viv3-root .df-viv3-section-generated{
  gap:8px !important;
}


/* v341 Visibility popup: Basic-style Enable VisibleIf pill, more breathing room, remove Generated/footer divider lines.
   UI-only: keeps VisibleIf state, XML generation, save, add, copy, and delete behavior untouched. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-section{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:40px !important;
  padding:0 !important;
  margin:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  min-height:34px !important;
  height:34px !important;
  padding:0 14px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-radius:12px !important;
  background:#ffffff !important;
  box-shadow:none !important;
  color:rgba(15,23,42,.74) !important;
  -webkit-text-fill-color:rgba(15,23,42,.74) !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:34px !important;
  cursor:pointer !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip input{
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  min-height:14px !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 14px !important;
  accent-color:#2563eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip span{
  display:inline-flex !important;
  align-items:center !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  font:inherit !important;
  line-height:1 !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-divider{
  height:1px !important;
  margin:14px 0 18px !important;
  background:#e5e7eb !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-form-row{
  margin:0 !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-rules{
  margin-top:14px !important;
  gap:14px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-section-generated{
  margin-top:14px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-generated-box{
  min-height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-footer{
  border-top:0 !important;
  margin-top:18px !important;
  padding-top:0 !important;
}

/* v342 Visibility popup: add top breathing room, restore grey Generated VisibleIf output field, and push footer below it.
   UI-only: keeps VisibleIf state, XML generation, save, add, copy, and delete behavior untouched. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-shell{
  padding-top:20px !important;
  padding-bottom:16px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-section{
  min-height:36px !important;
  margin-bottom:2px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-toggle-chip{
  min-height:34px !important;
  height:34px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-divider{
  margin:14px 0 20px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root.df-rxv3-root .df-rxv3-section-rules{
  margin-top:16px !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-section-generated{
  display:grid !important;
  gap:8px !important;
  margin-top:18px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-generated-box{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:38px !important;
  height:auto !important;
  padding:0 12px !important;
  border:1px solid #d6deea !important;
  border-radius:8px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
  color:#64748b !important;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-generated-box #propVisibleIf{
  display:block !important;
  width:100% !important;
  color:inherit !important;
  font:inherit !important;
  line-height:inherit !important;
}

#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfVisibilityDesignSection.df-viv3-root .df-viv3-footer{
  border-top:0 !important;
  margin-top:24px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* v350: Regex builder starts blank until a rule is added and saved. */
.df-rxv3-empty-rules{
  border:1px dashed #d7dde7;
  border-radius:8px;
  padding:14px 12px;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:16px;
  color:#64748b;
  background:#fff;
}


/* v352: in-app Regex notice replaces native preset-rule alert. */
#dfRegexDesignSection.df-rxv3-root{
  position: relative !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toast{
  position: absolute !important;
  top: 64px !important;
  left: 50% !important;
  z-index: 40 !important;
  max-width: calc(100% - 48px) !important;
  padding: 9px 14px !important;
  border: 1px solid #d6deea !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14) !important;
  color: #1f2a44 !important;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -6px) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  white-space: normal !important;
}

#dfRegexDesignSection.df-rxv3-root .df-rxv3-toast.is-visible{
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}


/* v356: strong section-specific title override. Mirrors the Regex modal title and beats older section rules. */
#dfFloatingInspector.df-fi-single-section[data-section="basic"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="filters"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="regex"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="initialValue"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="authorizationKey"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="length"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector.df-fi-single-section[data-section="validation"] #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector:has(#dfRegexDesignSection) #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector:has(#dfVisibilityDesignSection) #dfFloatingInspectorHeader #dfFiTitle.df-fi-title,
#dfFloatingInspector:has(#dfFilterEditorSection) #dfFloatingInspectorHeader #dfFiTitle.df-fi-title{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:16px !important;
  letter-spacing:0 !important;
  color:#344054 !important;
  text-transform:none !important;
}

/* v382: Design/Logic popup visual only.
   CSS-only: 480px card + thin local edge shadow + light header; no canvas backdrop, no blur, no app behavior changes. */
body.df-popup-backdrop-open::before{
  content:none !important;
  display:none !important;
}

body.df-popup-backdrop-open #dfFloatingInspector,
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section,
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="basic"],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="visibility"],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="filters"],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="regex"],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="initialValue"],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="authorizationKey"],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="length"],
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section="validation"]{
  width:480px !important;
  min-width:0 !important;
  max-width:calc(100vw - 48px) !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:8px !important;
  box-shadow:
    0 3px 10px rgba(15,23,42,.10),
    0 1px 3px rgba(15,23,42,.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  overflow:hidden !important;
}

body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section #dfFloatingInspectorHeader,
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section] #dfFloatingInspectorHeader,
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section #dfFloatingInspectorBody,
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section] #dfFloatingInspectorBody{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
}

body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section #dfFloatingInspectorHeader,
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section] #dfFloatingInspectorHeader{
  background:#f8fafc !important;
  border:0 !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  border-radius:0 !important;
}

body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section #dfFloatingInspectorBody,
body.df-popup-backdrop-open #dfFloatingInspector.df-fi-single-section[data-section] #dfFloatingInspectorBody{
  background:#ffffff !important;
  border:0 !important;
  border-radius:0 !important;
}

body.df-popup-backdrop-open #dfFloatingInspector.df-fi-dragging{
  box-shadow:
    0 3px 10px rgba(15,23,42,.10),
    0 1px 3px rgba(15,23,42,.08) !important;
}