/* Extracted from app.html style block 3 (id="df-rightdrawer-style") */

/* Collapsible right sidebar: the canvas expands into the freed space. */
:root{
  --df-rightdock-w: 360px;
  --df-rightdock-collapsed: 0px;
}

.main{
  grid-template-columns: minmax(0, 1fr) var(--df-rightdock-w) !important;
  column-gap: 14px !important;
  align-items: start !important;
  transition: grid-template-columns .22s ease, column-gap .22s ease !important;
}

.main > :not(.left-panel):not(.right-panel){
  grid-column: 1 !important;
}

.card.right-panel{
  grid-column: 2 !important;
  display: block !important;
  margin: 0 !important;
  align-self: start !important;
  min-width: var(--df-rightdock-w) !important;
  max-width: var(--df-rightdock-w) !important;
  width: var(--df-rightdock-w) !important;
  overflow: hidden !important;
  transition:
    width .22s ease,
    min-width .22s ease,
    max-width .22s ease,
    padding .18s ease,
    opacity .18s ease !important;
}

body.df-rightpanel-hidden .main{
  grid-template-columns: minmax(0, 1fr) var(--df-rightdock-collapsed) !important;
  column-gap: 0 !important;
}

body.df-rightpanel-hidden .card.right-panel{
  min-width: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.df-rightpanel-hidden .card.right-panel .right-panel-inner{
  visibility: hidden !important;
}

body.df-rightpanel-hidden .card.canvas{
  grid-column: 1 !important;
}

.panel-body.right-body,
.right-body,
.scroll{
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.df-rightdrawer-backdrop,
.df-rightdrawer{
  display: none !important;
}

.card.right-panel .right-panel-inner{
  min-height: calc(100vh - 220px);
}

.card.right-panel .panel-head{
  position: sticky;
  top: 0;
  z-index: 3;
}

@media (max-width: 1300px){
  .main{
    grid-template-columns: 1fr !important;
  }

  .card.right-panel,
  body.df-rightpanel-hidden .card.right-panel{
    grid-column: 1 / -1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  body.df-rightpanel-hidden .main{
    column-gap: 14px !important;
  }
}


/* Extracted from app.html style block 4 (id="df-height-fill") */

  /* Fill the iframe viewport: remove the extra bottom whitespace. (UI-only) */
  html, body { height: 100% !important; }
  body { padding: 12px !important; margin: 0 !important; }
  .app { min-height: calc(100vh - 24px) !important; }
  .main { min-height: calc(100vh - 24px) !important; }
  /* Avoid overly-short columns; inner areas already scroll. */
  .scroll { max-height: none !important; }
/* Single-scroll preference: avoid nested scroll containers. */
  .scroll { overflow: visible !important; padding-right: 0 !important; }


/* Extracted from app.html style block 5 (id="df-right-panel-toolbar-match") */

/* Right panel: match Rich Text toolbar surface language (outer glass + inner inset). */
:root{
  --df-surface-outer: rgba(15,23,42,.04);
  --df-surface-inner: rgba(255,255,255,.92);
  --df-border: rgba(15,23,42,.06);
  --df-border-strong: rgba(15,23,42,.10);
  --df-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.card.right-panel{
  background: var(--df-surface-outer);
  border: none;
  box-shadow: none;
  backdrop-filter: saturate(180%) blur(10px);
  padding: 10px;
}

.card.right-panel .right-panel-label{ display:none; }

.card.right-panel .right-panel-inner{
  background: var(--df-surface-inner);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}

.card.right-panel .right-panel-inner .panel-body{ padding: 12px; }

.card.right-panel .panel-head{
  padding: 14px 16px;
  background: transparent;
  border-bottom: 1px solid rgba(15,23,42,.04);
}

.card.right-panel .panel-head h2{
  font-size: 18px;
  letter-spacing: -0.01em;
}

.card.right-panel .panel-sub{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(15,23,42,.62);
}


.card.right-panel .prop-section{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 0;
  margin: 0;
}
.card.right-panel .prop-section + .prop-section{
  border-top: 1px solid rgba(15,23,42,.05);
}

.card.right-panel .prop-title{
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(15,23,42,.58);
}


/* Diagnostics panels: keep UI clean by collapsing UsedClass/Validation by default. */
.prop-title.clickable{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.prop-title.clickable::after{
  content: '▸';
  font-size: 12px;
  color: rgba(15,23,42,.55);
}
.prop-section:not(.collapsed) > .prop-title.clickable::after{
  content: '▾';
}
.prop-summary{
  margin: -2px 0 8px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
}
.prop-section.collapsed #usedClassPanel,
.prop-section.collapsed #validationPanel{
  display: none !important;
}
.card.right-panel .field-summary-card,
.card.right-panel .inline-help-card,
.card.right-panel .xml-box textarea,
.card.right-panel .logic-preview-box{
  border-radius: 14px;
}

.card.right-panel .field-summary-card{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.card.right-panel .field-summary-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.card.right-panel .field-summary-sub{ font-size: 11px; }

.card.right-panel .sf-snippet{
  margin-top: 10px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15,23,42,.015);
}
.card.right-panel .sf-snippet-head{
  background: transparent;
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: 10px 10px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(15,23,42,.72);
}
.card.right-panel .sf-snippet-head span{ font-weight: 650; }
.card.right-panel .sf-note{ font-size: 11px; color: rgba(15,23,42,.55); }

.card.right-panel .btn-mini{
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.9);
  font-size: 12px;
}

.card.right-panel .inline-help-card{
  border: none;
  background: transparent;
  padding: 0;
}

.card.right-panel .ok-box{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.16);
  color: rgba(6,95,70,.95);
}


/* Inputs/selects: align with rt-select sizing. */
.card.right-panel .field-group input,
.card.right-panel .field-group select{
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--df-border-strong);
  background: #fff;
  font-size: 14px;
}

.card.right-panel .field-group textarea{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--df-border-strong);
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
}

/* Tabs: convert to toolbar-like inset group with chip buttons. */
.card.right-panel .editor-tabs{
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 12px;
}

.card.right-panel .editor-tab{
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  width: auto;
  flex: 0 0 auto;
}

.card.right-panel .editor-tab:hover{ background: rgba(15,23,42,.05); }

.card.right-panel .editor-tab.active{
  background: #ffffff;
  border-color: rgba(43,109,173,.22);
  color: var(--blue-dark);
}

/* Toggle chips. */
.card.right-panel .toggle-chip{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--df-border);
  background: rgba(255,255,255,.88);
  font-size: 12px;
}

.card.right-panel .toggle-chip:hover{ background: rgba(15,23,42,.05); }

/* Ghost buttons: match toolbar button feel. */
.card.right-panel .ghost-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--df-border);
  background: rgba(255,255,255,.88);
}

.card.right-panel .ghost-btn:hover{ background: rgba(15,23,42,.05); }

/* XML preview: neutral surface + mono type. */
.card.right-panel #xmlPreview{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--df-border);
}

/* macOS-clean XML Preview widget (right panel) */
.card.right-panel .xml-preview-section { padding: 12px; }
.card.right-panel .xml-preview-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.card.right-panel .xml-preview-title{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.78);
}
.card.right-panel .xml-preview-sub{
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.card.right-panel .xml-preview-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.card.right-panel .xml-preview-actions .ghost-btn{
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,.85);
}
.card.right-panel .xml-preview-code{
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 12px;
  background: rgba(15,23,42,.02);
  padding: 10px;
}
.card.right-panel .xml-preview-code #xmlPreview{
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  min-height: 170px;
  max-height: 300px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}


/* Normalize SVG icons inside right panel (if present). */
.card.right-panel button svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Icon-only actions (macOS-style) in the right panel. */
.card.right-panel .icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:34px;
  height:34px;
  padding:0 !important;
  border-radius:10px !important;
  line-height:0;
}
.card.right-panel .icon-btn svg{ width:14px;
  height:14px;
  }

.card.right-panel .tiny-actions.selected-field-icon-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.card.right-panel .tiny-actions.selected-field-icon-actions button{
  width:34px;
  height:34px;
  padding:0 !important;
}
.card.right-panel .tiny-actions.selected-field-icon-actions .icon-btn{
  border-radius:10px !important;
}
.card.right-panel .tiny-actions.selected-field-icon-actions .icon-btn.icon-danger{
  color: var(--danger);
  border-color: rgba(217,83,79,0.24);
}
.card.right-panel .tiny-actions.selected-field-icon-actions .icon-btn.icon-danger:hover{
  background: rgba(217,83,79,0.08);
}


/* Typography polish: smaller, calmer, toolbar-like */
.card.right-panel{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
  line-height: 1.35;
}

/* Headline */
.card.right-panel .panel-head h2{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.card.right-panel .panel-sub{
  font-size: 11px;
  line-height: 1.35;
}

/* Section titles (e.g., Selected Field) */
.card.right-panel .section-title{
  font-size: 13px;
  font-weight: 800;
}

/* Selected field summary */
.card.right-panel .field-summary-title{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.card.right-panel .field-summary-sub{
  font-size: 11px;
}

/* Labels + controls */
.card.right-panel .field-group label{
  font-size: 11px;
  font-weight: 700;
  color: rgba(15,23,42,.75);
}
.card.right-panel input,
.card.right-panel select,
.card.right-panel textarea{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 10px;
}

/* Toggle chips */
.card.right-panel .toggle-chip{
  font-size: 11px;
  padding: 5px 9px;
  gap: 6px;
}

/* Tabs */
.card.right-panel .editor-tab{
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 800;
}

/* XML snippet header */
.card.right-panel .sf-snippet-head{
  font-size: 11px;
  padding: 8px 10px;
}

/* Mini buttons */
.card.right-panel .btn-mini,
.card.right-panel .inline-help-actions button{
  font-size: 11px;
  padding: 4px 8px;
}


/* === Font polish v2: make form controls small + clean (no logic changes) === */
.card.right-panel{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
}

.card.right-panel .panel-head h2{ font-size: 16px; }

.card.right-panel .panel-sub{
  font-size: 11px;
  color: rgba(15,23,42,.60);
}

.card.right-panel .prop-title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.card.right-panel .field-summary-title{ font-size: 14px; }
.card.right-panel .field-summary-sub{ font-size: 11px; }

.card.right-panel .field-group label{
  font-size: 11px;
  font-weight: 700;
  color: rgba(15,23,42,.70);
  margin-bottom: 4px;
}

.card.right-panel .field-group input,
.card.right-panel .field-group select{
  height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 30px;
}

.card.right-panel .field-group textarea{
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.35;
}

.card.right-panel input::placeholder,
.card.right-panel textarea::placeholder{
  font-size: 12px;
  color: rgba(15,23,42,.45);
}

.card.right-panel .editor-tabs{
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
}

.card.right-panel .editor-tab{
  height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
}

.card.right-panel .toggle-chip{
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.card.right-panel .ghost-btn{
  height: 28px;
  padding: 0 10px;
  border-radius: 9px;
}


/* Persistent right sidebar shell: mirror the app panel layout instead of the retired drawer shell. */
.card.right-panel{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.08) !important;
  overflow: hidden !important;
}

.card.right-panel .right-panel-inner{
  background: #fff !important;
  border: none !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}

.card.right-panel .panel-head{
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  background: #fbfcfd !important;
}

.card.right-panel .panel-head h2{
  margin: 0 !important;
  font-size: 18px !important;
}

.card.right-panel .panel-sub{
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: rgba(15,23,42,.62) !important;
}

.card.right-panel .panel-body{
  padding: 12px 16px 16px !important;
}


/* Extracted from app.html style block 6 (id="df-statusbar-toolbar-match") */

/* Bottom status bar: match header/RT toolbar "2-layer" quality */
.statusbar{
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;

  padding: 2px 5px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.04) !important;
  backdrop-filter: blur(4px) !important;

  /* Remove the old full-width bar feel */
  border-top: none !important;
}

.statusbar.card{
  border: none !important;
  box-shadow: none !important;
}

.statusbar-inner{
  display:flex;
  align-items:center;
  gap: 5px !important;

  padding: 3px !important;
  background: rgba(15,23,42,.03) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 8px !important;

  overflow-x: auto;
}

/* Prevent chunky scrollbar inside the inset */
.statusbar-inner::-webkit-scrollbar{ height: 6px; }
.statusbar-inner::-webkit-scrollbar-track{ background: transparent; }
.statusbar-inner::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
}
.statusbar-inner{ scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.22) transparent; }

.statusbar .field-group{
  gap: 6px !important;
}

.statusbar .field-group label{
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

/* Match RT toolbar control sizing */
.statusbar select,
.statusbar input[type="number"]{
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: #fff !important;
  font-size: 12px !important;
}

#columns{ min-width: 60px !important; }

/* Rows controls match RT icon buttons */
.paint-row-btn,
.paint-fit-btn{
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;

  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: none !important;
}

.paint-fit-btn i{ font-size: 14px !important; }

/* Slider: same compact height as RT controls */
#canvasHeight{
  height: 24px !important;
}
#canvasHeight::-webkit-slider-runnable-track{ height: 2px !important; background: rgba(15,23,42,.14) !important; }
#canvasHeight::-webkit-slider-thumb{
  width: 8px !important;
  height: 8px !important;
  margin-top: -3px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.18) !important;
}
#canvasHeight::-moz-range-track{ height: 2px !important; background: rgba(15,23,42,.14) !important; }
#canvasHeight::-moz-range-thumb{
  width: 8px !important;
  height: 8px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.18) !important;
}

.paint-rows-input{
  height: 24px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  font-size: 12px !important;
}

/* Hide the legacy bubble suffix font inflation */
.paint-rows-bubble{
  font-size: 12px !important;
}


/* Extracted from app.html style block 7 (id="df-statusbar-center-trio") */

/* Bottom bar: 3-zone layout (left | center | right) */
.statusbar-inner{
  justify-content: space-between;
  overflow-x: visible; /* keep stable centering */
}
.statusbar-left,
.statusbar-center,
.statusbar-right{
  display:flex;
  align-items:center;
}
.statusbar-left{ flex: 0 0 auto; }
.statusbar-center{
  flex: 0 0 auto;
  justify-content:center;
  min-width: 0;
}
.statusbar-right{
  flex: 0 0 auto;
  justify-content:flex-end;
  gap: 6px;
}

/* Center trio */
.statusbar-center .paint-rowbar{
  margin: 0;
  padding: 0;
}
.statusbar-center .paint-rowbar-inner{
  justify-content: center;
  gap: 8px;
}

/* Right: rows input + fit */
.statusbar-right .paint-row-right{
  margin: 0;
  padding: 0;
}
.statusbar-right .paint-rows-inputwrap{
  display:flex;
  align-items:center;
  gap: 6px;
}
.statusbar-right .paint-rows-input{
  width: 56px; /* fits 3 digits */
  text-align: center;
}

/* Ensure +/- never show (keep in DOM for logic) */
#canvasRowsMinus,
#canvasRowsPlus{ display:none !important; }


/* Extracted from app.html style block 8 (id="df-rte-posh-overrides") */

