:root{
  --font-ui:"Inter",Arial,sans-serif;
  --font-display:"Antonio",Impact,sans-serif;
  --text-xs:11.5px;
  --text-sm:12px;
  --text-md:12.5px;
  --text-base:13px;
  --text-title:13px;
  --lh:1.4;
  --ink:#303030;
  --muted:#7a7a7a;
  --faint:#a3a3a3;
  --line:#ececec;
  --field:#f4f4f4;
  --field-h:#ececec;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --field-h-px:32px;
  --control-h:32px;
  --control-compact-h:24px;
  --control-action-h:36px;
  --icon-sm:14px;
  --icon-md:16px;
  --icon-lg:20px;
  --radius-field:8px;
  --radius-seg:6px;
  --radius-round:999px;
  --accent:#5e67e6;
  --accent-soft:#f0efff;
}

body,button,input,textarea,select{font-family:var(--font-ui)}
h1,.fold-home h1,.fold-home h2,.fold-home h3,.mobile-preview-title{font-family:var(--font-display)}

/* Editor inspector type and spacing. Loaded last so older prototype rules cannot
   alter the compact reference rhythm. */
.pro-inspector,.pro-inspector button,.pro-inspector input,.pro-inspector textarea,.pro-inspector select{
  font-family:var(--font-ui)!important;
  color:var(--ink);
  font-size:var(--text-base);
  line-height:var(--lh);
  font-weight:400;
}
.pro-inspector #inspector-content .iv2-sec,.pro-inspector #inspector-content .iv2-tool{
  padding:var(--space-3) var(--space-4) 14px!important;
  border-color:var(--line)!important;
}
.pro-inspector #inspector-content .iv2-sec-title,.pro-inspector #inspector-content .iv2-tool-title{
  min-height:28px!important;
  height:28px!important;
  margin:0 0 6px!important;
  padding:0!important;
  gap:6px;
}
.pro-inspector .iv2-sec>h3,.pro-inspector .iv2-sec-title h3,
.pro-inspector .iv2-tool-title,.pro-inspector .sp-head h2{
  font-family:var(--font-ui)!important;
  font-size:var(--text-title)!important;
  line-height:var(--lh)!important;
  font-weight:600!important;
  letter-spacing:0!important;
}
.pro-inspector .iv2-head{
  height:52px;
  padding:var(--space-2) var(--space-3);
  gap:6px;
  border-color:var(--line);
}
.pro-inspector .iv2-head input{
  font-size:13.5px!important;
  font-weight:600!important;
}
.pro-inspector .iv2-head>button,.pro-inspector .iv2-kind{
  width:28px;
  height:28px;
}
.pro-inspector .iv2-head input,.pro-inspector .iv2-head select,
.pro-inspector .sp-filter,.pro-inspector .iv2-tool-side,.pro-inspector #iv2-face,
.pro-inspector #iv2-fill-type{
  height:var(--field-h-px)!important;
  border-radius:var(--radius-field)!important;
  background:var(--field)!important;
  font:500 var(--text-md)/var(--field-h-px) var(--font-ui)!important;
}
.pro-inspector #inspector-content .iv2-generated #iv2-fill-type{
  margin:0!important;
}
.pro-inspector .iv2-head{align-items:center!important}
.pro-inspector .iv2-head>#iv2-name,.pro-inspector .iv2-head>#iv2-face{
  height:var(--field-h-px)!important;min-height:var(--field-h-px)!important;
  margin:0!important;padding-top:0!important;padding-bottom:0!important;
  line-height:var(--field-h-px)!important;box-sizing:border-box!important;
}
.pro-inspector .iv2-head>#iv2-more{
  width:var(--field-h-px)!important;height:var(--field-h-px)!important;min-width:var(--field-h-px)!important;min-height:var(--field-h-px)!important;
  margin:0!important;padding:0!important;display:grid!important;place-items:center!important;
  line-height:1!important;box-sizing:border-box!important;
}
.pro-inspector .iv2-grid,.pro-inspector .iv2-align,
.pro-inspector .iv2-position .property-grid,.pro-inspector .iv2-layout-body,
.pro-inspector .property-grid,.pro-inspector .iv2-face-grid{
  gap:var(--space-2)!important;
}
.pro-inspector .iv2-sub,.pro-inspector .iv2-gradient label>span,
.pro-inspector .iv2-position .property-grid label{
  height:auto!important;
  margin:var(--space-2) 0 5px!important;
  color:var(--muted)!important;
  font-size:var(--text-xs)!important;
  line-height:var(--lh)!important;
  font-weight:400!important;
}
.pro-inspector label.iv2-field{
  height:var(--field-h-px)!important;
  min-height:var(--field-h-px)!important;
  border-radius:var(--radius-field)!important;
  background:var(--field)!important;
}
.pro-inspector label.iv2-field:hover{background:var(--field-h)!important}
.pro-inspector label.iv2-field>span{
  font-family:var(--font-ui)!important;
  font-size:var(--text-sm)!important;
  color:var(--faint)!important;
}
.pro-inspector label.iv2-field>i{
  font-family:var(--font-ui)!important;
  font-size:var(--text-xs)!important;
  color:var(--faint)!important;
}
.pro-inspector label.iv2-field>input{height:var(--field-h-px)!important;padding-top:0!important;padding-bottom:0!important;font:400 var(--text-base)/var(--field-h-px) var(--font-ui)!important}
.pro-inspector .iv2-colour-row label>span,.pro-inspector .iv2-gradient-hex>span,
.pro-inspector .iv2-stroke-hex>span{top:50%!important;transform:translateY(-50%)!important}
.pro-inspector .iv2-colour-row input,.pro-inspector .iv2-gradient-hex input,
.pro-inspector .iv2-dialog-value input,.pro-inspector .iv2-stroke-hex input{
  height:var(--field-h-px)!important;min-height:var(--field-h-px)!important;
  padding-top:0!important;padding-bottom:0!important;line-height:var(--field-h-px)!important;
  box-sizing:border-box!important;
}
.pro-inspector .iv2-colour-row>label,.pro-inspector .iv2-gradient-hex{
  display:block!important;height:var(--field-h-px)!important;min-height:var(--field-h-px)!important;
  margin:0!important;align-self:center!important;overflow:hidden;
}
.pro-inspector .iv2-colour-row>label>input,.pro-inspector .iv2-gradient-hex>input{
  display:block!important;margin:0!important;
}
.pro-inspector .iv2-fill-actions>*{align-self:center!important;margin:0!important}
.pro-inspector #iv2-stroke-toggle{
  width:var(--field-h-px)!important;height:var(--field-h-px)!important;min-width:var(--field-h-px)!important;min-height:var(--field-h-px)!important;
  padding:0!important;display:grid!important;place-items:center!important;line-height:1!important;
  box-sizing:border-box!important;
}
.pro-inspector #iv2-remove-fill,
.pro-inspector .iv2-palette-button{
  width:var(--field-h-px)!important;height:var(--field-h-px)!important;
  min-width:var(--field-h-px)!important;min-height:var(--field-h-px)!important;
  padding:0!important;display:grid!important;place-items:center!important;line-height:1!important;
  box-sizing:border-box!important;
}
.pro-inspector .iv2-colour-row{align-items:center!important;grid-template-columns:32px minmax(0,1fr) 32px!important}
.pro-inspector .iv2-colour-row>#iv2-swatch{width:32px!important;height:32px!important;margin:0!important}
.pro-inspector #iv2-remove-fill.is-on,.pro-inspector #iv2-stroke-toggle.is-on{color:var(--brand-accent,#5e67e6);border-color:var(--brand-accent,#5e67e6)!important;background:var(--brand-soft,#f0efff)!important}
.pro-inspector :where(#iv2-remove-fill,#iv2-stroke-toggle) svg,
.pro-inspector .iv2-prefix-icon svg,
body.pro-editor :where(.zoom-controls,.flat-zoom-controls,.model-zoom) button svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pro-inspector .iv2-prefix-icon{display:grid!important;place-items:center!important}
.pro-inspector .iv2-colour-row.fill-is-off>:not(#iv2-remove-fill),
.pro-inspector .iv2-gradient.fill-is-off .iv2-gradient-row>:not(#iv2-remove-fill):not(.iv2-fill-toggle-spacer){opacity:.4}
.pro-inspector .iv2-stroke-row{grid-template-columns:32px minmax(0,1fr) 82px 32px!important;align-items:center!important}
.pro-inspector .iv2-stroke-row>#iv2-stroke-swatch{width:32px!important;height:32px!important;margin:0!important}
.pro-inspector .iv2-stroke-row.stroke-is-off>:not(#iv2-stroke-toggle){opacity:.4}
.pro-inspector .iv2-stroke-hex{display:block!important;position:relative!important;height:var(--field-h-px)!important;min-height:var(--field-h-px)!important;margin:0!important;overflow:hidden!important}
.pro-inspector .iv2-stroke-hex>span{display:grid!important;align-items:center!important;height:var(--field-h-px)!important;top:0!important;transform:none!important;line-height:var(--field-h-px)!important}
.pro-inspector .iv2-stroke-hex>input{display:block!important;margin:0!important}
.pro-inspector .iv2-stroke-width{min-width:82px!important}
.pro-inspector .iv2-stroke-width>input{padding-right:26px!important}
.pro-inspector .iv2-segment{
  gap:var(--space-1);
  border-radius:var(--radius-seg);
  margin-bottom:var(--space-2);
}
.pro-inspector .iv2-segment button,.pro-inspector .iv2-mini-switch button{
  font:500 var(--text-sm)/var(--lh) var(--font-ui)!important;
}
.pro-inspector button{font-size:var(--text-md)!important;font-weight:500!important}
.pro-inspector .iv2-note,.pro-inspector .iv2-empty,.pro-inspector .iv2-tooltip,
.pro-inspector .asset-empty,.pro-inspector .helper{
  color:var(--faint)!important;
  font-size:var(--text-xs)!important;
  line-height:var(--lh)!important;
}
.pro-inspector .object-row,.pro-inspector .sp-layer{height:34px!important;min-height:34px!important}
.pro-inspector .object-row button,.pro-inspector .sp-layer-action{width:24px;height:24px}
.pro-inspector .sp-layer-name{font:400 var(--text-sm)/var(--lh) var(--font-ui)!important}
.pro-inspector .sp-group-title{height:34px;gap:var(--space-1)}
.pro-inspector .sp-side-name{font:600 var(--text-md)/var(--lh) var(--font-ui)!important}
.pro-inspector .sp-count{font-size:var(--text-xs);color:var(--faint)}
.pro-inspector .sp-head{height:52px;padding:0 var(--space-4)}
.pro-inspector .sp-groups{padding:0 var(--space-2) var(--space-2)}
.pro-inspector .sp-side-properties>.iv2-tool-title{height:52px!important;padding:0 var(--space-4)!important;margin:0!important}
.pro-inspector .sp-side-properties>.iv2-tool-title b{font-size:13.5px!important;font-weight:600!important}
.pro-inspector .iv2-menu kbd,.pro-inspector .iv2-image-row small,
.pro-inspector .iv2-shapes span{font-size:var(--text-xs)!important}

/* Design workspace component contract. These rules deliberately live in the
   last stylesheet so every tool state uses the same geometry and type. */
body.pro-editor .pro-inspector *,body.pro-editor .pro-inspector *::before,
body.pro-editor .pro-inspector *::after{box-sizing:border-box}

body.pro-editor .pro-inspector :where(button,input,select,textarea){
  font-family:var(--font-ui)!important;
}
body.pro-editor .pro-inspector :where(button,select){font-size:var(--text-md)!important}

/* Standard standalone fields. Inputs inside .iv2-field remain transparent so
   the field wrapper owns the shared 32px surface. */
body.pro-editor .pro-inspector :where(
  #iv2-name,#iv2-face,#iv2-font,#iv2-bg-mode,#iv2-shape-search,
  .iv2-tool-side,.sp-filter,.iv2-dialog-value input,.iv2-dialog-value select,
  .iv2-rgb input
){
  height:var(--control-h)!important;
  min-height:var(--control-h)!important;
  margin:0!important;
  border:0!important;
  border-radius:var(--radius-field)!important;
  background:var(--field)!important;
  color:var(--ink)!important;
  font:400 var(--text-base)/var(--control-h) var(--font-ui)!important;
}
body.pro-editor .pro-inspector :where(#iv2-face,.iv2-tool-side,.sp-filter,#iv2-font,#iv2-bg-mode){
  font-size:var(--text-md)!important;
  font-weight:500!important;
}
body.pro-editor .pro-inspector #iv2-copy{
  min-height:46px!important;
  border-radius:var(--radius-field)!important;
  background:var(--field)!important;
  color:var(--ink)!important;
  font:400 var(--text-base)/var(--lh) var(--font-ui)!important;
}

/* Property fields, prefixes and units. */
body.pro-editor .pro-inspector label.iv2-field{
  height:var(--control-h)!important;
  min-height:var(--control-h)!important;
  border-radius:var(--radius-field)!important;
  background:var(--field)!important;
}
body.pro-editor .pro-inspector label.iv2-field>input{
  height:var(--control-h)!important;
  min-height:var(--control-h)!important;
  color:var(--ink)!important;
  font:400 var(--text-base)/var(--control-h) var(--font-ui)!important;
}
body.pro-editor .pro-inspector label.iv2-field>span{
  color:var(--faint)!important;font-size:var(--text-sm)!important;
}
body.pro-editor .pro-inspector label.iv2-field>i{
  color:var(--faint)!important;font-size:var(--text-xs)!important;
}

/* Headers and icon actions. */
body.pro-editor .pro-inspector .iv2-head{
  grid-template-columns:var(--control-h) minmax(0,1fr) 70px var(--control-h)!important;
  min-height:52px!important;height:52px!important;
}
body.pro-editor .pro-inspector :where(.iv2-kind,#iv2-more,#iv2-remove-fill,#iv2-stroke-toggle,.iv2-palette-button){
  width:var(--control-h)!important;height:var(--control-h)!important;
  min-width:var(--control-h)!important;min-height:var(--control-h)!important;
  border-radius:var(--radius-field)!important;
  display:grid!important;place-items:center!important;padding:0!important;margin:0!important;
}
body.pro-editor .pro-inspector :where(.iv2-kind,#iv2-more,.iv2-palette-button) svg{
  width:var(--icon-md)!important;height:var(--icon-md)!important;
}
body.pro-editor .pro-inspector .iv2-layer-icon svg{
  width:var(--icon-sm)!important;height:var(--icon-sm)!important;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}

/* Segments, alignment groups and paired icon actions. */
body.pro-editor .pro-inspector :where(.iv2-segment,.iv2-mini-switch){
  min-height:var(--control-h)!important;height:var(--control-h)!important;
  padding:2px!important;border-radius:var(--radius-field)!important;
  background:var(--field-h)!important;
}
body.pro-editor .pro-inspector :where(.iv2-segment,.iv2-mini-switch)>button{
  height:28px!important;min-height:28px!important;
  border-radius:var(--radius-seg)!important;
  font:500 var(--text-sm)/1 var(--font-ui)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0 var(--space-2)!important;box-sizing:border-box!important;
}
body.pro-editor .pro-inspector .iv2-pop-tabs{
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  padding:2px!important;box-sizing:border-box!important;align-items:center!important;
}
body.pro-editor .pro-inspector .iv2-pop-tabs>button{
  height:28px!important;min-height:28px!important;margin:0!important;padding:0 var(--space-2)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;font:500 var(--text-sm)/1 var(--font-ui)!important;
}
body.pro-editor .pro-inspector .iv2-align>span{
  height:var(--control-h)!important;
  border:0!important;border-radius:var(--radius-field)!important;
  background:var(--field)!important;
}
body.pro-editor .pro-inspector .iv2-align button{
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  padding:var(--space-2)!important;border:0!important;background:transparent!important;
  border-radius:0!important;
}
body.pro-editor .pro-inspector .iv2-align svg,
body.pro-editor .pro-inspector .iv2-flips svg{
  width:var(--icon-md)!important;height:var(--icon-md)!important;
  display:block;fill:none!important;stroke:currentColor!important;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
body.pro-editor .pro-inspector .iv2-flips button{
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  border-radius:var(--radius-field)!important;
  display:grid!important;place-items:center!important;padding:0!important;
  box-sizing:border-box!important;line-height:1!important;
}

/* Gradient stops use stable columns; three-digit percentages keep their unit clear. */
body.pro-editor .pro-inspector .iv2-gradient-row{
  grid-template-columns:72px var(--control-h) minmax(0,1fr) var(--control-h)!important;
  height:var(--control-h)!important;align-items:center!important;
}
body.pro-editor .pro-inspector .iv2-stop-position{
  width:72px!important;height:var(--control-h)!important;min-height:var(--control-h)!important;
  margin:0!important;box-sizing:border-box!important;overflow:hidden!important;
  grid-template-columns:minmax(0,1fr) 18px!important;align-items:center!important;
}
body.pro-editor .pro-inspector .iv2-stop-position input{
  height:var(--control-h)!important;min-width:0!important;margin:0!important;
  padding:0 2px 0 6px!important;line-height:var(--control-h)!important;
}
body.pro-editor .pro-inspector .iv2-stop-position i{
  width:18px;height:var(--control-h)!important;display:grid!important;place-items:center!important;
  margin:0!important;line-height:1!important;
}

/* Full-width and textual tool actions. */
body.pro-editor .pro-inspector :where(#iv2-add-text,.iv2-upload){
  height:var(--control-action-h)!important;min-height:var(--control-action-h)!important;
  border-radius:var(--radius-field)!important;
  font:500 var(--text-md)/var(--control-action-h) var(--font-ui)!important;
}
body.pro-editor .pro-inspector .iv2-show{
  min-height:var(--control-h)!important;padding:0 var(--space-2)!important;
  font:500 var(--text-sm)/var(--control-h) var(--font-ui)!important;
}

/* Layer hierarchy keeps 34px rows and 24px icon actions. */
body.pro-editor .pro-inspector :where(.sp-layer,.object-row){
  height:34px!important;min-height:34px!important;border-radius:var(--radius-field)!important;
}
body.pro-editor .pro-inspector :where(.sp-layer-name,.sp-side-name){
  border-radius:0!important;background:transparent!important;
}
body.pro-editor .pro-inspector :where(.sp-layer-action,.object-row [data-object-toggle],.sp-group-toggle){
  width:var(--control-compact-h)!important;height:var(--control-compact-h)!important;
  min-width:var(--control-compact-h)!important;min-height:var(--control-compact-h)!important;
  border-radius:var(--radius-seg)!important;
}
body.pro-editor .pro-inspector .sp-layer-name{font-size:var(--text-sm)!important}
body.pro-editor .pro-inspector .sp-side-name{font-size:var(--text-md)!important}

/* Colour surfaces share the same radius, type and control height. */
body.pro-editor .pro-inspector :where(#iv2-swatch,#iv2-stroke-swatch,#iv2-remove-fill,#iv2-stroke-toggle){
  width:var(--control-h)!important;height:var(--control-h)!important;
  min-width:var(--control-h)!important;min-height:var(--control-h)!important;
  border-radius:var(--radius-field)!important;
  box-sizing:border-box!important;
}
body.pro-editor .pro-inspector :where(.iv2-colour-row>label,.iv2-gradient-hex,.iv2-stroke-hex,.iv2-stroke-width){
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  border-radius:var(--radius-field)!important;background:var(--field)!important;
}
body.pro-editor .pro-inspector :where(#iv2-hex,#iv2-stroke-hex,#iv2-stroke-width,[data-gradient-hex]){
  font:400 var(--text-base)/var(--control-h) var(--font-ui)!important;
}
body.pro-editor .pro-inspector :where(#iv2-hex,#iv2-stroke-hex,[data-gradient-hex]){
  background:transparent!important;border-radius:0!important;
}
body.pro-editor .pro-inspector .image-upload-button{
  height:var(--control-action-h)!important;min-height:var(--control-action-h)!important;
  margin:0!important;padding:0 var(--space-3)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid var(--line)!important;border-radius:var(--radius-field)!important;
  background:var(--field)!important;color:var(--ink)!important;
  font:500 var(--text-md)/var(--control-action-h) var(--font-ui)!important;
  cursor:pointer;
}
body.pro-editor .pro-inspector .image-upload-button input[type="file"]{display:none!important}
body.pro-editor .pro-inspector .iv2-tip{
  width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;
  padding:0!important;display:inline-grid!important;place-items:center!important;line-height:20px!important;
}

/* Design-page chrome: equivalent button groups now share one size. */
body.pro-editor .header-right button{
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  padding:0 var(--space-3)!important;border-radius:var(--radius-round)!important;
  font:500 var(--text-sm)/var(--control-h) var(--font-ui)!important;
}
body.pro-editor .workspace-viewbar :where(button,.segmented button),
body.pro-editor .pro-pane-title button{
  height:28px!important;min-height:28px!important;
  padding:0 var(--space-2)!important;
  font:500 var(--text-sm)/28px var(--font-ui)!important;
}
body.pro-editor .workspace-viewbar .segmented,
body.pro-editor .zoom-controls .segmented{min-height:var(--control-h)!important}
body.pro-editor .zoom-controls :where(#zoom-out,#zoom-in,#zoom-fit,.canvas-history),
body.pro-editor .zoom-controls .segmented button,
body.pro-editor .flat-zoom-controls button{
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  font:500 var(--text-sm)/var(--control-h) var(--font-ui)!important;
}
body.pro-editor .zoom-controls :where(#zoom-out,#zoom-in,#zoom-fit),
body.pro-editor .flat-zoom-controls button:first-child,
body.pro-editor .flat-zoom-controls button:nth-of-type(2){
  min-width:var(--control-h)!important;width:var(--control-h)!important;padding:0!important;
}
body.pro-editor .panel-view-chips button{
  height:28px!important;min-height:28px!important;
  padding:0 var(--space-2)!important;border-radius:var(--radius-seg)!important;
  font:500 var(--text-xs)/28px var(--font-ui)!important;
}
/* Shared icon and zoom treatment across the editor and Preview. */
:where(body.pro-editor,.updated-preview) :where(.zoom-controls,.flat-zoom-controls) :where(#zoom-out,#zoom-in,button[aria-label^="Zoom out"],button[aria-label^="Zoom in"]){
  width:var(--control-h)!important;min-width:var(--control-h)!important;
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  padding:0!important;display:inline-grid!important;place-items:center!important;flex:0 0 var(--control-h)!important;
  border:1px solid var(--line)!important;border-radius:50%!important;background:#fff!important;color:var(--ink)!important;
}
:where(body.pro-editor,.updated-preview) :where(.zoom-controls,.flat-zoom-controls) :where(#zoom-out,#zoom-in,button[aria-label^="Zoom out"],button[aria-label^="Zoom in"]) svg{
  width:16px!important;height:16px!important;display:block!important;fill:none!important;stroke:currentColor!important;
  stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
:where(body.pro-editor,.updated-preview) .flat-zoom-controls button:last-child{
  width:auto!important;min-width:max-content!important;height:var(--control-h)!important;min-height:var(--control-h)!important;
  padding:0 var(--space-3)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid var(--line)!important;border-radius:var(--radius-round)!important;background:#fff!important;color:var(--ink)!important;
  font:500 var(--text-sm)/var(--control-h) var(--font-ui)!important;
}
body.pro-editor .iv2-image-row>button{
  height:var(--control-h)!important;min-height:var(--control-h)!important;margin:0!important;padding:0 var(--space-3)!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;
  font:500 var(--text-md)/var(--control-h) var(--font-ui)!important;
}
body.pro-editor :where(.object-float button,.sp-layer-action,.sp-group-toggle,.iv2-palette-button,#iv2-more,.iv2-tip,.project-asset-trash,#toggle-inspector,.pro-pane-title button,.iv2-image-row>button,.zoom-controls button):hover,
.updated-preview :where(.flat-zoom-controls button,.panel-view-chips button,.mockup-heading button):hover{
  background-color:var(--field-h,#ececec)!important;
}
body.pro-editor .object-float button{
  width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;
  padding:6px!important;border-radius:var(--radius-seg)!important;
}
body.pro-editor .pro-canvas>.object-float [data-replace-image]{
  width:auto!important;min-width:max-content!important;height:28px!important;min-height:28px!important;
  padding:0 var(--space-2)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font:500 var(--text-sm)/28px var(--font-ui)!important;white-space:nowrap!important;
}
body.pro-editor .object-float svg{width:var(--icon-md)!important;height:var(--icon-md)!important}
body.pro-editor .pro-rail button{
  height:56px!important;min-height:56px!important;padding:6px 2px!important;
  border-radius:var(--radius-field)!important;
}
body.pro-editor .pro-rail button b{width:var(--icon-lg);height:var(--icon-lg);font-size:var(--icon-lg)!important;line-height:var(--icon-lg)!important}
body.pro-editor .pro-rail button span{font-size:var(--text-xs)!important;line-height:var(--lh)!important}

/* Tool headers contain 32–36px controls; keep the row tall enough so controls
   never overlap the panel divider. */
body.pro-editor .pro-inspector #inspector-content .iv2-tool-title,
body.pro-editor .pro-inspector #inspector-content .iv2-tool:has(.object-list) .iv2-tool-title{
  height:36px!important;min-height:36px!important;margin:0 0 6px!important;padding:0!important;
}
body.pro-editor .pro-inspector .iv2-tool-title>span{min-width:0}

/* The active side marker sits above adjacent die-cut faces, so all four blue
   edges remain visible. */
body.pro-editor .edit-face.active-face{box-shadow:none!important;z-index:20!important}
body.pro-editor .edit-face.active-face::after{
  content:"";position:absolute;inset:0;z-index:999;pointer-events:none;
  border:2px solid var(--accent);box-sizing:border-box;
}

/* Collapsing tools releases both the inspector and its rail to the canvas. */
body.pro-editor .pro-workspace.inspector-collapsed{
  grid-template-columns:0 0 minmax(0,1fr)!important;
}
body.pro-editor .inspector-collapsed :where(.pro-rail,.pro-inspector){
  visibility:hidden!important;overflow:hidden!important;padding:0!important;border:0!important;
}
body.pro-editor .workspace-viewbar #toggle-inspector{
  width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;
  padding:0!important;display:grid!important;place-items:center!important;border-radius:var(--radius-field)!important;
}
body.pro-editor .workspace-viewbar #toggle-inspector svg{
  width:var(--icon-md);height:var(--icon-md);fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* Text tool header and typography controls follow one 32px control row. */
body.pro-editor .pro-inspector #iv2-add-text{
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  line-height:var(--control-h)!important;padding:0 var(--space-3)!important;
}
body.pro-editor .pro-inspector #iv2-copy{
  height:56px;min-height:56px!important;max-height:180px;
  padding:10px 12px!important;resize:vertical!important;overflow:auto!important;
}
body.pro-editor .pro-inspector .iv2-typography{display:grid;gap:var(--space-2)}
body.pro-editor .pro-inspector .iv2-typography>h3{margin-bottom:0!important}
body.pro-editor .pro-inspector .iv2-typography :where(#iv2-font,.iv2-grid){margin:0!important}
body.pro-editor .pro-inspector :where(.iv2-font-style,.iv2-text-align){margin:0!important}
body.pro-editor .pro-inspector .iv2-text-align svg,
body.pro-editor .pro-inspector .iv2-line-height svg{
  width:var(--icon-md);height:var(--icon-md);display:block;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
body.pro-editor .pro-inspector .iv2-text-align button{display:grid!important;place-items:center!important}
body.pro-editor .pro-inspector .iv2-font-style :where(b,i){
  display:block;margin:0!important;padding:0!important;
  font-size:var(--text-base);font-style:normal;line-height:1!important;
}
body.pro-editor .pro-inspector .iv2-font-style i{font-style:italic}

/* Selected paint toggles retain exactly the same 32px footprint. */
body.pro-editor .pro-inspector :where(#iv2-remove-fill,#iv2-stroke-toggle){
  border:1px solid var(--line)!important;outline:0!important;box-shadow:none!important;
}
body.pro-editor .pro-inspector :where(#iv2-remove-fill,#iv2-stroke-toggle).is-on{
  border-color:transparent!important;
  box-shadow:inset 0 0 0 1.5px var(--brand-accent,#5e67e6)!important;
}

/* Unit labels reserve equal space so number spinners align for mm, pt, ° and %. */
body.pro-editor .pro-inspector label.iv2-field>i{
  min-width:18px!important;text-align:left!important;
}

/* Every colour-options action uses the same filled icon surface. */
body.pro-editor .pro-inspector .iv2-palette-button{
  background:var(--field)!important;color:var(--muted)!important;
}
body.pro-editor .pro-inspector .iv2-palette-button:hover{background:var(--field-h)!important}

/* Uploaded-background state keeps the same internal rhythm as the empty state. */
body.pro-editor .pro-inspector .iv2-background-image{
  display:flex!important;flex-direction:column!important;gap:var(--space-2)!important;
}
body.pro-editor .pro-inspector .iv2-background-image>h3{margin:0 0 2px!important}
body.pro-editor .pro-inspector .iv2-background-image :where(.iv2-upload,.iv2-image-row,#iv2-bg-mode,.iv2-field,.iv2-note){
  margin:0!important;
}
body.pro-editor .pro-inspector .iv2-background-image .iv2-image-row{
  min-height:48px;padding:4px 6px;border-radius:var(--radius-field);background:var(--field);
}
body.pro-editor .pro-inspector .iv2-background-image .iv2-image-row button{
  height:var(--control-h)!important;min-height:var(--control-h)!important;
  padding:0 var(--space-3)!important;border-radius:var(--radius-field)!important;
}

/* Unified colour picker: one visible picker, followed by project brand colours. */
body.pro-editor .pro-inspector .iv2-colour-dialog{
  position:fixed!important;z-index:1200!important;width:248px!important;margin:0!important;
  max-height:calc(100vh - 16px)!important;padding:12px!important;display:grid!important;gap:8px!important;overflow:auto!important;
  border:1px solid #ececec!important;border-radius:10px!important;background:#fff!important;
  box-shadow:0 12px 32px #0002!important;
}
body.pro-editor .pro-inspector .iv2-colour-dialog[hidden]{display:none!important}
body.pro-editor .pro-inspector .iv2-colour-dialog .iv2-sv{
  width:100%!important;height:160px!important;min-height:160px!important;margin:0!important;
  overflow:hidden!important;border-radius:8px!important;cursor:crosshair!important;
  background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,hsl(var(--h),100%,50%))!important;
}
body.pro-editor .pro-inspector .iv2-colour-dialog .iv2-sv:focus-visible{
  outline:2px solid var(--brand-accent,#5e67e6)!important;outline-offset:2px!important;
}
body.pro-editor .pro-inspector .iv2-colour-dialog .iv2-sv>i{
  width:14px!important;height:14px!important;border:2px solid #fff!important;border-radius:50%!important;
  box-shadow:0 1px 5px #0008!important;transform:translate(-50%,-50%)!important;
}
body.pro-editor .pro-inspector .iv2-hue-row{
  display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;gap:8px!important;align-items:center!important;
}
body.pro-editor .pro-inspector .iv2-eyedrop{
  width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:0!important;border-radius:6px!important;background:transparent!important;
}
body.pro-editor .pro-inspector .iv2-eyedrop[hidden]{display:none!important}
body.pro-editor .pro-inspector .iv2-eyedrop[hidden]+.iv2-hue{grid-column:1/-1!important}
body.pro-editor .pro-inspector .iv2-eyedrop svg{
  width:16px!important;height:16px!important;display:block!important;fill:none!important;stroke:currentColor!important;
  stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important;
}
body.pro-editor .pro-inspector input.iv2-hue{
  width:100%!important;height:12px!important;min-height:12px!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:999px!important;appearance:none!important;
  background:linear-gradient(90deg,#f00 0%,#ff0 16.6%,#0f0 33.3%,#0ff 50%,#00f 66.6%,#f0f 83.3%,#f00 100%)!important;
}
body.pro-editor .pro-inspector input.iv2-hue::-webkit-slider-runnable-track{
  height:12px!important;border:0!important;border-radius:999px!important;background:transparent!important;
}
body.pro-editor .pro-inspector input.iv2-hue::-webkit-slider-thumb{
  width:16px!important;height:16px!important;margin-top:-2px!important;appearance:none!important;
  border:2px solid #fff!important;border-radius:50%!important;background:transparent!important;box-shadow:0 1px 4px #0008!important;
}
body.pro-editor .pro-inspector input.iv2-hue::-moz-range-track{
  height:12px!important;border:0!important;border-radius:999px!important;background:transparent!important;
}
body.pro-editor .pro-inspector input.iv2-hue::-moz-range-thumb{
  width:12px!important;height:12px!important;border:2px solid #fff!important;border-radius:50%!important;
  background:transparent!important;box-shadow:0 1px 4px #0008!important;
}
body.pro-editor .pro-inspector .iv2-format{display:block!important;margin:0!important}
body.pro-editor .pro-inspector .iv2-value-row{
  display:grid!important;grid-template-columns:82px minmax(0,1fr)!important;gap:8px!important;margin:0!important;
}
body.pro-editor .pro-inspector .iv2-format :where(select,.iv2-colour-value){
  width:100%!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0 9px!important;
  border:0!important;border-radius:8px!important;background:var(--field,#f4f4f4)!important;
  color:var(--ink,#303030)!important;font:400 12px/32px var(--font-ui)!important;
}
body.pro-editor .pro-inspector .iv2-format>select{display:block!important;margin:0 0 8px!important}
body.pro-editor .pro-inspector .iv2-cmyk-fields{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;
}
body.pro-editor .pro-inspector .iv2-cmyk-fields label{position:relative!important;margin:0!important}
body.pro-editor .pro-inspector .iv2-cmyk-fields input{
  width:100%!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0 18px 0 6px!important;
  border:0!important;border-radius:8px!important;background:var(--field,#f4f4f4)!important;text-align:center!important;
}
body.pro-editor .pro-inspector .iv2-cmyk-fields span{
  position:absolute!important;right:5px!important;top:50%!important;transform:translateY(-50%)!important;
  color:var(--muted,#7a7a7a)!important;font-size:9px!important;pointer-events:none!important;
}
body.pro-editor .pro-inspector .iv2-colour-divider{height:1px!important;background:#ececec!important}
body.pro-editor .pro-inspector .iv2-brand-label{color:#7a7a7a!important;font-size:11.5px!important;line-height:16px!important}
body.pro-editor .pro-inspector .iv2-brand-grid{
  position:relative!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;min-height:24px!important;
}
body.pro-editor .pro-inspector :where(.iv2-brand-swatch,.iv2-brand-add){
  flex:0 0 24px!important;width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;
  margin:0!important;padding:0!important;border-radius:50%!important;
}
body.pro-editor .pro-inspector .iv2-brand-swatch{
  border:0!important;box-shadow:inset 0 0 0 1px #0002!important;
}
body.pro-editor .pro-inspector .iv2-brand-swatch.selected{
  box-shadow:inset 0 0 0 1px #0002,0 0 0 2px #303030!important;
}
body.pro-editor .pro-inspector .iv2-brand-add{
  display:grid!important;place-items:center!important;border:1px dashed #9a9a9a!important;background:#fff!important;color:#7a7a7a!important;
}
body.pro-editor .pro-inspector .iv2-brand-add svg{width:14px!important;height:14px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.75!important}
body.pro-editor .pro-inspector .iv2-brand-empty{color:#7a7a7a!important;font-size:11.5px!important;line-height:24px!important}
body.pro-editor .pro-inspector .iv2-swatch-remove{
  position:absolute!important;z-index:2!important;width:auto!important;height:28px!important;min-height:28px!important;
  padding:0 9px!important;border:1px solid #dedede!important;border-radius:7px!important;background:#fff!important;
  box-shadow:0 5px 16px #0002!important;color:#b52f2f!important;font-size:11.5px!important;
}

body.pro-editor .pro-inspector .iv2-brand-mini{
  display:flex!important;align-items:center!important;gap:6px!important;min-height:16px!important;margin-top:8px!important;
}
body.pro-editor .pro-inspector .iv2-brand-mini[hidden]{display:none!important}
body.pro-editor .pro-inspector .iv2-brand-mini>button:not(.iv2-brand-more){
  flex:0 0 16px!important;width:16px!important;min-width:16px!important;height:16px!important;min-height:16px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:50%!important;box-shadow:inset 0 0 0 1px #0002!important;
}
body.pro-editor .pro-inspector .iv2-brand-mini>button.selected{
  box-shadow:inset 0 0 0 1px #0002,0 0 0 1.5px #303030!important;
}
body.pro-editor .pro-inspector .iv2-brand-more{
  width:auto!important;min-width:0!important;height:16px!important;min-height:16px!important;margin:0!important;padding:0!important;
  border:0!important;background:transparent!important;color:#7a7a7a!important;font:500 11.5px/16px var(--font-ui)!important;
}
body.pro-editor .pro-inspector .iv2-gradient>.iv2-brand-mini{margin:0 0 2px 103px!important}