.df-rte-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid rgba(148,163,184,.2);
  background:#fff;
}
.df-rte-toolbar .rt-group{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.df-rte-toolbar .rt-select{
  height:30px;
  padding:0 10px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:9px;
  background:#fff;
  font-size:12.5px;
  line-height:1;
  color:#111827;
  font-family:inherit;
}
.df-rte-toolbar .rt-select.rt-family{ width:200px; }
.df-rte-toolbar .rt-select.rt-size{ width:86px; }
.df-rte-toolbar .rt-icon-btn,
.df-rte-toolbar .rt-text-btn{
  appearance:none;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  color:#111827;
  cursor:pointer;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  line-height:1;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.df-rte-toolbar .rt-icon-btn{
  width:30px;
  height:30px;
  padding:0;
  font-size:11px;
  font-weight:500;
}
.df-rte-toolbar .rt-text-btn{
  height:30px;
  padding:0 10px;
  font-size:12.5px;
  font-weight:500;
}
.df-rte-toolbar .rt-icon-btn:hover,
.df-rte-toolbar .rt-icon-btn:focus,
.df-rte-toolbar .rt-text-btn:hover,
.df-rte-toolbar .rt-text-btn:focus,
.df-rte-toolbar .rt-select:focus{
  outline:none;
  background:rgba(15,23,42,.03);
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
.df-rte-toolbar .rt-icon-btn svg{
  width:18px;
  height:18px;
  display:block;
  overflow:visible;
  stroke:currentColor;
  fill:none;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.df-rte-toolbar .rt-menu-btn{
  position:relative;
}
.df-rte-toolbar .rt-menu-btn .rt-caret{
  display:none;
}
.df-rte-toolbar #dfRteTextColorBtn svg,
.df-rte-toolbar #dfRteBulletBtn svg,
.df-rte-toolbar #dfRteNumberBtn svg{
  width:16px;
  height:16px;
  stroke-width:1.7;
}
.df-rte-toolbar #dfRteNumberBtn svg text{
  fill:currentColor;
  font-weight:500;
  letter-spacing:-0.1px;
}
.df-rte-toolbar #dfRteTextColorBtn .rt-color-underline{
  left:8px;
  right:8px;
  bottom:4px;
  height:2px;
  border-radius:999px;
}
.df-rte-toolbar .rt-glyph{
  display:block;
  font-size:14px;
  line-height:1;
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
}
.df-rte-toolbar .rt-glyph-italic{ font-style:italic; }
.df-rte-toolbar .rt-glyph-underline{ text-decoration:underline; text-underline-offset:2px; }
.df-rte-toolbar .rt-glyph-strike{ text-decoration:line-through; text-decoration-thickness:1.5px; }
.df-rte-toolbar .rt-icon-btn.active,
.df-rte-toolbar .rt-text-btn.active{
  background:rgba(59,130,246,.15);
  border-color:rgba(59,130,246,.25);
}
.df-rte-toolbar .rt-color-btn{
  position:relative;
  overflow:hidden;
}
.df-rte-toolbar .rt-color-underline{
  position:absolute;
  left:7px;
  right:7px;
  bottom:5px;
  height:3px;
  border-radius:2px;
  background:#000000;
}
.df-rte-toolbar input[type="color"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}
.df-rte-editor-wrap{
  padding:16px;
  background:#fff;
}
.df-rte-editor{
  min-height:300px;
  max-height:420px;
  overflow:auto;
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.6;
  color:#0f172a;
}
.df-rte-editor:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,.16);
}
.df-rte-editor p,
.df-rte-editor div,
.df-rte-editor ul,
.df-rte-editor ol{
  margin:0 0 8px;
}


/* Extracted from app.html style block 9 (id="df-rt-color-popover-style") */

#df-rt-color-popover{
  position:fixed;
  z-index:2147483647;
  width:280px;
  padding:10px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.18);
  border-radius:10px;
  box-shadow:0 14px 40px rgba(15,23,42,.18);
  font-family:"Segoe UI", Arial, sans-serif;
  user-select:none;
}
.df-rt-color-auto{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(15,23,42,.08);
  margin-bottom:10px;
}
.df-rt-auto-btn{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  font-size:11px;
}
.df-rt-auto-btn:hover{ background:rgba(15,23,42,.05); }
.df-rt-auto-chip{
  width:18px;
  height:18px;
  border-radius:4px;
  background:#000;
  border:1px solid rgba(15,23,42,.15);
}
.df-rt-hc-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#334155;
  cursor:pointer;
}
.df-rt-hc-toggle input{ display:none; }
.df-rt-switch{
  width:36px;
  height:20px;
  border-radius:999px;
  background:#e2e8f0;
  position:relative;
  border:1px solid rgba(15,23,42,.12);
}
.df-rt-switch:before{
  content:"";
  position:absolute;
  top:1px;
  left:1px;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .16s ease;
}
.df-rt-hc-toggle input:checked + .df-rt-switch{ background:#111827; }
.df-rt-hc-toggle input:checked + .df-rt-switch:before{ transform:translateX(16px); }
.df-rt-color-section{ margin-bottom:10px; }
.df-rt-color-title{
  font-size:12px;
  font-weight:700;
  color:#0f172a;
  margin:0 0 6px 0;
}
.df-rt-color-grid{
  display:grid;
  grid-auto-rows:18px;
  gap:4px;
}
.df-rt-theme-grid,
.df-rt-std-grid{
  grid-template-columns:repeat(10, 1fr);
}
.df-rt-swatch{
  width:100%;
  height:18px;
  border-radius:3px;
  border:1px solid rgba(15,23,42,.12);
  cursor:pointer;
}
.df-rt-swatch:hover{
  outline:2px solid rgba(99,102,241,.45);
  outline-offset:1px;
}
.df-rt-more-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  text-align:left;
  border:1px solid #d7d7d7;
  background:#f1f1f1;
  color:#1f2937 !important;
  -webkit-text-fill-color:#1f2937 !important;
  padding:8px 10px;
  border-radius:8px;
  font-size:12px !important;
  font-weight:500;
  cursor:pointer;
  opacity:1 !important;
}
.df-rt-more-btn span{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  opacity:1 !important;
}
.df-rt-more-btn:hover{
  background:#e9ecef;
  border-color:#c5c9cf;
}
.df-rt-more-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 26%, transparent 27% 100%),
    conic-gradient(#ef4444, #f59e0b, #84cc16, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
  border:1px solid rgba(15,23,42,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
#df-rt-color-dialog-backdrop{
  position:fixed;
  inset:0;
  z-index:2147483646;
  background:rgba(15,23,42,.16);
}
#df-rt-color-dialog{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:2147483647;
  width:398px;
  background:#f5f5f5;
  border:1px solid #bdbdbd;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(15,23,42,.22);
  font-family:"Segoe UI", Arial, sans-serif;
  color:#111827;
}
.df-rt-dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px 8px;
  border-bottom:1px solid #d7d7d7;
}
.df-rt-dialog-title{
  font-size:13px;
  color:#6b7280;
}
.df-rt-dialog-close{
  width:28px;
  height:24px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  color:#6b7280;
}
.df-rt-dialog-close:hover{
  background:#ececec;
  border-color:#d5d5d5;
}
.df-rt-dialog-body{
  display:flex;
  gap:14px;
  padding:12px;
}
.df-rt-dialog-main{
  flex:1 1 auto;
  min-width:0;
}
.df-rt-dialog-tabs{
  display:flex;
  align-items:flex-end;
  gap:0;
  margin-bottom:0;
}
.df-rt-dialog-tab{
  min-width:64px;
  padding:4px 12px 5px;
  border:1px solid #d1d1d1;
  border-bottom:0;
  border-radius:3px 3px 0 0;
  background:#ececec;
  color:#111827;
  font-size:12px;
  cursor:pointer;
  margin-right:4px;
}
.df-rt-dialog-tab.active{
  background:#ffffff;
  position:relative;
  top:1px;
}
.df-rt-dialog-panel{
  border:1px solid #d1d1d1;
  background:#ffffff;
  padding:12px 12px 10px;
  min-height:286px;
}
.df-rt-dialog-label{
  font-size:12px;
  color:#111827;
  margin:0 0 8px;
}
.df-rt-word-standard{
  padding-top:2px;
  min-height:194px;
}
.df-rt-word-row{
  display:flex;
  justify-content:center;
  gap:3px;
  height:18px;
  margin-bottom:1px;
}
.df-rt-word-row.is-offset{
  transform:translateX(11px);
}
.df-rt-word-swatch,
.df-rt-neutral-swatch{
  appearance:none;
  border:1px solid rgba(0,0,0,.18);
  cursor:pointer;
  background:#ffffff;
  padding:0;
  outline:none;
}
.df-rt-word-swatch{
  width:21px;
  height:20px;
  clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}
.df-rt-word-swatch:hover,
.df-rt-neutral-swatch:hover{
  box-shadow:0 0 0 1px #ffffff inset, 0 0 0 2px #2563eb;
}
.df-rt-word-swatch.is-active,
.df-rt-neutral-swatch.is-active{
  box-shadow:0 0 0 2px #ffffff inset, 0 0 0 2px #111827, 0 0 0 3px #60a5fa;
}
.df-rt-word-neutrals{
  display:flex;
  align-items:center;
  gap:4px;
  justify-content:flex-start;
  margin-top:12px;
  padding-top:10px;
}
.df-rt-neutral-swatch{
  width:18px;
  height:18px;
}
.df-rt-neutral-swatch.df-rt-neutral-main{
  width:24px;
  height:24px;
  clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}
.df-rt-custom-wrap{
  display:flex;
  align-items:flex-start;
  gap:10px;
  user-select:none;
}
.df-rt-custom-canvas-wrap,
.df-rt-custom-hue-wrap{
  position:relative;
}
.df-rt-custom-surface,
.df-rt-custom-hue{
  display:block;
  border:1px solid #a8a8a8;
  background:#ffffff;
  touch-action:none;
}
.df-rt-custom-surface{
  cursor:crosshair;
}
.df-rt-custom-hue{
  cursor:ns-resize;
}
.df-rt-custom-surface-marker{
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid #ffffff;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.75);
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.df-rt-custom-hue-marker{
  position:absolute;
  left:-2px;
  width:24px;
  height:8px;
  border:1px solid #ffffff;
  box-shadow:0 0 0 1px rgba(0,0,0,.75);
  background:transparent;
  transform:translateY(-50%);
  pointer-events:none;
}
.df-rt-custom-fields{
  margin-top:12px;
}
.df-rt-custom-field{
  display:grid;
  grid-template-columns:88px 1fr;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size:12px;
}
.df-rt-custom-field input,
.df-rt-custom-field select{
  height:26px;
  padding:2px 6px;
  border:1px solid #b9b9b9;
  background:#ffffff;
  font-size:12px;
  font-family:"Segoe UI", Arial, sans-serif;
}
.df-rt-custom-field input[type="number"]{
  width:82px;
}
.df-rt-custom-field input[type="text"]{
  width:82px;
  text-transform:uppercase;
}
.df-rt-dialog-side{
  width:112px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.df-rt-dialog-btn{
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #b8b8b8;
  background:#fdfdfd;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-radius:4px;
  font-size:12px !important;
  font-weight:400;
  text-shadow:none;
  cursor:pointer;
  opacity:1 !important;
}
.df-rt-dialog-btn:hover{
  background:#f3f3f3;
}
.df-rt-dialog-btn-primary{
  border-color:#2a7de1;
  box-shadow:0 0 0 1px rgba(42,125,225,.12) inset;
}
.df-rt-dialog-btn:disabled{
  color:#9ca3af !important;
  -webkit-text-fill-color:#9ca3af !important;
}
.df-rt-dialog-side-spacer{
  flex:1 1 auto;
  min-height:86px;
}
.df-rt-dialog-preview-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.df-rt-dialog-preview-label{
  font-size:12px;
  color:#111827;
}
.df-rt-dialog-preview-swatch{
  width:58px;
  height:58px;
  border:1px solid #a8a8a8;
  background:#ffffff;
}


/* Extracted from app.html style block 10 (id="df-rt-list-popover-style") */

#df-rt-bullet-popover,
#df-rt-number-popover{
  position: fixed;
  z-index: 2147483647;
  width:min(220px, calc(100vw - 18px));
  padding: 5px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(60,60,67,.16);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(15,23,42,.10), 0 1px 4px rgba(15,23,42,.05);
  backdrop-filter:saturate(1.15) blur(14px);
  -webkit-backdrop-filter:saturate(1.15) blur(14px);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;
  user-select:none;
}
.df-rt-list-title{
  font-weight:500;
  font-size:9px;
  color:#111827;
  padding:0 1px 4px;
  letter-spacing:0;
}
.df-rt-list-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:3px;
}
.df-rt-list-tile{
  appearance:none;
  border:1px solid rgba(60,60,67,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.95));
  border-radius:8px;
  padding:3px 2px;
  cursor:pointer;
  min-height:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  text-align:center;
  color:#0f172a;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .08s ease;
}
.df-rt-list-tile:hover,
.df-rt-list-tile:focus{
  outline:none;
  border-color:rgba(0,122,255,.46);
  box-shadow:0 0 0 1px rgba(0,122,255,.10);
  background:linear-gradient(180deg, #ffffff, rgba(239,246,255,.92));
}
.df-rt-list-tile:active{
  transform:translateY(1px);
}
.df-rt-list-demo{
  font-size:12px;
  line-height:1;
  font-weight:400;
  color:#111827;
  white-space:nowrap;
}
.df-rt-list-demo-stack{
  font-size:9px;
  line-height:1.05;
  white-space:pre-line;
}
.df-rt-list-indent{
  display:inline-block;
  padding-left:4px;
}
.df-rt-list-meta{
  display:none;
}
.df-rt-list-none{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:100%;
  font-weight:500;
  color:#111827;
  font-size:8px;
}


/* Extracted from app.html style block 11 (id="df-apple-theme") */

  :root{
    --bg:#f5f5f7;
    --card:#ffffff;
    --line:rgba(60,60,67,.20);
    --line-soft:rgba(60,60,67,.12);
    --text:#1d1d1f;
    --muted:#6e6e73;
    --blue:#007aff;
    --blue-dark:#0060df;
    --blue-soft:rgba(0,122,255,.14);
    --ghost:rgba(60,60,67,.08);
    --shadow:0 10px 30px rgba(0,0,0,.08);
  }

  html, body{
    background:var(--bg);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  body{
    padding: 12px 12px 70px;
    letter-spacing: .01em;
  }

  /* Cards */
  .card{
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
  }

  .panel-head{
    background:rgba(60,60,67,.04);
    border-bottom:1px solid var(--line-soft);
  }

  /* Panels inside right/left */
  .topic-group, .tree-box, .prop-section, .rules-box, .usedclass-item, .sim-box, .validation-item{
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:none;
  }

  /* Buttons */
  .menu-btn, .ghost-btn, .btn-mini, .icon-btn, .kebab-btn{
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.92);
    color:var(--text);
    font-weight:500;
    letter-spacing:.01em;
    box-shadow:0 1px 0 rgba(0,0,0,.04);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  }
  .menu-btn:hover, .ghost-btn:hover, .btn-mini:hover, .icon-btn:hover, .kebab-btn:hover{
    background:rgba(60,60,67,.06);
    border-color:rgba(60,60,67,.28);
  }
  .menu-btn:active, .ghost-btn:active, .btn-mini:active, .icon-btn:active, .kebab-btn:active{
    transform: translateY(.5px);
  }

  .delete-btn{
    border-radius:12px;
    border:1px solid rgba(255,59,48,.35);
    background:rgba(255,59,48,.10);
    color:#b42318;
    font-weight:600;
  }
  .delete-btn:hover{
    background:rgba(255,59,48,.14);
  }

  /* Field cards */
  .field-card{
    border:1px solid rgba(60,60,67,.22);
    border-radius:16px;
    background:#fff;
    box-shadow:none;
  }
  .field-card:hover{
    border-color:rgba(60,60,67,.34);
    box-shadow:0 6px 16px rgba(0,0,0,.06);
  }
  .field-card.selected{
    border-color:rgba(0,122,255,.65);
    box-shadow:0 0 0 3px rgba(0,122,255,.18);
  }

  /* Inputs */
  input, select, textarea{
    font-family:inherit;
  }

  /* Canvas frame */
  .phone-frame{
    border:1px solid var(--line);
    background:rgba(60,60,67,.04);
    border-radius:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
  }

  /* Rich text bubble looks like other controls */
  .df-richtext-bubble{
    border:1px solid rgba(60,60,67,.22) !important;
    border-radius:14px !important;
    background:#fff !important;
  }

  /* Right panel headings */
  .panel-head h3, .panel-head h2{
    font-weight:650;
    letter-spacing:.01em;
  }
  .muted, .help, .subtle{
    color:var(--muted) !important;
  }

  /* RTE toolbar: Apple-ish */
  .df-rte-toolbar{
    background:rgba(60,60,67,.04) !important;
    border-bottom:1px solid rgba(60,60,67,.16) !important;
    padding:10px 12px !important;
    gap:8px !important;
  }
  .df-rte-toolbar .rt-group{
    background:rgba(255,255,255,.75) !important;
    border:1px solid rgba(60,60,67,.18) !important;
    border-radius:14px !important;
  }
  .df-rte-toolbar .rt-icon-btn,
  .df-rte-toolbar .rt-text-btn{
    border:1px solid rgba(60,60,67,.18) !important;
    background:rgba(255,255,255,.90) !important;
    border-radius:12px !important;
    box-shadow:none !important;
    font-weight:600 !important;
  }
  .df-rte-toolbar .rt-select{
    border:1px solid rgba(60,60,67,.18) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.95) !important;
  }
  .df-rte-toolbar .rt-icon-btn:hover,
  .df-rte-toolbar .rt-text-btn:hover{
    background:rgba(60,60,67,.06) !important;
  }
  .df-rte-toolbar .rt-icon-btn.active,
  .df-rte-toolbar .rt-text-btn.active{
    background:rgba(0,122,255,.12) !important;
    border-color:rgba(0,122,255,.30) !important;
  }


/* Extracted from app.html style block 12 (id="df-macos-full-app") */

/* ===== macOS full skin (layout-only). No JS/binding changes. ===== */
:root{
  --df-m-bg: #f5f5f7;
  --df-m-glass: rgba(255,255,255,.72);
  --df-m-glass-strong: rgba(255,255,255,.88);
  --df-m-card: #ffffff;
  --df-m-text: #1d1d1f;
  --df-m-muted: #6e6e73;
  --df-m-border: rgba(60,60,67,.22);
  --df-m-border-soft: rgba(60,60,67,.14);
  --df-m-shadow: 0 12px 34px rgba(0,0,0,.10);
  --df-m-shadow-soft: 0 8px 22px rgba(0,0,0,.08);
  --df-m-radius: 18px;
  --df-m-radius-sm: 14px;
  --df-m-accent: #007aff;
  --df-m-accent-soft: rgba(0,122,255,.18);
}

html, body{
  background: var(--df-m-bg) !important;
  color: var(--df-m-text) !important;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cards/panels */
.card{
  border: 1px solid var(--df-m-border) !important;
  border-radius: var(--df-m-radius) !important;
  box-shadow: var(--df-m-shadow-soft) !important;
  background: var(--df-m-card) !important;
}
.panel-head{
  border-bottom: none !important;
  background: rgba(60,60,67,.04) !important;
}
.panel-head h2, .panel-head h3{
  font-weight: 650 !important;
  letter-spacing: .01em;
}
.panel-sub{ color: var(--df-m-muted) !important; }

/* Right panel blocks as Settings cards */
.prop-section, .rules-box, .sim-box, .usedclass-item, .validation-item{
  background: var(--df-m-glass-strong) !important;
  border: 1px solid var(--df-m-border) !important;
  border-radius: var(--df-m-radius) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(1.8) blur(14px);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
}
.prop-title{ color: var(--df-m-muted) !important; letter-spacing:.01em; }

/* Buttons */
.menu-btn, .ghost-btn, .btn-mini, .icon-btn, .kebab-btn{
  border-radius: 12px !important;
  border: 1px solid var(--df-m-border) !important;
  background: var(--df-m-glass-strong) !important;
  color: var(--df-m-text) !important;
  font-weight: 520 !important;
  letter-spacing:.01em;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.menu-btn:hover, .ghost-btn:hover, .btn-mini:hover, .icon-btn:hover, .kebab-btn:hover{
  background: rgba(60,60,67,.08) !important;
  border-color: rgba(60,60,67,.30) !important;
}
.menu-btn:active, .ghost-btn:active, .btn-mini:active, .icon-btn:active, .kebab-btn:active{
  transform: translateY(.5px);
}
.menu-btn:focus-visible, .ghost-btn:focus-visible, .btn-mini:focus-visible, .icon-btn:focus-visible, .kebab-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--df-m-accent-soft) !important;
  border-color: rgba(0,122,255,.45) !important;
}

.delete-btn{
  border-radius: 12px !important;
  border: 1px solid rgba(255,59,48,.35) !important;
  background: rgba(255,59,48,.10) !important;
  color: #b42318 !important;
  font-weight: 600 !important;
}
.delete-btn:hover{ background: rgba(255,59,48,.14) !important; }

/* Inputs */
input, select, textarea{
  border-radius: 12px !important;
}
input, select{
  border: 1px solid var(--df-m-border) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--df-m-accent-soft) !important;
  border-color: rgba(0,122,255,.45) !important;
}

/* Canvas page */
.phone-frame{
  border: 1px solid var(--df-m-border) !important;
  border-radius: 20px !important;
  background: rgba(60,60,67,.04) !important;
  box-shadow: var(--df-m-shadow-soft) !important;
}
.phone-paper{
  border-radius: 16px !important;
  border: 1px solid var(--df-m-border-soft) !important;
  background: #fff !important;
}

/* Field bubbles */
.field-card{
  border: 1px solid rgba(60,60,67,.22) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.field-card:hover{
  border-color: rgba(60,60,67,.34) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
}
.field-card.selected{
  border-color: rgba(0,122,255,.62) !important;
  border-bottom: 1px solid rgba(0,122,255,.62) !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,.16) !important;
}
.field-top{
  border-bottom: none !important;
}
.field-title{
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* Rich text bubble keeps same style system */
.df-richtext-bubble{
  border: 1px solid rgba(60,60,67,.22) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

/* Modal (Rich Text Editor) */
.df-rte-modal{
  background: rgba(0,0,0,.28) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.df-rte-shell{
  border-radius: 20px !important;
  border: 1px solid var(--df-m-border) !important;
  background: var(--df-m-glass) !important;
  box-shadow: var(--df-m-shadow) !important;
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
}
.df-rte-head{
  border-bottom: none !important;
}
.df-rte-title{ font-weight: 700 !important; }
.df-rte-sub{ color: var(--df-m-muted) !important; }

/* Scrollbars */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(60,60,67,.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(60,60,67,.38); }
*::-webkit-scrollbar-track{ background: transparent; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* Automatic macOS dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --df-m-bg: #0f1115;
    --df-m-glass: rgba(28,28,30,.72);
    --df-m-glass-strong: rgba(28,28,30,.88);
    --df-m-card: rgba(28,28,30,.92);
    --df-m-text: #f5f5f7;
    --df-m-muted: rgba(235,235,245,.60);
    --df-m-border: rgba(235,235,245,.18);
    --df-m-border-soft: rgba(235,235,245,.12);
    --df-m-shadow: 0 12px 34px rgba(0,0,0,.40);
    --df-m-shadow-soft: 0 8px 22px rgba(0,0,0,.30);
    --df-m-accent-soft: rgba(10,132,255,.22);
  }
  .panel-head{ background: rgba(235,235,245,.06) !important; }
  .phone-paper{ background: rgba(28,28,30,.92) !important; }
  *::-webkit-scrollbar-thumb{ background: rgba(235,235,245,.22); }
  *::-webkit-scrollbar-thumb:hover{ background: rgba(235,235,245,.30); }
}


/* Extracted from app.html style block 13 (id="ep-modal-compact-overrides") */

  /* Employee Property modals — compact macOS Settings style */
  .ep-modal{ max-width: 860px; border-radius: 16px; }
  .ep-modal-header{ padding: 12px 14px 10px; }
  .ep-modal-title{ font-size: 13px; }
  .ep-modal-body{ padding: 12px 14px; }
  .ep-modal-footer{ padding: 10px 14px 12px; gap: 8px; }
  .ep-modal .ep-row{ gap: 10px; }
  .ep-modal label, .ep-modal .ep-label{ margin: 0 0 4px 1px; font-size: 11px; }
  .ep-modal input, .ep-modal select{ padding: 7px 10px; font-size: 12.5px; border-radius: 10px; }
  .ep-modal .ep-actions button, .ep-modal-footer button{ padding: 8px 12px; border-radius: 10px; }
  .ep-modal .ep-grid{ gap: 10px; }
  .ep-modal .binding-item-row{ padding: 8px 10px !important; margin: 8px 0 !important; border-radius: 12px !important; }
  .ep-modal .panel-sub{ font-size: 11.5px; }


/* Extracted from app.html style block 14 (id="cc-outline-override") */

  /* Outlines: hidden at rest & hover. Show only when selected. */
  .field-card{
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .field-card:hover{
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .field-card.selected{
    border-color: var(--blue) !important;
    box-shadow: none !important;
  }

  .section-card{
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .section-card:hover{
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .section-card.selected{
    border-color: var(--blue) !important;
    box-shadow: none !important;
  }

  /* Grid preview wrapper outline (if any). */
  .epgrid-preview{
    border-color: transparent !important;
  }
  .section-card.selected .epgrid-preview,
  .field-card.selected .epgrid-preview{
    border-color: transparent !important; /* keep single outline on the selected card */
  }


/* Extracted from app.html style block 15 (id="client-preview-phase1-styles") */

  .client-preview-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-top:12px;
    padding:12px 14px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.92));
    box-shadow:0 16px 34px rgba(15,23,42,.06);
  }
  .client-preview-toolbar-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .client-preview-toolbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .cp-btn{
    appearance:none;
    border:1px solid rgba(15,23,42,.10);
    background:linear-gradient(180deg, #ffffff, #f8fafc);
    color:#0f172a;
    border-radius:12px;
    min-height:40px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    font:600 13px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    letter-spacing:-0.01em;
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 22px rgba(15,23,42,.06);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
    cursor:pointer;
  }
  .cp-btn:hover{
    transform:translateY(-1px);
    border-color:rgba(59,130,246,.20);
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 14px 28px rgba(15,23,42,.09);
  }
  .cp-btn:active{
    transform:translateY(0);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px rgba(15,23,42,.08);
  }
  .cp-btn svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    opacity:.88;
  }
  .cp-btn-primary{
    background:linear-gradient(180deg, #0f172a, #111827);
    color:#fff;
    border-color:rgba(15,23,42,.65);
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 12px 24px rgba(15,23,42,.24);
  }
  .cp-btn-primary:hover{
    border-color:rgba(15,23,42,.82);
    box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 16px 28px rgba(15,23,42,.28);
  }
  .cp-btn-secondary{
    color:#0f172a;
  }
  .cp-live-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    padding:6px 12px 6px 10px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.86);
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 10px 22px rgba(15,23,42,.05);
    cursor:pointer;
    user-select:none;
  }
  .cp-live-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .cp-live-toggle-ui{
    position:relative;
    width:38px;
    height:22px;
    border-radius:999px;
    background:#d7dde8;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.12);
    transition:background .18s ease;
    flex:0 0 auto;
  }
  .cp-live-toggle-ui::after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px rgba(15,23,42,.18);
    transition:transform .18s ease;
  }
  .cp-live-toggle input:checked + .cp-live-toggle-ui{
    background:#2563eb;
  }
  .cp-live-toggle input:checked + .cp-live-toggle-ui::after{
    transform:translateX(16px);
  }
  .cp-live-copy{
    display:flex;
    flex-direction:column;
    gap:1px;
  }
  .cp-live-copy strong{
    font:600 13px/1.15 system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    color:#0f172a;
    letter-spacing:-0.01em;
  }
  .cp-live-copy span{
    font:500 11.5px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    color:#64748b;
  }
  .cp-status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:36px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.08);
    background:rgba(255,255,255,.88);
    box-shadow:0 8px 18px rgba(15,23,42,.05);
    font:600 12.5px/1 system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    color:#0f172a;
    letter-spacing:-0.01em;
  }
  .cp-status-pill small{
    font-weight:600;
    color:#64748b;
  }
  .cp-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#94a3b8;
    box-shadow:0 0 0 4px rgba(148,163,184,.14);
    flex:0 0 auto;
  }
  .cp-status-pill[data-state="opening"] .cp-status-dot{
    background:#f59e0b;
    box-shadow:0 0 0 4px rgba(245,158,11,.14);
  }
  .cp-status-pill[data-state="connected"] .cp-status-dot{
    background:#10b981;
    box-shadow:0 0 0 4px rgba(16,185,129,.14);
  }
  .cp-status-pill[data-state="manual"] .cp-status-dot{
    background:#3b82f6;
    box-shadow:0 0 0 4px rgba(59,130,246,.12);
  }
  .cp-status-pill[data-state="error"] .cp-status-dot{
    background:#ef4444;
    box-shadow:0 0 0 4px rgba(239,68,68,.12);
  }
  .cp-status-meta{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .cp-status-sep{
    color:#cbd5e1;
  }
  @media (max-width: 980px){
    .client-preview-toolbar{
      align-items:flex-start;
    }
    .client-preview-toolbar-right{
      width:100%;
      justify-content:flex-start;
    }
  }


/* Extracted from app.html style block 16 (id="df-density-90-pass") */

  /* Visual-only 10% density reduction. No zoom/transform, so canvas math stays intact. */
  body{
    padding: 12px 12px 67px;
  }

  .app{
    gap: 12px;
  }

  .card{
    border-radius: 16px;
  }

  .top-card{
    padding: 14px 16px;
  }

  .top-row{
    gap: 10px;
  }

  h1{
    font-size: 27px;
  }

  h2{
    font-size: 14px;
  }

  .subtext{
    margin-top: 7px;
    font-size: 12px;
  }

  .panel-sub{
    font-size: 11px;
  }

  .pill-row{
    gap: 7px;
  }

  .pill{
    padding: 4px 9px;
    font-size: 11px;
  }

  .toolbar{
    gap: 9px;
    margin-top: 14px;
  }

  .field-group{
    gap: 5px;
  }

  .field-group label{
    font-size: 11px;
  }

  input,
  select,
  textarea{
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12px;
  }

  textarea{
    min-height: 88px;
  }

  button{
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12px;
  }

  .main{
    gap: 12px;
    min-height: calc(100vh - 204px);
  }

  .panel-head{
    padding: 13px 14px;
    gap: 10px;
  }

  .panel-body{
    padding: 13px 14px;
  }

  .left-body,
  .right-body{
    gap: 11px;
  }

  .scroll{
    max-height: calc(100vh - 316px);
  }

  .topic-group,
  .tree-box,
  .prop-section,
  .rules-box,
  .usedclass-item,
  .sim-box,
  .validation-item{
    border-radius: 12px;
  }

  .tree-box{
    padding: 11px;
  }

  .topic-header{
    min-height: 36px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .topic-count{
    min-width: 24px;
    font-size: 9px;
    padding: 2px 5px;
  }

  .paint-menubar{
    gap: 12px;
    padding: 9px 11px;
    margin-top: 12px;
    border-radius: 11px;
  }

  .paint-title{
    font-size: 13px;
  }

  .menu-btn{
    gap: 9px;
    padding: 7px 11px;
    border-radius: 11px;
    font-size: 10px;
  }

  .menu-icon{
    font-size: 13px;
  }

  .menu-text{
    font-size: 10px;
  }

  .appmenu{
    top: 42px;
    width: 288px;
    padding: 9px;
    border-radius: 14px;
  }

  .field-card{
    padding: 9px;
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .field-card.inline-help-card{
    padding: 7px;
  }

  .field-card label{
    font-size: 11px;
    margin-bottom: 4px;
  }

  .field-control{
    margin-top: 3px;
  }

  .field-control input:not([type="checkbox"]):not([type="radio"]),
  .field-control select,
  .field-control textarea{
    max-width: 216px;
    padding: 3px 7px;
    font-size: 11px;
  }

  .field-control input:not([type="checkbox"]):not([type="radio"]),
  .field-control select{
    min-height: 27px;
    height: 27px;
  }

  .field-control textarea{
    min-height: 58px;
    padding: 5px 7px;
  }

  .checkbox-row{
    gap: 7px;
    min-height: 29px;
  }

  .phone-grid-gutter,
  .df-row-ruler{
    width: 38px;
    flex-basis: 38px;
  }

  .df-row-ruler-item{
    padding: 4px 7px 0 5px;
    font-size: 10px;
  }

  .df-row-ruler-item::after{
    width: 12px;
  }

  .df-row-ruler-item.is-selected::after{
    width: 20px;
  }


/* Extracted from app.html style block 17 (id="df-size-only-10pct-global-pass") */

  /* Size-only pass: make the UI feel ~10% smaller without zoom/transform or JS changes. */
  html{ font-size:90%; }
  body{
    font-size:12px;
    padding:10px 10px 60px !important;
  }

  .app,
  .main,
  .top-row,
  .pill-row,
  .toolbar,
  .paint-menubar,
  .statusbar-inner,
  .client-preview-toolbar,
  .client-preview-toolbar-left,
  .client-preview-toolbar-right{
    gap:10px !important;
  }

  .card{ border-radius:14px !important; }
  .top-card{ padding:12px 14px !important; }
  .panel-head{ padding:12px 14px !important; gap:10px !important; }
  .panel-body{ padding:12px 14px !important; }
  .left-body, .right-body{ gap:10px !important; }

  h1{ font-size:24px !important; }
  h2{ font-size:13px !important; }
  .subtext{ margin-top:6px !important; font-size:11px !important; }
  .panel-sub,
  .field-group label,
  .field-card label,
  .field-summary-sub,
  .mini-badge,
  .topic-header,
  .menu-text,
  .menu-btn,
  .prop-help,
  .statusbar,
  .statusbar select,
  .statusbar input[type="number"]{
    font-size:11px !important;
  }

  .pill{ padding:3px 8px !important; font-size:10px !important; }
  .paint-title{ font-size:12px !important; }
  .menu-btn{
    gap:8px !important;
    padding:6px 10px !important;
    border-radius:10px !important;
  }
  .menu-icon{ font-size:12px !important; }
  .appmenu{
    top:38px !important;
    width:260px !important;
    padding:8px !important;
    border-radius:12px !important;
  }

  .topic-group,
  .tree-box,
  .prop-section,
  .rules-box,
  .usedclass-item,
  .sim-box,
  .validation-item{
    border-radius:12px !important;
  }
  .tree-box{ padding:10px !important; }
  .topic-header{ min-height:34px !important; padding:6px 8px !important; }
  .topic-count{ min-width:22px !important; font-size:9px !important; padding:2px 4px !important; }

  input,
  select,
  textarea,
  button{
    font-size:11px !important;
  }

  button{
    padding:8px 10px !important;
    border-radius:8px !important;
  }

  .field-card{
    padding:8px !important;
    border-radius:11px !important;
    margin-bottom:7px !important;
  }
  .field-card.inline-help-card{ padding:6px !important; }
  .field-card label{ margin-bottom:3px !important; }
  .field-actions{ top:7px !important; right:7px !important; }
  .icon-btn{
    width:24px !important;
    height:24px !important;
  }
  .field-control{ margin-top:2px !important; }
  .field-control input:not([type="checkbox"]):not([type="radio"]),
  .field-control select,
  .field-control textarea,
  .field-card select,
  .field-card input:not([type="checkbox"]):not([type="radio"]),
  .field-card textarea{
    font-size:11px !important;
    border-radius:8px !important;
  }
  .field-control input:not([type="checkbox"]):not([type="radio"]),
  .field-control select,
  .field-card select,
  .field-card input:not([type="checkbox"]):not([type="radio"]){
    min-height:25px !important;
    height:25px !important;
    padding:3px 6px !important;
    max-width:200px !important;
  }
  .field-control textarea,
  .field-card textarea{
    min-height:54px !important;
    padding:4px 6px !important;
  }
  .checkbox-row{ gap:6px !important; min-height:26px !important; }

  .df-row-ruler,
  .phone-grid-gutter{
    width:34px !important;
    flex-basis:34px !important;
  }
  .df-row-ruler-item{
    font-size:9px !important;
    padding:3px 6px 0 4px !important;
  }
  .df-row-ruler-item::after{ width:10px !important; }
  .df-row-ruler-item.is-selected::after{ width:18px !important; }

  .right-panel .field-summary-title{ font-size:13px !important; }
  .right-panel .field-summary-card{ padding:8px !important; gap:5px !important; }
  .right-panel .prop-section{ padding:10px 0 !important; }
  .prop-title{ margin-bottom:6px !important; }

  .client-preview-toolbar{
    margin-top:10px !important;
    padding:10px 12px !important;
    border-radius:16px !important;
  }

  .ep-modal-overlay{
    padding:7px 10px 7px !important;
  }
  .ep-modal{
    max-width:828px !important;
    width:calc(100% - 20px) !important;
    max-height:calc(100vh - 14px) !important;
  }
  .ep-modal-header{
    gap:10px !important;
    padding:12px 14px 10px !important;
  }
  .ep-modal-title{ font-size:13px !important; }
  .ep-modal-body{ padding:12px 14px !important; }
  .ep-modal-footer{ padding:10px 14px 12px !important; gap:8px !important; }

  .statusbar{
    padding:5px 10px !important;
  }
  .statusbar-inner{ gap:12px !important; }
  .statusbar select,
  .statusbar input[type="number"]{
    min-width:58px !important;
    height:28px !important;
    padding:4px 8px !important;
    border-radius:9px !important;
  }
  .statusbar input[type="range"]{ width:180px !important; }


/* Extracted from app.html style block 18 (id="df-canvas-single-surface-pass") */

  /* Keep only the main canvas surface visible; preserve structure and logic. */
  .section-card,
  .section-card:hover,
  .section-card.selected{
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .section-body{
    padding: 0 !important;
  }

  .section-head{
    display: none !important;
  }

  #previewSections{
    padding: 0 !important;
    background: transparent !important;
  }

  .phone-frame{
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .phone-grid{
    width: 100% !important;
    margin: 0 !important;
  }


/* Extracted from app.html style block 19 (id="df-canvas-content-only-10pct-pass") */

  /* Keep the canvas shell the same size; render only canvas content ~10% smaller. */
  .phone-grid-inner > *:not(.richtext-card):not(.subheader-card):not(.inline-help-card):not(.upload-download-card):not(.inline-policy-checkbox-card),
  .column-grid > *:not(.richtext-card):not(.subheader-card):not(.inline-help-card):not(.upload-download-card):not(.inline-policy-checkbox-card),
  .section-inline-help{
    transform: scale(0.9) !important;
    transform-origin: top left !important;
  }

  .phone-grid-inner > .richtext-card,
  .phone-grid-inner > .subheader-card,
  .phone-grid-inner > .inline-help-card,
  .phone-grid-inner > .upload-download-card,
  .phone-grid-inner > .inline-policy-checkbox-card,
  .column-grid > .richtext-card,
  .column-grid > .subheader-card,
  .column-grid > .inline-help-card,
  .column-grid > .upload-download-card,
  .column-grid > .inline-policy-checkbox-card{
    transform: none !important;
    transform-origin: top left !important;
  }

  .df-row-ruler-item{
    font-size: 10px !important;
  }


/* Extracted from app.html style block 20 (id="df-ruler-content-anchor-pass") */

  .df-row-ruler-item{
    padding-top: var(--df-ruler-row-pad-top, 5px) !important;
  }

  .df-row-ruler-item::after{
    top: var(--df-ruler-row-tick-top, 0px) !important;
  }


/* Extracted from app.html style block 21 (id="df-regular-field-closer-to-label-pass") */

  .field-card.two-row-canvas-field:not(.subheader-card):not(.inline-help-card):not(.richtext-card):not(.compact-grid-card):not(.employee-property-card):not(.epg-card):not(.management-assignment-card):not(.manager-selector-card) .field-control{
    margin-top: 6px !important;
  }


/* Extracted from app.html style block 25 (id="df-union-grid-layout-pass") */

  .field-card.union-grid-card{
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
    padding: 10px 10px 12px 10px !important;
    overflow: visible;
  }

  .field-card.union-grid-card .field-top{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: flex-end;
    z-index: 4;
    pointer-events: none;
  }

  .field-card.union-grid-card .field-label-row{
    display: none !important;
  }

  .field-card.union-grid-card .field-actions{
    position: static !important;
    margin: 0 !important;
    pointer-events: auto;
    opacity: 1;
  }

  .field-card.union-grid-card > .field-control{
    display: block;
    width: 100%;
    margin: 0 !important;
    min-height: 0;
  }

  .field-card.union-grid-card .union-grid-preview{
    display: grid;
    grid-template-columns: repeat(var(--union-grid-cols, 4), minmax(0, 1fr));
    column-gap: var(--union-grid-col-gap, 18px);
    row-gap: 0;
    align-items: start;
    align-content: start;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    padding-right: var(--union-grid-reserve-right, 22px);
  }

  .field-card.union-grid-card .union-grid-cell{
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--union-grid-control-gap, 6px);
  }

  .field-card.union-grid-card .union-grid-label{
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--union-grid-label-line-h, 15px);
    margin: 0;
    padding: 0 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: var(--union-grid-label-line-h, 15px);
    letter-spacing: 0;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .field-card.union-grid-card .union-grid-field{
    min-width: 0;
    display: block;
    margin: 0;
  }

  .field-card.union-grid-card .union-grid-input,
  .field-card.union-grid-card .union-grid-field > input,
  .field-card.union-grid-card .union-grid-field > select{
    display: block;
    width: 100%;
    max-width: none !important;
    min-width: 0;
    margin: 0;
  }

  .field-card.union-grid-card .resize-handle{
    right: 8px !important;
    bottom: 10px !important;
  }


/* Extracted from app.html style #df-floating-inspector-style */

  /* Floating (non-blocking) inspector: canvas-only UX, does not affect XML/project payload. */
  #dfFloatingInspector{
    position:fixed;
    top:84px;
    right:28px;
    width:420px;
    max-width:calc(100vw - 56px);
    max-height:calc(100vh - 120px);
    display:none;
    flex-direction:column;
    z-index:99999;
    background:#fff;
    border:1px solid rgba(148,163,184,.55);
    border-radius:18px;
    box-shadow:0 12px 30px rgba(15,23,42,.12);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    will-change:left, top;
    backface-visibility:hidden;
    transform:translateZ(0);
    contain:layout style;
    isolation:isolate;
    overflow:hidden;
  }
  #dfFloatingInspector.df-fi-dragging{
    box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #dfFloatingInspectorHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 12px;
    border-bottom:1px solid rgba(15,23,42,.06);
    background:transparent;
    cursor:move;
    user-select:none;
  }
  #dfFloatingInspectorHeader .df-fi-title{
    font-weight:600;
    color:rgba(15,23,42,.72);
    font-size:12px;
    letter-spacing:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #dfFloatingInspectorHeader .df-fi-actions{
    display:flex;
    gap:8px;
    align-items:center;
  }
  #dfFloatingInspectorHeader .df-fi-iconbtn{
    height:28px;
    width:28px;
    border-radius:9px;
    border:1px solid rgba(15,23,42,.08);
    background:rgba(255,255,255,.88);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:rgba(15,23,42,.72);
    font-size:11px;
    box-shadow:none;
    cursor:pointer;
  }
  #dfFloatingInspectorHeader .df-fi-iconbtn:hover{
    background:rgba(15,23,42,.04);
    color:#0f172a;
  }
  #dfFloatingInspectorHeader .df-fi-iconbtn:disabled{
    opacity:.45;
    cursor:not-allowed;
  }
  #dfFloatingInspectorBody{
    padding:10px;
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;

    /* Thin hover-reveal scrollbar (same feel as canvas). */
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  #dfFloatingInspectorBody:hover{
    scrollbar-color: rgba(15,23,42,0.30) transparent;
  }
  #dfFloatingInspectorBody::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }
  #dfFloatingInspectorBody::-webkit-scrollbar-track{
    background: transparent;
  }
  #dfFloatingInspectorBody::-webkit-scrollbar-thumb{
    background-color: transparent;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  #dfFloatingInspectorBody:hover::-webkit-scrollbar-thumb{
    background-color: rgba(15,23,42,0.30);
  }

  /* Reuse the same input look used in the right panel. */
  #dfFloatingInspector .prop-grid input,
  #dfFloatingInspector .prop-grid select,
  #dfFloatingInspector .prop-grid textarea{
    padding:9px 12px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,.45);
    background:rgba(255,255,255,.78);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  }
  #dfFloatingInspector .prop-grid input:focus,
  #dfFloatingInspector .prop-grid select:focus,
  #dfFloatingInspector .prop-grid textarea:focus{
    outline:none;
    border-color:rgba(0,122,255,.65);
    box-shadow:0 0 0 3px rgba(0,122,255,.16), inset 0 1px 0 rgba(255,255,255,.75);
    background:#fff;
  }

  /* When editor is popped out, show a gentle hint in the dock. */
  .df-popout-placeholder{
    padding:12px;
    border:1px dashed rgba(148,163,184,.45);
    border-radius:16px;
    background:rgba(248,250,252,.75);
    color:#334155;
    font-size:12px;
  }
  .df-popout-placeholder .ghost-btn{ margin-top:8px; }

  /* In the floating inspector, show ONLY the tabbed editor panes (no Selected Field summary/XML blocks). */
  #dfFloatingInspector .field-summary,
  #dfFloatingInspector .field-summary-card,
  #dfFloatingInspector .sf-snippet,
  #dfFloatingInspector .sf-note{ display:none !important; }

  /* Avoid duplicate tab strips: we provide our own tab bar in the floating header area. */
  #dfFloatingInspector #editorModeTabs,
  #dfFloatingInspector #editorTabs,
  #dfFloatingInspector #editorAuxTabs{ display:none !important; }

  #dfFloatingInspector.df-fi-single-section .df-fi-group-label,
  #dfFloatingInspector.df-fi-single-section #dfFiModeTabs,
  #dfFloatingInspector.df-fi-single-section #dfFiTabs,
  #dfFloatingInspector.df-fi-single-section #dfFiAuxTabs{
    display:none !important;
  }

  #dfFloatingInspector.df-fi-single-section #dfFloatingInspectorBody{
    padding-top:12px;
  }

  #dfFloatingInspector.df-fi-single-section:not([data-section="basic"]) .field-options-row{
    display:none !important;
  }

  #dfFloatingInspector .df-fi-group-label{
    margin: 0 2px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(15,23,42,.52);
  }
  #dfFloatingInspector .df-fi-tabs{
    display:flex;
    gap:8px;
    margin-bottom:10px;
  }
  #dfFloatingInspector .df-fi-tabs-mode{
    padding:4px;
    gap:4px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    background:rgba(248,250,252,.78);
  }
  #dfFloatingInspector .df-fi-tabs-mode .df-fi-tabbtn{
    height:28px;
    border-radius:12px;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    color:rgba(15,23,42,.62);
    font-size:12px;
    font-weight:600;
  }
  #dfFloatingInspector .df-fi-tabs-secondary{ margin-top:0 !important; }

  #dfFloatingInspector .df-fi-tabbtn{
    flex:1 1 0;
    height:34px;
    border-radius:12px;
    border:1px solid rgba(148,163,184,.45);
    background:rgba(255,255,255,.72);
    font-weight:600;
    font-size:12px;
    color:#0f172a;
    cursor:pointer;
  }
  #dfFloatingInspector .df-fi-tabbtn.active{
    background:rgba(0,122,255,.12);
    border-color:rgba(0,122,255,.35);
    color:#0b4fa8;
  }

  #dfFloatingInspector .df-fi-tabs-mode .df-fi-tabbtn.active{
    background:#fff;
    border-color:rgba(15,23,42,.10);
    color:rgba(15,23,42,.92);
    box-shadow:0 1px 0 rgba(15,23,42,.04);
  }
  #dfFloatingInspector .df-fi-tabbtn:disabled{
    opacity:.45;
    cursor:not-allowed;
  }

  /* Compact macOS-like layout inside the floating inspector. */
  #dfFloatingInspector .df-prop-grid-compact{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px 12px;
  }
  #dfFloatingInspector .df-prop-grid-compact .field-group.full{
    grid-column:1 / -1;
  }
  #dfFloatingInspector .df-prop-grid-compact .field-group label{
    font-size:11px;
    color:#475569;
  }
  #dfFloatingInspector .df-prop-grid-compact input,
  #dfFloatingInspector .df-prop-grid-compact select{
    height:34px;
  }
  #dfFloatingInspector .df-fi-tabs{ margin-bottom:8px; }
  #dfFloatingInspector .df-fi-tabs-mode{ margin-bottom:12px; }
  #dfFloatingInspector .df-fi-tabbtn{ height:30px; border-radius:12px; }
  #dfFloatingInspector .df-fi-tabs-mode .df-fi-tabbtn{
    height:28px;
    border-radius:12px;
  }


  /* === macOS polish (match Rich Text Editor) === */
  #dfFloatingInspector{
    border-radius:20px !important;
    border:1px solid var(--df-m-border) !important;
    background: var(--df-m-glass) !important;
    box-shadow: var(--df-m-shadow) !important;
    backdrop-filter: saturate(1.8) blur(18px) !important;
    -webkit-backdrop-filter: saturate(1.8) blur(18px) !important;
  }
  #dfFloatingInspector.df-fi-dragging{
    box-shadow:0 8px 18px rgba(15,23,42,.08) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #dfFloatingInspectorHeader{
    border-bottom:1px solid var(--df-m-border-soft) !important;
    padding:12px 14px !important;
    cursor:move;
  }
  #dfFloatingInspectorHeader .df-fi-title{
    font-weight:800 !important;
    font-size:14px !important;
    color: var(--df-m-text) !important;
  }
  #dfFloatingInspectorHeader .df-fi-iconbtn{
    height:32px !important;
    width:36px !important;
    border-radius:12px !important;
    border:1px solid rgba(148,163,184,.35) !important;
    background:#fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  }
  #dfFloatingInspectorBody{
    padding:14px !important;
  }

  /* Segmented control tabs */
  #dfFloatingInspector .df-fi-tabs{
    background: rgba(240,240,245,.85) !important;
    border: 1px solid var(--df-m-border-soft) !important;
    border-radius: 14px !important;
    padding: 4px !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
  }
  #dfFloatingInspector .df-fi-tabbtn{
    border: none !important;
    background: transparent !important;
    border-radius: 10px !important;
    height: 30px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: var(--df-m-text) !important;
  }
  #dfFloatingInspector .df-fi-tabbtn.active{
    background:#fff !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
    color: var(--df-m-text) !important;
  }

  /* Controls: fix select text clipping + match RTE feel */
  #dfFloatingInspector .df-prop-grid-compact .field-group label{
    font-size:12px !important;
    color: var(--df-m-muted) !important;
    font-weight:600 !important;
    margin-bottom:6px !important;
    display:block;
  }
  #dfFloatingInspector .df-prop-grid-compact input,
  #dfFloatingInspector .df-prop-grid-compact select{
    height:36px !important;
    line-height:36px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    border:1px solid rgba(148,163,184,.35) !important;
    background:#fff !important;
    font-size:13px !important;
    color: var(--df-m-text) !important;
  }
  #dfFloatingInspector .df-prop-grid-compact select{
    padding-right: 34px !important;
  }
  #dfFloatingInspector .df-prop-grid-compact input:focus,
  #dfFloatingInspector .df-prop-grid-compact select:focus{
    outline:none !important;
    border-color:#6366f1 !important;
    box-shadow:0 0 0 3px rgba(99,102,241,.16) !important;
  }

  /* Required/Read only pills compact */
  #dfFloatingInspector .pill-check{
    border:1px solid rgba(148,163,184,.35) !important;
    background:#fff !important;
    border-radius: 12px !important;
  }



  #dfFloatingInspector .toggle-row{
    display:flex !important;
    gap:10px !important;
    align-items:center !important;
    flex-wrap:wrap;
    margin: 8px 0 12px !important;
  }
  #dfFloatingInspector .toggle-chip{
    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;
    user-select:none;
  }
  #dfFloatingInspector .toggle-chip input{
    margin:0 !important;
    accent-color:#6366f1;
  }



/* Floating inspector: single-section Visibility / Filters should match Basic rhythm. */
#dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"],
#dfFloatingInspector.df-fi-single-section[data-section="filters"] .editor-pane[data-pane="filters"]{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:none !important;
}

/* Floating inspector: Filters should use the same calmer, single-card structure as Basic. */
#dfFloatingInspector .editor-pane[data-pane="filters"] .prop-grid{
  gap:12px !important;
}
#dfFloatingInspector .editor-pane[data-pane="filters"] .field-group.full{
  margin:0 !important;
}
#dfFloatingInspector .df-filter-section-head{
  margin:0 0 10px !important;
  padding:0 !important;
  align-items:center !important;
}
#dfFloatingInspector .df-filter-title{
  gap:8px !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:#1f2937 !important;
}
#dfFloatingInspector .df-filter-title-icon{
  color:#6b7280 !important;
}
#dfFloatingInspector .df-filter-add-btn{
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  background:#fff !important;
  color:#1f2937 !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset !important;
}
#dfFloatingInspector .df-filter-add-btn:hover{
  background:rgba(248,250,252,.92) !important;
}
#dfFloatingInspector .df-filters-editor{
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#dfFloatingInspector .df-filter-list{
  gap:10px !important;
}
#dfFloatingInspector .df-filter-card{
  padding:16px !important;
  border:1px solid rgba(148,163,184,.26) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
}
#dfFloatingInspector .df-filter-block + .df-filter-block{
  margin-top:12px !important;
}
#dfFloatingInspector .df-filter-label{
  margin:0 0 8px !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#334155 !important;
}
#dfFloatingInspector .df-filter-rule-row{
  grid-template-columns:minmax(120px, .85fr) minmax(0, 1.55fr) !important;
  gap:10px !important;
  align-items:center !important;
}
#dfFloatingInspector .df-filter-actions-row{
  margin-top:12px !important;
  gap:10px !important;
}
#dfFloatingInspector .df-filter-icon-btn{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  border:1px solid rgba(148,163,184,.35) !important;
  background:#fff !important;
  color:rgba(15,23,42,.72) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset !important;
}
#dfFloatingInspector .df-filter-icon-btn:hover{
  background:rgba(248,250,252,.92) !important;
}
#dfFloatingInspector .df-filter-empty{
  padding:4px 0 !important;
  font-size:12px !important;
  line-height:1.5 !important;
  color:#6b7280 !important;
}
#dfFloatingInspector .editor-pane[data-pane="filters"] .helper{
  margin-top:10px !important;
  font-size:12px !important;
  line-height:1.5 !important;
  color:#6b7280 !important;
}

  

  /* Floating inspector: logic panes follow the Basic popup layout rhythm. */
  #dfFloatingInspector [data-pane="advanced"] .prop-grid,
  #dfFloatingInspector #rulesPanel,
  #dfFloatingInspector #validationBuilderPanel{
    display:grid !important;
    gap:12px !important;
    margin-top:0 !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-list{
    display:grid !important;
    gap:12px !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-card,
  #dfFloatingInspector #rulesPanel .rule-card,
  #dfFloatingInspector #validationBuilderPanel .validation-item{
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-card + .advanced-setting-card,
  #dfFloatingInspector #rulesPanel .rule-card + .rule-card,
  #dfFloatingInspector #validationBuilderPanel .validation-item + .validation-item{
    border-top:1px solid rgba(15,23,42,.08) !important;
    padding-top:12px !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-head,
  #dfFloatingInspector #rulesPanel .rule-summary,
  #dfFloatingInspector #validationBuilderPanel .validation-summary{
    margin:0 0 6px !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-title,
  #dfFloatingInspector #rulesPanel .rule-summary,
  #dfFloatingInspector #validationBuilderPanel .validation-summary{
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1.4 !important;
    color:var(--df-m-muted) !important;
  }
  #dfFloatingInspector #rulesPanel .rule-summary strong,
  #dfFloatingInspector #validationBuilderPanel .validation-summary strong{
    font-weight:600 !important;
    color:var(--df-m-muted) !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-head .helper,
  #dfFloatingInspector #rulesPanel .helper,
  #dfFloatingInspector #validationBuilderPanel .helper{
    font-size:12px !important;
    line-height:1.45 !important;
    color:var(--df-m-muted) !important;
  }
  #dfFloatingInspector #rulesPanel .quick-row,
  #dfFloatingInspector #validationBuilderPanel .quick-row{
    margin:0 !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .field-group label,
  #dfFloatingInspector #rulesPanel .field-group label,
  #dfFloatingInspector #validationBuilderPanel .field-group label{
    display:block !important;
    margin-bottom:6px !important;
    font-size:12px !important;
    font-weight:600 !important;
    color:var(--df-m-muted) !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .field-group input,
  #dfFloatingInspector [data-pane="advanced"] .field-group select,
  #dfFloatingInspector #rulesPanel .field-group input,
  #dfFloatingInspector #rulesPanel .field-group select,
  #dfFloatingInspector #validationBuilderPanel .field-group input,
  #dfFloatingInspector #validationBuilderPanel .field-group select{
    min-height:36px !important;
    font-size:13px !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-actions,
  #dfFloatingInspector #rulesPanel .rule-actions,
  #dfFloatingInspector #validationBuilderPanel .validation-actions{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin-top:0 !important;
    padding-top:2px !important;
  }
  #dfFloatingInspector [data-pane="advanced"] .advanced-setting-actions button,
  #dfFloatingInspector #rulesPanel .quick-row .ghost-btn,
  #dfFloatingInspector #validationBuilderPanel .quick-row .ghost-btn,
  #dfFloatingInspector #rulesPanel .rule-actions button,
  #dfFloatingInspector #validationBuilderPanel .validation-actions button{
    min-width:88px !important;
    min-height:32px !important;
  }

/* Hide the selected-field editor while editing grid columns (prevents overlap). */
  body.df-grid-cols-mode #dfFloatingInspector{ display:none !important; }
  body.df-grid-cols-mode #selectedFieldPanel{ display:none !important; }
  /* Floating inspector already provides its own tab bar. Hide the inner (legacy) tabs. */
  #dfFloatingInspector #selectedFieldPanel .editor-tabs{ display:none !important; }


/* --- Right panel: tab rows match popup (compact, no bold, 2nd row side-by-side) --- */
.card.right-panel .editor-tabs{
  display: grid !important;
  gap: 6px !important;
  padding: 4px !important;
  background: rgba(15,23,42,.03) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 12px !important;
  margin-top: 8px;
}

.card.right-panel .editor-tabs:not(.editor-tabs-secondary){
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.card.right-panel .editor-tabs.editor-tabs-secondary{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.card.right-panel .editor-tab{
  height: 30px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(15,23,42,.82) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card.right-panel .editor-tab.active{
  background: #ffffff !important; /* pure white */
  color: rgba(15,23,42,.92) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.05) !important;
  font-weight: 600 !important;
}


/* Extracted from app.html style #df-fi-basic-parity-fix */

  /* Make single-section Visibility and Filters follow the same popup rhythm as Basic. */
  #dfFloatingInspector.df-fi-single-section[data-section="visibility"] #dfFloatingInspectorBody,
  #dfFloatingInspector.df-fi-single-section[data-section="filters"] #dfFloatingInspectorBody{
    padding-top:10px !important;
  }

  #dfFloatingInspector.df-fi-single-section[data-section="visibility"] .editor-pane[data-pane="visibility"],
  #dfFloatingInspector.df-fi-single-section[data-section="filters"] .editor-pane[data-pane="filters"]{
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:none !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] .prop-grid,
  #dfFloatingInspector .editor-pane[data-pane="filters"] .prop-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px 12px !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] .prop-grid > *,
  #dfFloatingInspector .editor-pane[data-pane="filters"] .prop-grid > *{
    grid-column:1 / -1 !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] .toggle-row,
  #dfFloatingInspector .editor-pane[data-pane="filters"] .toggle-row{
    margin:0 0 12px !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] .field-group label,
  #dfFloatingInspector .editor-pane[data-pane="filters"] .field-group label,
  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-label{
    display:block !important;
    margin:0 0 6px !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    color:#475569 !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] input,
  #dfFloatingInspector .editor-pane[data-pane="visibility"] select,
  #dfFloatingInspector .editor-pane[data-pane="filters"] input,
  #dfFloatingInspector .editor-pane[data-pane="filters"] select{
    height:34px !important;
    line-height:34px !important;
    padding:0 12px !important;
    border-radius:14px !important;
    border:1px solid rgba(148,163,184,.35) !important;
    background:#fff !important;
    font-size:13px !important;
    color:var(--df-m-text, #0f172a) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] select,
  #dfFloatingInspector .editor-pane[data-pane="filters"] select{
    padding-right:34px !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] input::placeholder,
  #dfFloatingInspector .editor-pane[data-pane="filters"] input::placeholder{
    color:rgba(100,116,139,.72) !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] .two-col{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px 12px !important;
    margin-top:0 !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] #simpleVisibilityPane,
  #dfFloatingInspector .editor-pane[data-pane="visibility"] #groupVisibilityPane{
    display:grid !important;
    gap:10px 12px !important;
    grid-template-columns:1fr !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] #groupVisibilityPane[style*="display:none"]{
    display:none !important;
  }
  #dfFloatingInspector .editor-pane[data-pane="visibility"] #simpleVisibilityPane[style*="display:none"]{
    display:none !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="visibility"] .logic-preview-box{
    margin-top:2px !important;
    padding:12px 14px !important;
    border-radius:16px !important;
    border:1px dashed rgba(191,219,254,.95) !important;
    background:rgba(248,250,252,.88) !important;
    box-shadow:none !important;
  }
  #dfFloatingInspector .editor-pane[data-pane="visibility"] .logic-preview-box strong{
    display:block !important;
    margin-bottom:4px !important;
    font-size:11px !important;
    font-weight:600 !important;
    color:#475569 !important;
  }
  #dfFloatingInspector .editor-pane[data-pane="visibility"] .logic-preview-box span{
    font-size:13px !important;
    line-height:1.45 !important;
    color:#475569 !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .field-group.full{
    margin:0 !important;
    gap:12px !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-section-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin:0 0 2px !important;
    padding:0 !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-title{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    font-size:13px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    color:#1e293b !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-title-icon{
    width:14px !important;
    height:14px !important;
    color:#6b7280 !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-add-btn{
    min-height:34px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    border:1px solid rgba(148,163,184,.35) !important;
    background:#fff !important;
    color:#1f2937 !important;
    font-size:13px !important;
    font-weight:500 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

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

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-list{
    display:grid !important;
    gap:12px !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-card{
    padding:16px !important;
    border:1px solid rgba(148,163,184,.26) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:none !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-block + .df-filter-block{
    margin-top:12px !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-rule-row{
    display:grid !important;
    grid-template-columns:minmax(136px, .88fr) minmax(0, 1.5fr) !important;
    gap:10px !important;
    align-items:center !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-actions-row{
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
    margin-top:12px !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-icon-btn{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
    border:1px solid rgba(148,163,184,.35) !important;
    background:#fff !important;
    color:rgba(15,23,42,.72) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .df-filter-empty,
  #dfFloatingInspector .editor-pane[data-pane="filters"] .helper{
    font-size:12px !important;
    line-height:1.5 !important;
    color:#64748b !important;
  }

  #dfFloatingInspector .editor-pane[data-pane="filters"] .helper{
    margin-top:2px !important;
  }


/* Shared mode control polish across Employee Property + Union grids */
.editor-mode-block{
  display:grid;
  gap:6px;
  margin-top:0;
}
.editor-mode-block .editor-group-label{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(15,23,42,.48);
}
.editor-mode-launchers,
.editor-mode-tabs#editorModeTabs{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:auto;
  margin-top:0;
  padding:4px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82), 0 1px 2px rgba(15,23,42,.05);
  backdrop-filter:saturate(180%) blur(14px);
}
.editor-mode-launchers .editor-mode-trigger,
.editor-mode-tabs#editorModeTabs .editor-tab[data-mode]{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:32px;
  padding:0 14px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:rgba(15,23,42,.68);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1;
  box-shadow:none;
  flex:0 0 auto;
  transition:background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.editor-mode-launchers .editor-mode-trigger:hover,
.editor-mode-tabs#editorModeTabs .editor-tab[data-mode]:hover{
  background:rgba(255,255,255,.60);
  color:rgba(15,23,42,.84);
  transform:none;
}
.editor-mode-launchers .editor-mode-trigger.active,
.editor-mode-launchers .editor-mode-trigger.open,
.editor-mode-launchers .editor-mode-trigger[aria-expanded="true"],
.editor-mode-launchers .editor-mode-trigger[data-visual-state="active"],
.editor-mode-launchers .editor-mode-trigger[data-visual-state="open"],
.editor-mode-tabs#editorModeTabs .editor-tab[data-mode].active{
  background:rgba(255,255,255,.94);
  color:rgba(15,23,42,.94);
  border-color:transparent;
  box-shadow:0 1px 2px rgba(15,23,42,.08), inset 0 0 0 1px rgba(15,23,42,.06);
  font-weight:500;
}
.editor-mode-launchers.menu-open .editor-mode-trigger[data-visual-state="inactive"]{
  background:transparent !important;
  color:rgba(15,23,42,.62) !important;
  box-shadow:none !important;
  border-color:transparent !important;
}
.editor-mode-launchers.menu-open .editor-mode-trigger[data-visual-state="inactive"]:hover{
  background:transparent !important;
  color:rgba(15,23,42,.62) !important;
}
.editor-mode-trigger-caret{
  width:11px;
  height:11px;
  color:currentColor;
  opacity:.56;
  flex:0 0 auto;
}
.editor-mode-launchers .editor-mode-trigger.active .editor-mode-trigger-caret,
.editor-mode-launchers .editor-mode-trigger.open .editor-mode-trigger-caret,
.editor-mode-launchers .editor-mode-trigger[aria-expanded="true"] .editor-mode-trigger-caret{
  opacity:.68;
}
.editor-mode-dropdown{
  min-width:180px;
  padding:5px;
  border:1px solid rgba(15,23,42,.09);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 32px rgba(15,23,42,.12);
  backdrop-filter:saturate(180%) blur(14px);
}
.editor-mode-dropdown-item{
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  color:rgba(15,23,42,.74);
  padding:8px 10px;
  border-radius:9px;
}
.editor-mode-dropdown-item:hover{
  background:rgba(248,250,252,.88);
  color:rgba(15,23,42,.88);
}
.editor-mode-dropdown-item-icon{
  width:11px;
  height:11px;
  color:rgba(15,23,42,.34);
}


/* Canvas shell simplification pass: remove the extra outer card and keep one main surface. */
.card.canvas{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card.canvas .panel-body{
  padding: 0 !important;
  background: transparent !important;
}

#previewSections{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(60,60,67,.09) !important;
  border-radius: 26px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
  padding: 12px !important;
}


/* Shell hierarchy pass: reduce detached panels and tighten workspace without touching field rendering. */
:root{
  --df-rightdock-w: 274px;
  --df-hierarchy-surface: rgba(255,255,255,.58);
  --df-hierarchy-surface-strong: rgba(255,255,255,.82);
  --df-hierarchy-border: rgba(60,60,67,.09);
  --df-hierarchy-border-soft: rgba(60,60,67,.06);
}

html,
body{
  background: transparent !important;
}

body{
  padding: 6px 8px 44px !important;
}

.app{
  gap: 8px !important;
  background: transparent !important;
}

.main{
  gap: 8px !important;
  min-height: calc(100vh - 132px) !important;
}

body.df-rightdock-open .main{
  grid-template-columns: minmax(0, 1fr) var(--df-rightdock-w) !important;
  column-gap: 8px !important;
}

.card.canvas,
.card.right-panel{
  margin: 0 !important;
}

.card.canvas{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card.canvas .panel-body{
  padding: 0 !important;
  background: transparent !important;
}

#previewSections{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid var(--df-hierarchy-border) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
  padding: 8px 10px !important;
}

.card.right-panel{
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card.right-panel .right-panel-inner{
  background: var(--df-hierarchy-surface) !important;
  border: 1px solid var(--df-hierarchy-border) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.card.right-panel .panel-body.right-body{
  padding: 14px 14px 16px !important;
}

.card.right-panel .prop-section{
  padding: 10px 0 !important;
}

.card.right-panel .prop-section + .prop-section{
  border-top-color: var(--df-hierarchy-border-soft) !important;
}

.card.right-panel .xml-preview-code{
  background: rgba(255,255,255,.72) !important;
  border-color: var(--df-hierarchy-border) !important;
}

.statusbar{
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.statusbar.card{
  border: none !important;
  box-shadow: none !important;
}

.statusbar-inner{
  padding: 4px 6px !important;
  gap: 8px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid var(--df-hierarchy-border) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.paint-rowbar-inner{
  padding: 0 1px !important;
}

.statusbar .field-group label{
  color: rgba(60,60,67,.72) !important;
}

.statusbar select,
.statusbar input[type="number"],
.paint-fit-btn,
.paint-row-btn,
.statusbar-right .paint-rows-input{
  border-color: var(--df-hierarchy-border) !important;
  background: rgba(255,255,255,.88) !important;
}

#canvasHeight::-webkit-slider-runnable-track,
#canvasHeight::-moz-range-track{
  background: rgba(60,60,67,.16) !important;
}


/* Rebuild the docked right rail as a true shell that rises into the header join.
   Why: host left rail starts higher than the iframe's natural right panel start. */
@media (min-width: 992px){
  body.df-rightdock-open .card.canvas{
    margin-top: 24px !important;
  }

  body.df-rightdock-open .card.right-panel{
    position: relative !important;
    margin-top: -24px !important;
    padding-top: 24px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  body.df-rightdock-open .card.right-panel::before{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: rgba(246,247,249,.62) !important;
    border: 1px solid rgba(60,60,67,.08) !important;
    border-top-left-radius: 26px !important;
    border-bottom-left-radius: 26px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
    z-index: 0 !important;
  }

  body.df-rightdock-open .card.right-panel .right-panel-inner{
    position: relative !important;
    z-index: 1 !important;
    margin: 0 10px 10px 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.df-rightdock-open .card.right-panel .panel-body.right-body{
    padding: 14px 14px 16px !important;
  }

  body.df-rightdock-open .card.right-panel .prop-section:first-child{
    padding-top: 0 !important;
  }

  body.df-rightdock-open .card.right-panel .prop-section + .prop-section{
    border-top: 1px solid rgba(60,60,67,.08) !important;
  }

  body.df-rightdock-open .card.right-panel .xml-preview-code{
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(60,60,67,.08) !important;
  }
}

/* --- right panel top-right curve only v3 --- */
@media (min-width: 992px){
  body.df-rightdock-open .card.right-panel{
    margin-right: -8px !important;
    padding-right: 8px !important;
  }

  body.df-rightdock-open .card.right-panel::before{
    right: 0 !important;
    border-top-right-radius: 26px !important;
    border-bottom-right-radius: 0 !important;
  }
}


/* --- assets/css-src/form-studio-app-post-font-bundle/30-form-studio-force-light-edge-fill.css --- */
/* Force a light workspace edge and remove the residual right-side gutter when the dock is closed. */
:root{
  color-scheme: light !important;
}

html,
body{
  color-scheme: light !important;
  background: #f5f5f7 !important;
}

body{
  padding-right: 0 !important;
}

.app,
.main,
.card.canvas,
.card.canvas > .panel-body{
  width: 100% !important;
  max-width: none !important;
}

body:not(.df-rightdock-open) #previewSections{
  margin-right: 0 !important;
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme: light !important;
  }

  html,
  body{
    background: #f5f5f7 !important;
    color: #1d1d1f !important;
  }

  .panel-head{
    background: rgba(60,60,67,.04) !important;
  }

  #previewSections{
    background: rgba(255,255,255,.86) !important;
    border-color: rgba(60,60,67,.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  .df-rightdrawer{
    background: #fff !important;
  }

  .df-rightdrawer-header{
    background: #fafbff !important;
    border-bottom-color: rgba(0,0,0,.08) !important;
  }

  .df-rightdrawer-title,
  .df-rightdrawer-pin .feather,
  .df-rightdrawer-close .feather{
    color: #111827 !important;
  }
}


/* --- assets/css-src/form-studio-app-post-font-bundle/31-form-studio-canvas-edge-line-killer.css --- */
/* Remove the remaining canvas edge rails. The visible lines were coming from nested canvas shells. */
#previewSections,
.phone-grid,
.phone-grid-inner,
.phone-grid-wrap,
.phone-grid-gutter,
.df-row-ruler{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#previewSections{
  background: #ffffff !important;
}

.phone-grid,
.phone-grid-inner{
  background: transparent !important;
}

.phone-grid{
  border-radius: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.phone-grid::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* Static right rail shell alignment pass.
   Why: the drawer is gone, so the persistent inspector should visually align with the host shell rail. */
@media (min-width: 992px){
  :root{
    --df-static-right-lift: 22px;
    --df-static-right-shell-radius: 24px;
    --df-static-right-shell-gap: 10px;
    --df-static-right-shell-height: calc(100vh - 116px);
    --df-static-canvas-scrollbar-size: 4px;
  }

  body.df-rightpanel-static .main{
    grid-template-columns: minmax(0, 1fr) var(--df-rightdock-w, 274px) !important;
    align-items: start !important;
    column-gap: 8px !important;
  }

  body.df-rightpanel-static .card.canvas{
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--df-static-right-shell-height) + var(--df-static-right-lift) + var(--df-static-right-shell-gap) + 72px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.df-rightpanel-static .card.canvas > .panel-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(60,60,67,.26) transparent !important;
  }

  body.df-rightpanel-static .card.canvas > .panel-body::-webkit-scrollbar{
    width: var(--df-static-canvas-scrollbar-size) !important;
  }

  body.df-rightpanel-static .card.canvas > .panel-body::-webkit-scrollbar-track{
    background: transparent !important;
  }

  body.df-rightpanel-static .card.canvas > .panel-body::-webkit-scrollbar-thumb{
    background: rgba(60,60,67,.26) !important;
    border-radius: 999px !important;
  }

  body.df-rightpanel-static .card.canvas > .panel-body::-webkit-scrollbar-thumb:hover{
    background: rgba(60,60,67,.34) !important;
  }

  body.df-rightpanel-static .card.canvas > .panel-body{
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(60,60,67,.08) !important;
    border-radius: 24px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  body.df-rightpanel-static #previewSections{
    height: 100% !important;
    min-height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    padding: 8px 10px 0 10px !important;
  }

  body.df-rightpanel-static .card.right-panel{
    position: relative !important;
    align-self: start !important;
    margin-top: calc(-1 * var(--df-static-right-lift)) !important;
    margin-right: -8px !important;
    padding-top: var(--df-static-right-lift) !important;
    padding-right: 8px !important;
    height: var(--df-static-right-shell-height) !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 var(--df-static-right-shell-radius) 0 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  body.df-rightpanel-static .card.right-panel::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(246,247,249,.62) !important;
    border: 1px solid rgba(60,60,67,.08) !important;
    border-radius: 0 var(--df-static-right-shell-radius) 0 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.df-rightpanel-static .card.right-panel .right-panel-inner{
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(100% - var(--df-static-right-shell-gap)) !important;
    min-height: 0 !important;
    margin: 0 var(--df-static-right-shell-gap) var(--df-static-right-shell-gap) var(--df-static-right-shell-gap) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-head{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding-top: 10px !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(60,60,67,.08) !important;
    border-radius: 0 !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-right: 0 !important;
    overflow: auto !important;
    direction: ltr !important;
    padding: 10px 10px 14px 10px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-body.right-body::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-body.right-body > *{
    direction: ltr !important;
  }

  body.df-rightpanel-static .card.right-panel .prop-section:first-child{
    padding-top: 0 !important;
  }

  body.df-rightpanel-static .card.right-panel .prop-section + .prop-section{
    border-top: 1px solid rgba(60,60,67,.08) !important;
  }

  body.df-rightpanel-static .card.right-panel .xml-preview-code{
    background: rgba(255,255,255,.72) !important;
    border: 1px solid rgba(60,60,67,.08) !important;
  }
}


/* Visual polish follow-up.
   Why: keep the canvas scrollbar off the top curve and make the right rail match the left lane better. */
@media (min-width: 992px){
  :root{
    --df-static-canvas-scrollbar-top-gap: 10px;
    --df-static-right-lane-bg: rgba(246,247,249,.62);
    --df-static-right-lane-border: rgba(60,60,67,.08);
  }

  body.df-rightpanel-static .card.canvas > .panel-body{
    overflow: hidden !important;
    padding-top: var(--df-static-canvas-scrollbar-top-gap) !important;
  }

  body.df-rightpanel-static #previewSections{
    height: calc(100% - var(--df-static-canvas-scrollbar-top-gap)) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 10px 0 10px !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(60,60,67,.26) transparent !important;
  }

  body.df-rightpanel-static #previewSections::-webkit-scrollbar{
    width: var(--df-static-canvas-scrollbar-size, 4px) !important;
  }

  body.df-rightpanel-static #previewSections::-webkit-scrollbar-track{
    background: transparent !important;
  }

  body.df-rightpanel-static #previewSections::-webkit-scrollbar-thumb{
    background: rgba(60,60,67,.26) !important;
    border-radius: 999px !important;
  }

  body.df-rightpanel-static #previewSections::-webkit-scrollbar-thumb:hover{
    background: rgba(60,60,67,.34) !important;
  }

  body.df-rightpanel-static .card.right-panel{
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    height: calc(var(--df-static-right-shell-height) + var(--df-static-right-lift)) !important;
    background: var(--df-static-right-lane-bg) !important;
    border-left: 1px solid var(--df-static-right-lane-border) !important;
    border-radius: 0 !important;
  }

  body.df-rightpanel-static .card.right-panel::before{
    inset: 0 !important;
    background: var(--df-static-right-lane-bg) !important;
    border: 0 !important;
    border-left: 1px solid var(--df-static-right-lane-border) !important;
    border-radius: 0 !important;
  }

  body.df-rightpanel-static .card.right-panel .right-panel-inner{
    height: 100% !important;
    margin: 0 !important;
    padding: 0 10px 10px 10px !important;
    background: transparent !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-head{
    padding: 10px 10px 12px !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    padding: 10px 10px 14px 10px !important;
    background: transparent !important;
  }
}


/* Right visual lane mirror.
   Why: stretch the copied lane across the full right rail so it reads as one single surface. */
@media (min-width: 992px){
  :root{
    --df-static-right-copy-lane-bg: rgba(241,242,245,.96);
    --df-static-right-copy-lane-edge: rgba(60,60,67,.08);
  }

  body.df-rightpanel-static .card.right-panel{
    position: relative !important;
    border-left: 0 !important;
    background: var(--df-static-right-copy-lane-bg) !important;
  }

  body.df-rightpanel-static .card.right-panel::before{
    inset: 0 !important;
    background: var(--df-static-right-copy-lane-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 1px 0 0 var(--df-static-right-copy-lane-edge) !important;
  }

  body.df-rightpanel-static .card.right-panel .right-panel-inner{
    padding-left: 10px !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-head{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* Right visual lane widen-right micro pass.
   Why: extend the mirrored lane a little further to the app edge without shifting the Properties content. */
@media (min-width: 992px){
  :root{
    --df-static-right-copy-lane-extra-right: 12px;
  }

  body.df-rightpanel-static .card.right-panel{
    overflow: visible !important;
  }

  body.df-rightpanel-static .card.right-panel::before{
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    right: calc(-1 * var(--df-static-right-copy-lane-extra-right)) !important;
  }
}


/* Statusbar right control inward alignment pass.
   Why: keep the rows/fit cluster under the canvas edge, not under the right rail. */
@media (min-width: 992px){
  body.df-rightpanel-static .statusbar-right{
    margin-right: calc(var(--df-rightdock-w, 274px) + 8px) !important;
  }
}


/* Statusbar rail clipping pass.
   Why: move the bottom-right tail inside the canvas edge instead of letting it extend under the right rail. */
@media (min-width: 992px){
  body.df-rightpanel-static .statusbar{
    right: calc(var(--df-rightdock-w, 274px) + 8px) !important;
  }

  body.df-rightpanel-static .statusbar-right{
    margin-right: 0 !important;
  }
}


/* Right gutter width match pass.
   Why: keep the right-side visual gutter aligned to the same size language as the left-side gutter. */
@media (min-width: 992px){
  :root{
    --df-static-right-copy-lane-extra-right: 0px;
  }
}


/* Right rail color match with left rail.
   Why: keep the persistent Properties lane on the same shell tone as the left sidebar. */
@media (min-width: 992px){
  :root{
    --df-static-right-copy-lane-bg: rgba(246,247,249,.62);
  }

  body.df-rightpanel-static .card.right-panel,
  body.df-rightpanel-static .card.right-panel::before{
    background: var(--df-static-right-copy-lane-bg) !important;
  }
}

/* Exact left-rail tone parity pass.
   Why: the right rail was visually darker because two translucent layers were stacking.
   Keep one tint layer only so the whole right side matches the left rail tone. */
@media (min-width: 992px){
  :root{
    --df-static-right-exact-left-bg: rgba(246,247,249,.62);
    --df-static-right-exact-left-edge: rgba(60,60,67,.08);
  }

  body.df-rightpanel-static .card.right-panel{
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.df-rightpanel-static .card.right-panel::before{
    background: var(--df-static-right-exact-left-bg) !important;
    border: 0 !important;
    box-shadow: inset 1px 0 0 var(--df-static-right-exact-left-edge) !important;
  }

  body.df-rightpanel-static .card.right-panel .right-panel-inner,
  body.df-rightpanel-static .card.right-panel .panel-head,
  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Final right-rail flat tone parity pass.
   Why: use the resolved left-rail composite color directly so the right side cannot render darker from transparency stacking. */
@media (min-width: 992px){
  :root{
    --df-static-right-flat-left-match: #f8f8fa;
    --df-static-right-flat-left-edge: rgba(60,60,67,.08);
  }

  body.df-rightpanel-static .card.right-panel{
    background: var(--df-static-right-flat-left-match) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.df-rightpanel-static .card.right-panel::before{
    inset: 0 !important;
    background: var(--df-static-right-flat-left-match) !important;
    border: 0 !important;
    border-left: 1px solid var(--df-static-right-flat-left-edge) !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  body.df-rightpanel-static .card.right-panel .right-panel-inner,
  body.df-rightpanel-static .card.right-panel .panel-head,
  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    background: var(--df-static-right-flat-left-match) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* Right rail alignment extension pass.
   Why: let the Properties rail finish on the same visual baseline as the left rail and the status row. */
@media (min-width: 992px){
  :root{
    --df-static-right-bottom-align-extend: 24px;
  }

  body.df-rightpanel-static .card.right-panel{
    overflow: visible !important;
  }

  body.df-rightpanel-static .card.right-panel::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(-1 * var(--df-static-right-bottom-align-extend)) !important;
    height: var(--df-static-right-bottom-align-extend) !important;
    background: var(--df-static-right-flat-left-match, #f8f8fa) !important;
    border-left: 1px solid var(--df-static-right-flat-left-edge, rgba(60,60,67,.08)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.df-rightpanel-static .card.right-panel .right-panel-inner,
  body.df-rightpanel-static .card.right-panel .panel-head,
  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    position: relative !important;
    z-index: 1 !important;
  }
}


/* Right rail full-down continuation pass.
   Why: the right-side lane was stopping above the bottom-right area; extend the same surface cleanly to the app bottom. */
@media (min-width: 992px){
  :root{
    --df-static-right-bottom-align-extend: 96px;
  }

  body.df-rightpanel-static .card.right-panel{
    overflow: visible !important;
  }

  body.df-rightpanel-static .card.right-panel::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(-1 * var(--df-static-right-bottom-align-extend)) !important;
    height: var(--df-static-right-bottom-align-extend) !important;
    background: var(--df-static-right-flat-left-match, #f8f8fa) !important;
    border-left: 1px solid var(--df-static-right-flat-left-edge, rgba(60,60,67,.08)) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.df-rightpanel-static .card.right-panel .right-panel-inner,
  body.df-rightpanel-static .card.right-panel .panel-head,
  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    position: relative !important;
    z-index: 1 !important;
  }
}


/* Canvas slider restore.
   Why: keep the canvas-owned thin vertical rail visible in both right-panel states
   without changing drawer behavior. */
@media (min-width: 992px){
  :root{
    --df-canvas-rail-size: 4px;
    --df-canvas-rail-top-gap: 10px;
    --df-canvas-rail-shell-height: calc(100vh - 116px);
    --df-canvas-rail-lift: 22px;
    --df-canvas-rail-gap: 10px;
  }

  body:not(.df-rightpanel-hidden) .card.canvas,
  body.df-rightpanel-hidden .card.canvas{
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    height: calc(
      var(--df-canvas-rail-shell-height) +
      var(--df-canvas-rail-lift) +
      var(--df-canvas-rail-gap) +
      72px
    ) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:not(.df-rightpanel-hidden) .card.canvas > .panel-body,
  body.df-rightpanel-hidden .card.canvas > .panel-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-top: var(--df-canvas-rail-top-gap) !important;
    padding-right: 0 !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(60,60,67,.08) !important;
    border-radius: 24px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62) !important;
  }

  body:not(.df-rightpanel-hidden) #previewSections,
  body.df-rightpanel-hidden #previewSections{
    height: calc(100% - var(--df-canvas-rail-top-gap)) !important;
    min-height: 0 !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    padding: 0 10px 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(60,60,67,.26) transparent !important;
  }

  body:not(.df-rightpanel-hidden) #previewSections::-webkit-scrollbar,
  body.df-rightpanel-hidden #previewSections::-webkit-scrollbar{
    width: var(--df-canvas-rail-size) !important;
  }

  body:not(.df-rightpanel-hidden) #previewSections::-webkit-scrollbar-track,
  body.df-rightpanel-hidden #previewSections::-webkit-scrollbar-track{
    background: transparent !important;
  }

  body:not(.df-rightpanel-hidden) #previewSections::-webkit-scrollbar-thumb,
  body.df-rightpanel-hidden #previewSections::-webkit-scrollbar-thumb{
    background: rgba(60,60,67,.26) !important;
    border-radius: 999px !important;
  }

  body:not(.df-rightpanel-hidden) #previewSections::-webkit-scrollbar-thumb:hover,
  body.df-rightpanel-hidden #previewSections::-webkit-scrollbar-thumb:hover{
    background: rgba(60,60,67,.34) !important;
  }
}


/* Keep only Columns + center zoom controls in the bottom bar.
   Why: remove the right-side rows/fit cluster without disturbing the updated canvas/ruler behavior. */
.statusbar-inner{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: initial !important;
}

.statusbar-left{
  justify-self: start !important;
  min-width: 0 !important;
}

.statusbar-center{
  grid-column: 2 !important;
  justify-self: center !important;
  min-width: 0 !important;
}

.statusbar-right{
  display: none !important;
}


/* Remove the empty bottom strip look while keeping the left Columns control
   and center zoom controls untouched. */
.statusbar-inner{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}


/* Bottom controls v7.
   Why: keep rows behavior untouched, split undo/redo into the center,
   and replace the Columns dropdown with a 0-10 slider on the right. */
.statusbar-inner.df-statusbar-v7{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:end !important;
  gap:18px !important;
  overflow:visible !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

.statusbar-inner.df-statusbar-v7 .statusbar-left,
.statusbar-inner.df-statusbar-v7 .statusbar-center,
.statusbar-inner.df-statusbar-v7 .statusbar-right{
  display:flex !important;
  align-items:flex-end !important;
  min-width:0 !important;
}

.statusbar-inner.df-statusbar-v7 .statusbar-left{
  justify-self:start !important;
}

.statusbar-inner.df-statusbar-v7 .statusbar-center{
  justify-self:center !important;
}

.statusbar-inner.df-statusbar-v7 .statusbar-right{
  justify-self:end !important;
}

.df-statusbar-v7 .paint-rowbar,
.df-statusbar-v7 .df-column-slider-group{
  margin:0 !important;
  padding:0 !important;
}

.df-statusbar-v7 .df-statusbar-rows-inner{
  display:flex !important;
  align-items:flex-end !important;
  gap:0 !important;
}

.df-statusbar-v7 .df-statusbar-support{
  display:none !important;
}

.df-statusbar-v7 #canvasHeightSliderWrap,
.df-statusbar-v7 .df-column-slider-shell{
  position:relative !important;
  width:154px !important;
  min-width:154px !important;
  display:flex !important;
  align-items:center !important;
}

.df-statusbar-v7 .df-statusbar-history{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.df-statusbar-v7 .paint-undo-btn,
.df-statusbar-v7 .paint-redo-btn{
  width:24px !important;
  height:24px !important;
}

.df-statusbar-v7 #canvasHeight,
.df-statusbar-v7 #columns{
  width:100% !important;
  height:24px !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  margin:0 !important;
}

.df-statusbar-v7 #canvasHeight::-webkit-slider-runnable-track,
.df-statusbar-v7 #columns::-webkit-slider-runnable-track{
  height:2px !important;
  background:rgba(15,23,42,.14) !important;
  border-radius:999px !important;
}

.df-statusbar-v7 #canvasHeight::-moz-range-track,
.df-statusbar-v7 #columns::-moz-range-track{
  height:2px !important;
  background:rgba(15,23,42,.14) !important;
  border-radius:999px !important;
}

.df-statusbar-v7 #canvasHeight::-webkit-slider-thumb,
.df-statusbar-v7 #columns::-webkit-slider-thumb{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:8px !important;
  height:8px !important;
  margin-top:-3px !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  background:#6d6df6 !important;
  box-shadow:0 2px 8px rgba(15,23,42,.18) !important;
}

.df-statusbar-v7 #canvasHeight::-moz-range-thumb,
.df-statusbar-v7 #columns::-moz-range-thumb{
  width:8px !important;
  height:8px !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  background:#6d6df6 !important;
  box-shadow:0 2px 8px rgba(15,23,42,.18) !important;
}

.df-statusbar-v7 .paint-rows-bubble,
.df-statusbar-v7 .df-columns-bubble{
  position:absolute !important;
  left:50% !important;
  top:-34px !important;
  transform:translateX(-50%) !important;
  padding:5px 12px !important;
  min-width:auto !important;
  white-space:nowrap !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:10px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
}

.df-statusbar-v7 .paint-rows-suffix{
  margin-left:4px !important;
}

.df-statusbar-v7 #columns{
  cursor:pointer !important;
}

.df-statusbar-v7 #columns:focus,
.df-statusbar-v7 #canvasHeight:focus{
  outline:none !important;
}

.df-statusbar-v7 #columns:focus-visible,
.df-statusbar-v7 #canvasHeight:focus-visible{
  outline:none !important;
}

@media (max-width: 900px){
  .statusbar-inner.df-statusbar-v7{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    gap:10px !important;
  }

  .statusbar-inner.df-statusbar-v7 .statusbar-left,
  .statusbar-inner.df-statusbar-v7 .statusbar-center,
  .statusbar-inner.df-statusbar-v7 .statusbar-right{
    justify-self:center !important;
  }
}


/* Bottom controls v8.
   Why: align rows/undo-redo/columns to the canvas inner work area instead of the full app width. */
.statusbar.df-statusbar-canvas-align{
  left: var(--df-statusbar-left, 12px) !important;
  right: var(--df-statusbar-right, 12px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.statusbar.df-statusbar-canvas-align .statusbar-inner.df-statusbar-v7{
  width: 100% !important;
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.statusbar.df-statusbar-canvas-align .statusbar-left,
.statusbar.df-statusbar-canvas-align .statusbar-center,
.statusbar.df-statusbar-canvas-align .statusbar-right{
  min-width: 0 !important;
}

.statusbar.df-statusbar-canvas-align .statusbar-right{
  max-width: min(100%, 220px) !important;
}

@media (max-width: 991px){
  .statusbar.df-statusbar-canvas-align{
    left: 12px !important;
    right: 12px !important;
  }
}


/* Bottom controls v9.
   Why: lift the control row slightly into the canvas and make the
   Columns bubble match Rows by showing only on hover/focus/use. */
.statusbar.df-statusbar-canvas-align{
  bottom: 18px !important;
}

.statusbar.df-statusbar-canvas-align .statusbar-inner.df-statusbar-v7{
  align-items: center !important;
}

.df-statusbar-v7 .statusbar-left,
.df-statusbar-v7 .statusbar-center,
.df-statusbar-v7 .statusbar-right{
  align-items: center !important;
}

.df-statusbar-v7 .df-column-slider-shell{
  overflow: visible !important;
}

.df-statusbar-v7 .df-columns-bubble{
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, 4px) scale(0.96) !important;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease !important;
  pointer-events: none !important;
}

.df-statusbar-v7 .df-column-slider-shell:hover .df-columns-bubble,
.df-statusbar-v7 .df-column-slider-shell:focus-within .df-columns-bubble{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) scale(1) !important;
}


/* Bottom controls v10.
   Why: remove the floating widget feel so Rows / Undo / Redo / Columns
   read as tools embedded into the canvas surface instead of pills on top. */
.statusbar.df-statusbar-canvas-align{
  bottom: 20px !important;
}

.statusbar.df-statusbar-canvas-align .statusbar-inner.df-statusbar-v7{
  gap: 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.df-statusbar-v7 #canvasHeightSliderWrap,
.df-statusbar-v7 .df-column-slider-shell{
  width: 136px !important;
  min-width: 136px !important;
  height: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.df-statusbar-v7 #canvasHeight,
.df-statusbar-v7 #columns{
  width: 100% !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

.df-statusbar-v7 #canvasHeight::-webkit-slider-runnable-track,
.df-statusbar-v7 #columns::-webkit-slider-runnable-track{
  height: 2px !important;
  background: rgba(100,116,139,.24) !important;
  border-radius: 999px !important;
}

.df-statusbar-v7 #canvasHeight::-moz-range-track,
.df-statusbar-v7 #columns::-moz-range-track{
  height: 2px !important;
  background: rgba(100,116,139,.24) !important;
  border-radius: 999px !important;
}

.df-statusbar-v7 #canvasHeight::-webkit-slider-thumb,
.df-statusbar-v7 #columns::-webkit-slider-thumb{
  width: 7px !important;
  height: 7px !important;
  margin-top: -2.5px !important;
  border: 1.5px solid rgba(255,255,255,.98) !important;
  background: #6d6df6 !important;
  box-shadow: 0 0 0 1px rgba(109,109,246,.10) !important;
}

.df-statusbar-v7 #canvasHeight::-moz-range-thumb,
.df-statusbar-v7 #columns::-moz-range-thumb{
  width: 7px !important;
  height: 7px !important;
  border: 1.5px solid rgba(255,255,255,.98) !important;
  background: #6d6df6 !important;
  box-shadow: 0 0 0 1px rgba(109,109,246,.10) !important;
}

.df-statusbar-v7 .df-statusbar-history{
  gap: 10px !important;
}

.df-statusbar-v7 .paint-undo-btn,
.df-statusbar-v7 .paint-redo-btn{
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(71,85,105,.86) !important;
  box-shadow: none !important;
}

.df-statusbar-v7 .paint-undo-btn:hover,
.df-statusbar-v7 .paint-redo-btn:hover,
.df-statusbar-v7 .paint-undo-btn:focus-visible,
.df-statusbar-v7 .paint-redo-btn:focus-visible{
  background: rgba(15,23,42,.045) !important;
  color: rgba(15,23,42,.92) !important;
  box-shadow: none !important;
  outline: none !important;
}

.df-statusbar-v7 .paint-undo-btn i,
.df-statusbar-v7 .paint-redo-btn i{
  font-size: 13px !important;
}

.df-statusbar-v7 .paint-rows-bubble,
.df-statusbar-v7 .df-columns-bubble{
  top: -32px !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.08) !important;
}


/* Bottom controls v11.
   Why: keep the inline embedded look, but let the thumb gently grow on
   hover / focus / drag so Rows and Columns feel more alive without turning
   into floating buttons. */
.df-statusbar-v7 #canvasHeight::-webkit-slider-thumb,
.df-statusbar-v7 #columns::-webkit-slider-thumb{
  transition: width 140ms ease, height 140ms ease, margin-top 140ms ease !important;
}

.df-statusbar-v7 #canvasHeight::-moz-range-thumb,
.df-statusbar-v7 #columns::-moz-range-thumb{
  transition: width 140ms ease, height 140ms ease !important;
}

.df-statusbar-v7 #canvasHeight:hover::-webkit-slider-thumb,
.df-statusbar-v7 #canvasHeight:focus-visible::-webkit-slider-thumb,
.df-statusbar-v7 #canvasHeight:active::-webkit-slider-thumb,
.df-statusbar-v7 #columns:hover::-webkit-slider-thumb,
.df-statusbar-v7 #columns:focus-visible::-webkit-slider-thumb,
.df-statusbar-v7 #columns:active::-webkit-slider-thumb{
  width: 9px !important;
  height: 9px !important;
  margin-top: -3.5px !important;
}

.df-statusbar-v7 #canvasHeight:hover::-moz-range-thumb,
.df-statusbar-v7 #canvasHeight:focus-visible::-moz-range-thumb,
.df-statusbar-v7 #canvasHeight:active::-moz-range-thumb,
.df-statusbar-v7 #columns:hover::-moz-range-thumb,
.df-statusbar-v7 #columns:focus-visible::-moz-range-thumb,
.df-statusbar-v7 #columns:active::-moz-range-thumb{
  width: 9px !important;
  height: 9px !important;
}


/* Bottom controls v12.
   Why: the slider thumbs still felt too tiny in use, so bump the resting
   size slightly and the active size a touch more without losing the
   embedded-on-canvas look. */
.df-statusbar-v7 #canvasHeight::-webkit-slider-thumb,
.df-statusbar-v7 #columns::-webkit-slider-thumb{
  width: 9px !important;
  height: 9px !important;
  margin-top: -3.5px !important;
}

.df-statusbar-v7 #canvasHeight::-moz-range-thumb,
.df-statusbar-v7 #columns::-moz-range-thumb{
  width: 9px !important;
  height: 9px !important;
}

.df-statusbar-v7 #canvasHeight:hover::-webkit-slider-thumb,
.df-statusbar-v7 #canvasHeight:focus-visible::-webkit-slider-thumb,
.df-statusbar-v7 #canvasHeight:active::-webkit-slider-thumb,
.df-statusbar-v7 #columns:hover::-webkit-slider-thumb,
.df-statusbar-v7 #columns:focus-visible::-webkit-slider-thumb,
.df-statusbar-v7 #columns:active::-webkit-slider-thumb{
  width: 11px !important;
  height: 11px !important;
  margin-top: -4.5px !important;
}

.df-statusbar-v7 #canvasHeight:hover::-moz-range-thumb,
.df-statusbar-v7 #canvasHeight:focus-visible::-moz-range-thumb,
.df-statusbar-v7 #canvasHeight:active::-moz-range-thumb,
.df-statusbar-v7 #columns:hover::-moz-range-thumb,
.df-statusbar-v7 #columns:focus-visible::-moz-range-thumb,
.df-statusbar-v7 #columns:active::-moz-range-thumb{
  width: 11px !important;
  height: 11px !important;
}


/* Top column ruler v14.
   Why: the top ruler tick should sit above the number so it reads like
   the row ruler, without changing the live column-slider behavior. */
.phone-grid{
  --df-column-ruler-height: 22px;
}

.df-column-ruler{
  position: sticky !important;
  top: 0 !important;
  z-index: 7 !important;
  display: block !important;
  min-height: var(--df-column-ruler-height) !important;
  height: var(--df-column-ruler-height) !important;
  margin-bottom: calc(var(--df-column-ruler-height) * -1) !important;
  pointer-events: none !important;
  background: transparent !important;
}

.df-column-ruler-track{
  display: grid !important;
  grid-template-columns: repeat(var(--df-column-ruler-cols, 1), minmax(120px, 1fr)) !important;
  column-gap: var(--df-column-ruler-gap, 2px) !important;
  align-items: start !important;
  min-height: 100% !important;
  padding: 0 var(--df-column-ruler-pad, 12px) !important;
  box-sizing: border-box !important;
  font-variant-numeric: tabular-nums !important;
}

.df-column-ruler-item{
  position: relative !important;
  min-width: 0 !important;
  padding: 12px 0 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  color: rgba(15,23,42,.45) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.df-column-ruler-item::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: auto !important;
  width: 1px !important;
  height: 10px !important;
  transform: translateX(-50%) !important;
  background: rgba(15,23,42,.16) !important;
}

.df-column-ruler-item::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: auto !important;
  width: 1px !important;
  height: 6px !important;
  transform: translateX(-50%) !important;
  background: rgba(15,23,42,.10) !important;
}

.df-column-ruler-item.is-major{
  color: rgba(15,23,42,.66) !important;
  font-weight: 700 !important;
}

.df-column-ruler-item.is-major::after{
  height: 12px !important;
  background: rgba(15,23,42,.22) !important;
}

.df-column-ruler-item.is-major::before{
  height: 8px !important;
  background: rgba(15,23,42,.14) !important;
}


/* Embedded ruler polish v17.
   Why: make both row and column rulers feel printed into the canvas while
   staying easy to read and keeping all current ruler behavior intact. */
.phone-grid{
  --df-ruler-ink: rgba(51,65,85,.68);
  --df-ruler-ink-major: rgba(15,23,42,.76);
  --df-ruler-tick: rgba(100,116,139,.24);
  --df-ruler-tick-major: rgba(71,85,105,.34);
  --df-ruler-spine: rgba(148,163,184,.14);
}

.phone-grid-gutter{
  position: relative !important;
}

.phone-grid-gutter::after{
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  bottom: 18px !important;
  right: 0 !important;
  width: 1px !important;
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--df-ruler-spine) 6%,
    var(--df-ruler-spine) 94%,
    transparent 100%
  ) !important;
  opacity: .9 !important;
  pointer-events: none !important;
}

.df-row-ruler{
  padding-top: 2px !important;
}

.df-row-ruler-item{
  padding: 3px 8px 0 4px !important;
  color: rgba(51,65,85,.54) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18) !important;
}

.df-row-ruler-item::after{
  top: 1px !important;
  width: 11px !important;
  height: 1px !important;
  background: var(--df-ruler-tick) !important;
}

.df-row-ruler-item::before{
  display: none !important;
}

.df-row-ruler-item.is-major{
  color: rgba(15,23,42,.62) !important;
  font-weight: 600 !important;
}

.df-row-ruler-item.is-major::after{
  width: 14px !important;
  background: var(--df-ruler-tick-major) !important;
}

.df-row-ruler-item.is-selected{
  color: rgba(15,23,42,.76) !important;
}

.df-row-ruler-item.is-selected::after{
  width: 18px !important;
  background: rgba(15,23,42,.42) !important;
}

.df-column-ruler{
  --df-column-ruler-height: 18px !important;
  min-height: var(--df-column-ruler-height) !important;
  height: var(--df-column-ruler-height) !important;
  margin-bottom: calc(var(--df-column-ruler-height) * -1) !important;
}

.df-column-ruler::before{
  content: "" !important;
  position: absolute !important;
  left: var(--df-column-ruler-pad, 12px) !important;
  right: var(--df-column-ruler-pad, 12px) !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent 0,
    var(--df-ruler-spine) 4%,
    var(--df-ruler-spine) 96%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
}

.df-column-ruler-track{
  align-items: start !important;
}

.df-column-ruler-item{
  padding: 8px 0 0 !important;
  color: rgba(51,65,85,.54) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18) !important;
}

.df-column-ruler-item::after{
  top: 0 !important;
  height: 8px !important;
  background: var(--df-ruler-tick) !important;
}

.df-column-ruler-item::before{
  top: 0 !important;
  height: 5px !important;
  background: rgba(100,116,139,.12) !important;
}

.df-column-ruler-item.is-major{
  color: rgba(15,23,42,.62) !important;
  font-weight: 600 !important;
}

.df-column-ruler-item.is-major::after{
  height: 10px !important;
  background: var(--df-ruler-tick-major) !important;
}

.df-column-ruler-item.is-major::before{
  height: 6px !important;
  background: rgba(71,85,105,.16) !important;
}


/* Canvas surface tone v18.
   Why: keep the studio shell soft, but make the actual form page read as a
   true white surface so white fields feel printed onto the same page. */
.card.canvas > .panel-body,
#previewSections,
.phone-frame,
.phone-grid,
.phone-grid-wrap,
.phone-grid-inner,
.phone-grid-gutter{
  background: #ffffff !important;
  background-image: none !important;
}

.phone-grid,
.phone-grid-wrap,
.phone-grid-inner,
.phone-grid-gutter{
  color-scheme: light !important;
}


/* Square the canvas top-left corner.
   Why: remove the curved seam where the canvas meets the upper-left shell area. */
#previewSections{
  border-top-left-radius: 0 !important;
}


/* Square the remaining outer canvas shell corner.
   Why: the visible curve was still coming from the outer canvas panel-body radius. */
.card.canvas > .panel-body,
#previewSections{
  border-top-left-radius: 0 !important;
}


/* Flatten the right rail and remove the top Properties heading.
   Why: match the left panel surface and remove the boxed card look. */
@media (min-width: 992px){
  .card.right-panel,
  body.df-rightpanel-static .card.right-panel{
    background: var(--df-static-right-flat-left-match, #f8f8fa) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .card.right-panel::before,
  .card.right-panel::after,
  body.df-rightpanel-static .card.right-panel::before,
  body.df-rightpanel-static .card.right-panel::after{
    background: var(--df-static-right-flat-left-match, #f8f8fa) !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .card.right-panel .right-panel-inner,
  body.df-rightpanel-static .card.right-panel .right-panel-inner{
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px 10px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .card.right-panel .right-panel-inner > .panel-head,
  body.df-rightpanel-static .card.right-panel .right-panel-inner > .panel-head{
    display: none !important;
  }

  .card.right-panel .panel-body.right-body,
  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    padding: 10px 12px 16px !important;
    background: transparent !important;
  }
}


/* Blend the remaining right-panel shell into the host rail surface.
   Why: keep the layout wrapper, but stop it reading as an extra visual layer. */
@media (min-width: 992px){
  :root{
    --df-right-rail-blend-bg: var(--df-apple-bg, #f5f5f7);
  }

  .card.right-panel,
  body.df-rightpanel-static .card.right-panel{
    background: var(--df-right-rail-blend-bg) !important;
  }

  .card.right-panel::before,
  .card.right-panel::after,
  body.df-rightpanel-static .card.right-panel::before,
  body.df-rightpanel-static .card.right-panel::after{
    background: var(--df-right-rail-blend-bg) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .card.right-panel .right-panel-inner,
  body.df-rightpanel-static .card.right-panel .right-panel-inner,
  .card.right-panel .panel-body.right-body,
  body.df-rightpanel-static .card.right-panel .panel-body.right-body{
    background: var(--df-right-rail-blend-bg) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}


/* Align selected-field XML and XML Preview content to the same left inset.
   Why: both XML panels should read as one clean code surface. */
:root{
  --df-right-panel-xml-left-pad: 10px;
}

.card.right-panel .sf-snippet-body,
.card.right-panel #selectedFieldXmlInline{
  display: block;
  margin: 0 !important;
  padding: 10px var(--df-right-panel-xml-left-pad) !important;
  box-sizing: border-box;
  text-align: left !important;
  text-indent: 0 !important;
  direction: ltr !important;
}

.card.right-panel .xml-preview-code{
  padding: 10px var(--df-right-panel-xml-left-pad) !important;
}

.card.right-panel .xml-preview-code #xmlPreview{
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  text-align: left !important;
  text-indent: 0 !important;
  direction: ltr !important;
}


/* Keep Selected Field XML polished, but do not override its native XML font rendering.
   Why: match the cleaner box layout while preserving the original selected-XML text face. */
.card.right-panel .sf-snippet{
  margin-top: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.card.right-panel .sf-snippet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: rgba(15,23,42,.78);
  font-size: 12px;
  font-weight: 700;
}

.card.right-panel #selectedFieldXmlInline.sf-snippet-body,
.card.right-panel #selectedSectionXmlInline.sf-snippet-body,
.card.right-panel #selectedRichTextXmlInline.sf-snippet-body{
  width: 100%;
  min-height: 170px;
  max-height: 300px;
  overflow: auto;
  resize: vertical;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 12px;
  background: rgba(15,23,42,.02);
  padding: 10px !important;
  color: inherit;
}


/* Match Selected Field/Section XML inner surface to XML Preview.
   Why: both XML readers should share the same inner code-surface fill without changing text rendering. */
.card.right-panel #selectedFieldXmlInline.sf-snippet-body,
.card.right-panel #selectedSectionXmlInline.sf-snippet-body,
.card.right-panel #selectedRichTextXmlInline.sf-snippet-body{
  background: rgba(255,255,255,.72) !important;
  border-color: var(--df-hierarchy-border, rgba(60,60,67,.08)) !important;
}


/* Extracted from 52-form-studio-ruler-gutters-visual-only.css */
/* Visual-only ruler gutters.
   Why: keep the row gutter panel, but reduce the top ruler fill to a single
   1px hairline so the embedded ruler stays clean without changing layout. */
.phone-grid-gutter{
  background: var(--df-static-right-flat-left-match, #f8f8fa) !important;
  background-image: none !important;
}

.df-column-ruler{
  background: transparent !important;
  background-image: none !important;
}


/* Extracted from 53-form-studio-row-0-safe-zone.css */
/* Row-0 visual safe zone v32g.
   Why: nudge top-row canvas fields slightly below the column ruler so the
   selected field chrome no longer collides with the "0" ruler label. */
.phone-grid-inner > .field-card.grid-item[data-grid-row-start="0"]{
  top: 8px !important;
}