:root{--bg:#09090b;--fg:#f3f3f3;--muted:#a1a1aa;--accent:#7c3aed;--card:#111113;--border:#222225;--danger:#ef4444;}
*{box-sizing:border-box}
html{background-color:var(--site-bg-color, var(--bg))}
body{margin:0;background-color:var(--site-bg-color, var(--bg));background-image:var(--site-bg-image, none);background-repeat:var(--site-bg-repeat, no-repeat);background-position:var(--site-bg-position, 50% 50%);background-size:var(--site-bg-size, auto);background-attachment:var(--site-bg-attachment, scroll);color:var(--fg);font-family:var(--mp-ds-body-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--fg);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,100% - 2rem);margin:2rem auto}
.button{background:var(--accent);color:white;padding:.6rem 1rem;border-radius:.5rem;border:none;cursor:pointer;display:inline-block}
.muted{color:var(--muted);font-size:.9rem}
.card{background:var(--card);border:1px solid var(--border);padding:1rem;border-radius:.75rem}

/* Design Tokens (Global) */
.mp-token-title{font-family:var(--mp-ds-title-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-title-size,48px);font-weight:var(--mp-ds-title-weight,800);line-height:var(--mp-ds-title-line,1.08)}
.mp-token-subtitle{font-family:var(--mp-ds-subtitle-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-subtitle-size,32px);font-weight:var(--mp-ds-subtitle-weight,600);line-height:var(--mp-ds-subtitle-line,1.18)}
.mp-token-body{font-family:var(--mp-ds-body-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-body-size,18px);font-weight:var(--mp-ds-body-weight,400);line-height:var(--mp-ds-body-line,1.55)}

.mp-color-fg{color:var(--fg)}
.mp-color-muted{color:var(--muted)}
.mp-color-accent{color:var(--accent)}
.mp-color-danger{color:var(--danger)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.hero canvas{width:100%;height:auto;border-radius:.75rem}
audio{width:100%}

/* Header/Footer layout */
.mp-site-header{border-bottom:1px solid var(--border);background:var(--bg)}
.mp-site-header.is-sticky{position:sticky;top:0;z-index:9999}
.mp-header-inner{width:min(1100px,100% - 2rem);margin:0 auto;padding:1rem 0}
.mp-row{display:grid;grid-template-columns:repeat(var(--mp-cols),minmax(0,1fr));gap:var(--mp-gap);align-items:center}
.mp-col{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.mp-menu{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.mp-menu[data-mp-menu-mode="horizontal"] .mp-hamburger,.mp-menu[data-mp-menu-mode="horizontal"] .mp-menu-panel{display:none !important}
.mp-menu[data-mp-menu-mode="hamburger"] .mp-menu-inline{display:none !important}
.mp-menu-inline{display:flex;gap:.8rem;flex-wrap:wrap}
.mp-menu-inline a{color:var(--muted)}
.mp-hamburger{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--fg);padding:.5rem .75rem;border-radius:.5rem;cursor:pointer}
.mp-menu-panel{display:none;flex-direction:column;gap:.5rem;margin-top:.5rem;padding:.75rem;border:1px solid var(--border);border-radius:.75rem;background:rgba(0,0,0,.35)}
.mp-menu-panel.open{display:flex}

/* Builder FAB + toolbar */
.builder-fab{position:fixed;right:18px;bottom:18px;z-index:9999;background:var(--accent);color:#fff;padding:.65rem 1rem;border-radius:999px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Preview mode: hide admin/builder UI inside Settings iframe */
body.mp-preview .builder-fab{display:none !important}
.builder-toolbar{position:sticky;top:0;z-index:9998;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.75rem 1rem;border:1px solid var(--border);background:rgba(10,10,12,.82);backdrop-filter:blur(10px);border-radius:.75rem;margin-bottom:1rem}
.builder-shell{display:grid;grid-template-columns:1fr 340px;gap:1rem;align-items:start}
.builder-sidebar{position:sticky;top:0;height:calc(100vh - 2rem);overflow:auto;border:1px solid var(--border);background:rgba(10,10,12,.82);backdrop-filter:blur(10px);border-radius:.75rem;padding:.75rem}
.builder-layer{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;border-radius:.65rem;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);cursor:pointer}
.builder-layer.is-active{outline:2px solid rgba(255,255,255,.18);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.builder-props input,.builder-props textarea,.builder-props select{width:100%;padding:.65rem;border-radius:.55rem;background:#0b0b0c;border:1px solid rgba(255,255,255,.12);color:var(--fg);font-size:16px}

@media(max-width:900px){
  .mp-row{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .builder-shell{grid-template-columns:1fr}
  .builder-sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:60vh;z-index:10001;border-radius:1rem 1rem 0 0;box-shadow:0 -18px 40px rgba(0,0,0,.45)}
  body{padding-bottom:62vh}
}
@media(max-width:520px){.cards{grid-template-columns:1fr}}

/* Drag n Drop mode (Header/Footer) */
.ps-outline{outline:2px dashed rgba(255,255,255,.25);outline-offset:4px;border-radius:.5rem}
.ps-handle{width:12px;height:12px;border-radius:3px;background:rgba(124,58,237,.9);position:absolute;z-index:10002}
.ps-handle.br{right:-6px;bottom:-6px;cursor:nwse-resize}
.ps-handle.r{right:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.ps-handle.b{bottom:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}
.ps-selected{box-shadow:0 0 0 3px rgba(124,58,237,.35)}
.ps-inline-edit{outline:2px dashed rgba(124,58,237,.35);outline-offset:4px;border-radius:.5rem}

/* Innovative Columns builder visuals */
.dnd-row{border:1px dashed rgba(255,255,255,.18);border-radius:.75rem;padding:.75rem;margin:.75rem 0;background:rgba(0,0,0,.20)}
.dnd-cols{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:12px;margin-top:.5rem}
.dnd-col{border:1px dashed rgba(255,255,255,.12);border-radius:.65rem;padding:.5rem;min-height:56px;background:rgba(0,0,0,.18)}
.dnd-col.dragover{outline:2px solid rgba(124,58,237,.35)}
.dnd-item{border:1px solid rgba(255,255,255,.12);border-radius:.65rem;padding:.5rem;background:rgba(0,0,0,.35);cursor:grab;margin-bottom:.5rem}
.dnd-item:last-child{margin-bottom:0}
.ps-main-outline{outline:2px dashed rgba(124,58,237,.25);outline-offset:4px;border-radius:.5rem}

.drop-line{height:4px;border-radius:3px;background:rgba(124,58,237,.65);margin:.35rem 0}
.ps-pad-handle{width:12px;height:12px;border-radius:3px;background:rgba(34,197,94,.9);position:absolute;z-index:10003}
.ps-pad-handle.br{right:-6px;bottom:-6px;cursor:nwse-resize}

/* Column resize gutters */
.col-gutter{width:10px;cursor:col-resize;position:relative;align-self:stretch}
.col-gutter:before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.08);border-radius:2px}
.col-gutter:hover:before{background:rgba(124,58,237,.55)}

/* Asset picker modal */
.mp-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:20000;display:none}
.mp-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px, calc(100% - 2rem));max-height:80vh;overflow:auto;background:#0b0b0e;border:1px solid rgba(255,255,255,.12);border-radius:1rem;padding:1rem;z-index:20001;display:none}
.mp-modal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem}
.mp-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.mp-modal-item{border:1px solid rgba(255,255,255,.12);border-radius:.75rem;padding:.5rem;background:rgba(0,0,0,.35);cursor:pointer}
.mp-modal-item img{width:100%;height:110px;object-fit:cover;border-radius:.5rem}
.mp-inline-hint{color:var(--muted);font-size:.85rem;margin-top:.35rem}

/* UX polish: multiselect + snap guides */
.ms-selected{outline:2px solid rgba(34,197,94,.35); box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.snap-guide{position:absolute;top:0;bottom:0;width:2px;background:rgba(34,197,94,.75);pointer-events:none;z-index:10004}
.snap-label{position:absolute;top:6px;transform:translateX(-50%);background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12);padding:.2rem .4rem;border-radius:.4rem;font-size:.8rem;color:var(--fg);pointer-events:none;z-index:10005}
.dnd-col{position:relative}

/* Absolute positioning + final polish */
.layer-icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:.5rem;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);cursor:pointer}
.layer-icon:hover{background:rgba(0,0,0,.55)}
.is-hidden{opacity:.35}
.is-locked{opacity:.85}
.mp-col, .dnd-col{position:relative}

/* Absolute drag/resize handles */
.abs-box{outline:2px dashed rgba(124,58,237,.35);outline-offset:4px;border-radius:.5rem}
.abs-handle{width:10px;height:10px;border-radius:3px;background:rgba(124,58,237,.95);position:absolute;z-index:10006}
.abs-handle.br{right:-6px;bottom:-6px;cursor:nwse-resize}
.abs-handle.r{right:-6px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.abs-handle.b{bottom:-6px;left:50%;transform:translateX(-50%);cursor:ns-resize}

/* Absolute snap guides */
.abs-snap-guide{position:absolute;left:0;right:0;height:2px;background:rgba(34,197,94,.75);pointer-events:none;z-index:10007}
.abs-snap-guide.v{top:0;bottom:0;width:2px;height:auto}
.abs-snap-label{position:absolute;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12);padding:.2rem .4rem;border-radius:.4rem;font-size:.8rem;color:var(--fg);pointer-events:none;z-index:10008}

/* Grid + snap strength controls (builder) */
.grid-toggle{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .6rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);cursor:pointer}
.grid-toggle input{transform:scale(1.1)}
.snap-slider{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .6rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35)}
.snap-slider input[type="range"]{width:120px}

/* Better labels per axis */
.abs-snap-label.v{top:6px;transform:translateX(-50%)}
.abs-snap-label.h{left:6px;transform:translateY(-50%)}

/* Visible grid overlay (builder) */
#builder-sections.grid-visible{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: var(--grid-step, 10px) var(--grid-step, 10px);
  background-position: 0 0;
}

/* Floating Admin bubble */
.mp-adminbubble{
  position:fixed; right:.75rem; bottom:.75rem; z-index:99999;
  display:flex; gap:.35rem; flex-wrap:wrap;
  padding:.45rem; border-radius:.9rem;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.mp-adminbubble a{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.85rem; padding:.35rem .55rem;
  border-radius:.65rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.mp-adminbubble a:hover{ background:rgba(255,255,255,.10); }
@media (max-width:560px){
  .mp-adminbubble{ left:.75rem; right:.75rem; justify-content:center; }
  .mp-adminbubble a{ font-size:.82rem; padding:.33rem .5rem; }
}

/* Professional form controls */
input:not([type="checkbox"]):not([type="range"]):not([type="radio"]),
select, textarea{
  background:#0f0f12;
  border:1px solid rgba(255,255,255,.14);
  color:var(--fg);
  padding:.55rem .65rem;
  border-radius:.65rem;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(124,58,237,.85);
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

/* Professional polish */
.card{
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.button{
  transition: transform .06s ease, filter .12s ease, background .12s ease;
}
.button:hover{ filter:brightness(1.08); }
.button:active{ transform: translateY(1px); }

.mp-site-header{
  background: rgba(10,10,12,.92);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.mp-header-inner{
  width:min(1100px,100% - 2rem);
  margin:0 auto;
  padding:.9rem 0;
}
/* Admin pages quick spacing */
.card h2{ margin:.2rem 0 .6rem 0; }


/* Builder mode: move admin bubble to top-left (under logo) */
.builder-mode .mp-adminbubble{ left:1rem; right:auto; top:4.25rem; bottom:auto; }
@media (max-width: 720px){ .builder-mode .mp-adminbubble{ top:auto; bottom:1rem; left:1rem; right:auto; } }

/* Builder add dropdown */
.builder-add-wrap{ position:relative; display:inline-flex; }
.builder-add-menu{ position:absolute; top:calc(100% + .35rem); left:0; min-width:220px; z-index:999999; padding:.4rem; border-radius:.75rem; background:rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0,0,0,.55); display:none; }
.builder-add-menu button{ width:100%; text-align:left; margin:0; margin-bottom:.35rem; }
.builder-add-menu button:last-child{ margin-bottom:0; }


/* Admin bubble collapse toggle */
.mp-adminbubble{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.mp-adminbubble .mp-bubble-toggle{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.55); color:rgba(255,255,255,.9); cursor:pointer; }
.mp-adminbubble .mp-adminbubble-links{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.mp-adminbubble.collapsed{ padding:.5rem; }
.mp-adminbubble.collapsed .mp-adminbubble-links{ display:none; }

/* Floating menu (used for +Module dropdown) */
.builder-float-menu{ position:fixed; }


/* Markdown mini toolbar */
.md-toolbar{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.45rem; }
.md-toolbar .button{ padding:.35rem .55rem; border-radius:.6rem; font-size:.85rem; }

/* Right click context menu */
.builder-ctx-menu{ min-width:200px; }


/* Free layout (absolute drag inside Row) */
.free-row .dnd-col.free-canvas{background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.10);}
.free-row .dnd-item{margin:0;cursor:move;touch-action:none;user-select:none;overflow:auto;}
.free-row .dnd-item > .muted{display:none;}
.free-row .dnd-item.ps-selected > .muted{display:flex;}
.free-row .dnd-item.is-dragging{cursor:grabbing;opacity:.95;}


/* Drag n Drop UI polish */

/* In builder mode we still want to preview the real site background (wallpaper).
   Fallback keeps the editor readable if no background is configured. */
body.builder-mode{background-color:var(--site-bg-color, #0b0c10);background-image:var(--site-bg-image, none);background-repeat:var(--site-bg-repeat, no-repeat);background-position:var(--site-bg-position, 50% 50%);background-size:var(--site-bg-size, auto);background-attachment:var(--site-bg-attachment, scroll);}
.builder-toolbar{
  position:sticky; top:0;
  padding:.6rem .75rem;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(20,22,28,.92), rgba(12,13,18,.86));
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.builder-toolbar .button{
  padding:.42rem .7rem;
  border-radius:.7rem;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.builder-toolbar .button:hover{ background:rgba(255,255,255,.10); }
.builder-toolbar .button:active{ transform:translateY(1px); }

.builder-statuspill{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .6rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(0,0,0,.25);font-size:.9rem;color:rgba(255,255,255,.92);}
.builder-statuspill .dot{width:8px;height:8px;border-radius:999px;background:rgba(120,255,180,.85);box-shadow:0 0 0 3px rgba(120,255,180,.15);}
.builder-statuspill.is-dirty .dot{background:rgba(255,190,80,.95);box-shadow:0 0 0 3px rgba(255,190,80,.18);}
.builder-statuspill.is-saving .dot{background:rgba(120,170,255,.95);box-shadow:0 0 0 3px rgba(120,170,255,.18);}
.builder-statuspill .txt{white-space:nowrap;}

.builder-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);padding:.65rem .9rem;border-radius:.85rem;border:1px solid rgba(255,255,255,.14);background:rgba(20,22,28,.92);color:rgba(255,255,255,.95);opacity:0;pointer-events:none;transition:opacity .18s, transform .18s;z-index:10000;}
.builder-toast.is-show{opacity:1;transform:translateX(-50%) translateY(-6px);}
.builder-toast[data-kind="error"]{border-color:rgba(255,90,90,.35);background:rgba(60,10,10,.92);}
.builder-toast[data-kind="success"]{border-color:rgba(120,255,180,.25);}
.builder-shell{ gap:.85rem; }
#builder-sections{
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  padding:.85rem;
  min-height:60vh;
}
#builder-sections.grid-visible{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: var(--grid-step, 10px) var(--grid-step, 10px);
  background-position: 0 0;
}
.builder-sidebar{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,20,26,.92), rgba(10,11,15,.88));
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.builder-tabs{ display:flex; gap:.35rem; padding:.35rem; border:1px solid rgba(255,255,255,.10); border-radius:.8rem; background:rgba(0,0,0,.25); }
.builder-tab{
  flex:1;
  padding:.45rem .6rem;
  border-radius:.7rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.9);
  cursor:pointer;
  font-weight:650;
  letter-spacing:.2px;
}
.builder-tab.is-active{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 0 0 3px rgba(0,0,0,.25) inset, 0 0 0 1px rgba(255,255,255,.08);
}
.builder-panel{ margin-top:.65rem; }
.builder-layer{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.builder-layer:hover{ background:rgba(255,255,255,.07); }
.builder-layer.is-active{
  outline:none;
  border-color:rgba(120,170,255,.35);
  box-shadow:0 0 0 2px rgba(120,170,255,.22);
}
/* Selected cards (PS feeling) */
.ps-selected, .ps-main-outline{
  outline:2px solid rgba(120,170,255,.55);
  outline-offset:3px;
  border-radius:.9rem;
}
/* Context menus */
.builder-add-menu{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(14,15,20,.96);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.builder-add-menu .button{
  width:100%;
  text-align:left;
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
}
.builder-add-menu .button:hover{ background:rgba(255,255,255,.08); }

/* nicer scrollbars in panels */
.builder-sidebar, #builder-sections{
  scrollbar-color: rgba(255,255,255,.18) rgba(0,0,0,.15);
  scrollbar-width: thin;
}
.builder-sidebar::-webkit-scrollbar, #builder-sections::-webkit-scrollbar{ width:10px; height:10px; }
.builder-sidebar::-webkit-scrollbar-thumb, #builder-sections::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border:3px solid rgba(0,0,0,0);
  background-clip: padding-box;
  border-radius:999px;
}



/* Admin bubble position: LEFT (requested) */
.mp-adminbubble{
  right:auto !important;
  left:1rem !important;
}

/* Builder mode: dock admin bubble on the left under the top toolbar */
body.builder-mode .mp-adminbubble{
  top:84px !important;
  bottom:auto !important;
  flex-direction:column;
  align-items:flex-start;
  width:min(240px, calc(100vw - 24px));
}

body.builder-mode .mp-adminbubble .mp-adminbubble-links{
  flex-direction:column;
  align-items:stretch;
  width:100%;
}

body.builder-mode .mp-adminbubble .mp-adminbubble-links a{
  width:100%;
  justify-content:flex-start;
}


/* Responsive switch: Desktop Canvas / Mobile Flow */

/* Builder mobile preview (forces 'mobile flow' even on desktop) */
#builder-sections.builder-mobile-preview{
  max-width: 430px;
  margin: 0 auto;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 60px rgba(0,0,0,.55);
}
#builder-sections.builder-mobile-preview::before{
  content: "Mobile Preview";
  display:block;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.6);
  padding:.4rem .55rem;
  margin-bottom:.55rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:.75rem;
  background: rgba(0,0,0,.25);
  width: fit-content;
}

/* Free rows: in mobile preview, stack absolute modules (ignore left/top/width/height) */
#builder-sections.builder-mobile-preview .free-row .dnd-col{
  display:block;
}
#builder-sections.builder-mobile-preview .free-row .dnd-col.free-canvas{
  min-height: auto !important;
  padding: .35rem;
  overflow: visible;
  display:flex;
  flex-direction:column;
  gap: var(--mp-gap, 12px);
}
#builder-sections.builder-mobile-preview .free-row .dnd-item{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  cursor: default;
}



/* Mobile Flow columns for Free rows (1 or 2 columns) */
#builder-sections.builder-mobile-preview .free-row[data-mobile-cols="2"] .dnd-col.free-canvas{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mp-gap, 12px);
}
#builder-sections.builder-mobile-preview .free-row[data-mobile-cols="2"] .dnd-item{
  width: auto !important;
  margin: 0 !important;
}

#builder-sections.builder-mobile-preview .free-row[data-mobile-cols="2"] .dnd-item[data-mspan="2"]{
  grid-column: 1 / span 2;
}



/* Builder tablet preview */
#builder-sections.builder-tablet-preview{
  max-width: 920px;
  margin: 0 auto;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 18px 60px rgba(0,0,0,.45);
}
#builder-sections.builder-tablet-preview::before{
  content: "Tablet Preview";
  display:block;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.6);
  padding:.4rem .55rem;
  margin-bottom:.55rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:.75rem;
  background: rgba(0,0,0,.25);
  width: fit-content;
}
/* Live site: Free rows use absolute on desktop, flow on mobile */
.mp-row.mp-row-free{ position: relative; }
.mp-row.mp-row-free .mp-col.mp-free-canvas{ position: relative; }
.mp-row.mp-row-free .mp-abs-item{ position:absolute; }


/* Free rows: responsive X/Y/W/H + order variables */
@media (min-width: 761px) and (max-width: 1024px){
  .mp-row.mp-row-free .mp-abs-item{
    --x: var(--x-t, var(--x-d));
    --y: var(--y-t, var(--y-d));
    --w: var(--w-t, var(--w-d));
    --h: var(--h-t, var(--h-d));
    --ord: var(--ord-t, var(--ord-d));
  }
}
@media (max-width: 760px){
  .mp-row.mp-row-free .mp-abs-item{
    --x: var(--x-m, var(--x-t, var(--x-d)));
    --y: var(--y-m, var(--y-t, var(--y-d)));
    --w: var(--w-m, var(--w-t, var(--w-d)));
    --h: var(--h-m, var(--h-t, var(--h-d)));
    --ord: var(--ord-m, var(--ord-t, var(--ord-d)));
  }
}

/* Live site: Free rows switch to Flow at chosen breakpoint (bp-600 / bp-760 / bp-900) */
@media (max-width: 600px){
  .mp-row.mp-row-free.bp-600{ min-height:auto !important; }
  .mp-row.mp-row-free.bp-600 .mp-col.mp-free-canvas{ min-height:auto !important; 
    display:flex;
    flex-direction:column;
    gap: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-600 .mp-abs-item{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: auto !important;
    margin-bottom: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-600[data-mobile-cols="2"] .mp-col.mp-free-canvas{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-600[data-mobile-cols="2"] .mp-abs-item{
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .mp-row.mp-row-free.bp-600[data-mobile-cols="2"] .mp-abs-item.mp-mspan-2{
    grid-column: 1 / span 2;
  }
}

@media (max-width: 760px){
  .mp-row.mp-row-free.bp-760{ min-height:auto !important; }
  .mp-row.mp-row-free.bp-760 .mp-col.mp-free-canvas{ min-height:auto !important; 
    display:flex;
    flex-direction:column;
    gap: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-760 .mp-abs-item{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: auto !important;
    margin-bottom: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-760[data-mobile-cols="2"] .mp-col.mp-free-canvas{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-760[data-mobile-cols="2"] .mp-abs-item{
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .mp-row.mp-row-free.bp-760[data-mobile-cols="2"] .mp-abs-item.mp-mspan-2{
    grid-column: 1 / span 2;
  }
}

@media (max-width: 900px){
  .mp-row.mp-row-free.bp-900{ min-height:auto !important; }
  .mp-row.mp-row-free.bp-900 .mp-col.mp-free-canvas{ min-height:auto !important; 
    display:flex;
    flex-direction:column;
    gap: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-900 .mp-abs-item{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: auto !important;
    margin-bottom: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-900[data-mobile-cols="2"] .mp-col.mp-free-canvas{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mp-gap, 12px);
  }
  .mp-row.mp-row-free.bp-900[data-mobile-cols="2"] .mp-abs-item{
    width: auto !important;
    margin-bottom: 0 !important;
  }
  .mp-row.mp-row-free.bp-900[data-mobile-cols="2"] .mp-abs-item.mp-mspan-2{
    grid-column: 1 / span 2;
  }
}


/* Device visibility toggles */
body.builder-mode:not(.mp-mobile-preview):not(.mp-tablet-preview) #builder-sections .mp-hide-desktop{ display:none !important; }
body.builder-mode.mp-tablet-preview #builder-sections .mp-hide-tablet{ display:none !important; }
body.builder-mode.mp-mobile-preview #builder-sections .mp-hide-mobile{ display:none !important; }

@media (min-width: 1025px){ .mp-hide-desktop{ display:none !important; } }
@media (min-width: 761px) and (max-width: 1024px){ .mp-hide-tablet{ display:none !important; } }
@media (max-width: 760px){ .mp-hide-mobile{ display:none !important; } }



/* Absolute resize handles (Free canvas, Drag n Drop style) */

.ps-resize-handle{
  position:absolute;
  width:10px;height:10px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(120,170,255,.85);
  border-radius:3px;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  touch-action:none;
}
.ps-resize-handle.nw{ left:-6px; top:-6px; cursor:nwse-resize; }
.ps-resize-handle.ne{ right:-6px; top:-6px; cursor:nesw-resize; }
.ps-resize-handle.sw{ left:-6px; bottom:-6px; cursor:nesw-resize; }
.ps-resize-handle.se{ right:-6px; bottom:-6px; cursor:nwse-resize; }
.ps-resize-handle.n{ left:50%; top:-6px; transform:translateX(-50%); cursor:ns-resize; }
.ps-resize-handle.s{ left:50%; bottom:-6px; transform:translateX(-50%); cursor:ns-resize; }
.ps-resize-handle.e{ right:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.ps-resize-handle.w{ left:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.dnd-item.is-resizing{ cursor: nwse-resize; }

/* In Free/Canvas rows: make module previews fill their ABS box */
.dnd-item[data-abs="1"]{ display:flex; flex-direction:column; }
.dnd-item[data-abs="1"] .preview{ flex:1; min-height:0; }
.dnd-item[data-abs="1"] .preview img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  border-radius:.5rem;
}


/* Free/Canvas rows: let Image modules fill their ABS box */
.mp-row.mp-row-free .mp-abs-item.mp-type-image{ overflow:hidden; border-radius:.75rem; }
.mp-row.mp-row-free .mp-abs-item.mp-type-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}


/* Language bar (public) */
.mp-langbar{
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 1200;
  display:flex;
  gap:.5rem;
  align-items:center;
  padding:.35rem .55rem;
  border-radius:14px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.mp-langbar a{
  display:inline-block;
  padding:.25rem .5rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  color: var(--text);
  text-decoration:none;
  font-size:.85rem;
}
.mp-langbar a.is-active{
  background: rgba(124,58,237,.25);
  border-color: rgba(124,58,237,.55);
}


/* Markdown rendering */
.mp-text{line-height:var(--mp-ds-body-line,1.55);font-family:var(--mp-ds-body-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-body-size,18px);font-weight:var(--mp-ds-body-weight,400)}

/* Design Tokens (Typography) - can be applied to any block/container */
.mp-token-title{font-family:var(--mp-ds-title-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-title-size,48px);font-weight:var(--mp-ds-title-weight,800);line-height:var(--mp-ds-title-line,1.08)}
.mp-token-subtitle{font-family:var(--mp-ds-subtitle-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-subtitle-size,32px);font-weight:var(--mp-ds-subtitle-weight,600);line-height:var(--mp-ds-subtitle-line,1.18)}
.mp-token-body{font-family:var(--mp-ds-body-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-body-size,18px);font-weight:var(--mp-ds-body-weight,400);line-height:var(--mp-ds-body-line,1.55)}

.mp-markdown{line-height:var(--mp-ds-body-line,1.55);font-family:var(--mp-ds-body-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-body-size,18px);font-weight:var(--mp-ds-body-weight,400)}

/* When a Markdown block also has a token class, the token should win over .mp-markdown */
.mp-markdown.mp-token-title{font-family:var(--mp-ds-title-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-title-size,48px);font-weight:var(--mp-ds-title-weight,800);line-height:var(--mp-ds-title-line,1.08)}
.mp-markdown.mp-token-subtitle{font-family:var(--mp-ds-subtitle-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-subtitle-size,32px);font-weight:var(--mp-ds-subtitle-weight,600);line-height:var(--mp-ds-subtitle-line,1.18)}
.mp-markdown.mp-token-body{font-family:var(--mp-ds-body-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--mp-ds-body-size,18px);font-weight:var(--mp-ds-body-weight,400);line-height:var(--mp-ds-body-line,1.55)}
.mp-markdown h1,.mp-markdown h2,.mp-markdown h3,.mp-markdown h4,.mp-markdown h5,.mp-markdown h6{margin:.2rem 0 .6rem 0;line-height:1.15}
/* Markdown headings use Design Tokens */
.mp-markdown h1{font-family:var(--mp-ds-title-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:var(--mp-ds-title-weight,800);font-size:clamp(28px,5vw,var(--mp-ds-title-size,48px))}
.mp-markdown h2{font-family:var(--mp-ds-subtitle-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:var(--mp-ds-subtitle-weight,600);font-size:clamp(22px,4vw,var(--mp-ds-subtitle-size,32px))}
.mp-markdown h3{font-family:var(--mp-ds-subtitle-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:var(--mp-ds-subtitle-weight,600);font-size:clamp(18px,3.2vw,calc(var(--mp-ds-subtitle-size,32px) - 6px))}
.mp-markdown h4,.mp-markdown h5,.mp-markdown h6{font-family:var(--mp-ds-body-family, Inter),system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:var(--mp-ds-body-weight,400)}
.mp-markdown p{margin:.25rem 0 .8rem 0}
.mp-markdown ul{margin:.25rem 0 .9rem 1.2rem;padding:0}
.mp-markdown li{margin:.15rem 0}
.mp-markdown a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(124,92,255,.35)}
.mp-markdown a:hover{border-bottom-color:rgba(124,92,255,.75)}
.mp-markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:2px 6px;border-radius:8px}


/* Builder: background manual adjust highlight */
.mp-bg-adjust-target{
  outline: 2px dashed rgba(124,58,237,.55) !important;
  outline-offset: 3px;
  cursor: grab;
}
.mp-bg-adjust-target:active{
  cursor: grabbing;
}



/* Inline Block Quickbar (BG + Frame) */
.mp-inline-tools{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; margin-top:.35rem; }
.mp-inline-row{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; justify-content:flex-end; }
.mp-inline-row .mp-lbl{ font-size:.78rem; opacity:.75; margin-right:.1rem; }
.mp-inline-row .mp-sep{ width:1px; height:18px; background:rgba(255,255,255,.10); margin:0 .25rem; }
.button.mp-mini{ padding:.35rem .55rem; border-radius:.65rem; font-size:.82rem; background:rgba(255,255,255,.08); color:var(--fg); border:1px solid rgba(255,255,255,.12); }
.button.mp-mini:hover{ background:rgba(255,255,255,.10); }
.button.mp-mini.active{ background:rgba(124,58,237,.32); border-color:rgba(124,58,237,.55); }
.mp-inline-row input.mp-num{ width:70px; padding:.28rem .45rem; border-radius:.6rem; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); color:var(--fg); }
.mp-inline-row input.mp-color{ width:34px; height:28px; padding:0; border-radius:.55rem; border:1px solid rgba(255,255,255,.12); background:transparent; }
.mp-inline-row select.mp-select{ padding:.28rem .45rem; border-radius:.6rem; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); color:var(--fg); font-size:.82rem; }
@media (max-width: 720px){
  .mp-inline-tools{ align-items:flex-start; }
  .mp-inline-row{ justify-content:flex-start; }
}


/* --- Builder: Safe Area overlay (Mobile preview) --- */
.mp-safearea-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:60;
}
.mp-safearea-overlay .mp-safe-top{
  position:absolute; left:0; right:0; top:0;
  height:44px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px dashed rgba(255,255,255,.20);
}
.mp-safearea-overlay .mp-safe-bottom{
  position:absolute; left:0; right:0; bottom:0;
  height:34px;
  background: rgba(255,255,255,.06);
  border-top: 1px dashed rgba(255,255,255,.20);
}
.mp-safearea-overlay::after{
  content:"";
  position:absolute;
  left:.35rem; right:.35rem;
  top:44px; bottom:34px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 14px;
}
.mp-safearea-overlay .mp-safe-label{
  position:absolute;
  top:8px; left:10px;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.65);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  padding: .18rem .45rem;
  border-radius: .55rem;
}

/* Snap presets buttons in Responsive tab */
.mp-snap-presets .button{
  padding: .35rem .25rem;
  border-radius: .6rem;
  font-size: .95rem;
  line-height: 1;
}
@media (max-width:520px){
  .mp-snap-presets .button{
    padding: .45rem .25rem;
    font-size: 1rem;
  }
}


/* === UX Step #5: Draft Bar + Command Palette + Shortcut Help === */
.builder-draftbar{
  position:fixed;
  left:50%;
  bottom:64px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.7rem .85rem;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(18,20,26,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  z-index:10002;
  max-width:min(820px, calc(100vw - 18px));
}
.builder-draftbar .txt{ font-weight:700; }
.builder-draftbar .age{ opacity:.75; font-weight:600; }
.builder-draftbar .actions{ display:flex; gap:.45rem; flex-wrap:wrap; }

.mp-cmdk, .mp-help{
  position:fixed;
  inset:0;
  z-index:10005;
}
.mp-cmdk-backdrop, .mp-help-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.mp-cmdk-panel{
  position:absolute;
  left:50%;
  top:14vh;
  transform:translateX(-50%);
  width:min(760px, calc(100vw - 18px));
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,12,14,.94);
  box-shadow:0 28px 70px rgba(0,0,0,.65);
  overflow:hidden;
}
.mp-cmdk-head{
  display:flex;
  gap:.6rem;
  align-items:center;
  padding:.75rem .85rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mp-cmdk-input{
  flex:1;
  width:100%;
  padding:.7rem .75rem;
  border-radius:.85rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:var(--fg);
  font-size:16px;
}
.mp-cmdk-kbd{
  font-size:.8rem;
  opacity:.7;
  border:1px solid rgba(255,255,255,.14);
  padding:.25rem .45rem;
  border-radius:.55rem;
  background:rgba(0,0,0,.25);
  white-space:nowrap;
}
.mp-cmdk-list{
  max-height:min(52vh, 520px);
  overflow:auto;
  padding:.5rem;
}
.mp-cmdk-item{
  padding:.65rem .75rem;
  border-radius:.85rem;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  margin-bottom:.45rem;
  cursor:pointer;
  user-select:none;
}
.mp-cmdk-item:hover{ background:rgba(255,255,255,.07); }
.mp-cmdk-item.active{ outline:2px solid rgba(124,58,237,.55); box-shadow:0 0 0 4px rgba(124,58,237,.15); }
.mp-cmdk-empty{ padding:.9rem; opacity:.75; }
.mp-cmdk-foot{
  padding:.55rem .85rem;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:.85rem;
  opacity:.8;
}

.mp-help-panel{
  position:absolute;
  left:50%;
  top:12vh;
  transform:translateX(-50%);
  width:min(720px, calc(100vw - 18px));
  border-radius:1.1rem;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,12,14,.94);
  box-shadow:0 28px 70px rgba(0,0,0,.65);
  padding:1rem;
}
.mp-help-title{ font-size:1.15rem; font-weight:900; margin-bottom:.75rem; }
.mp-help-grid{ display:grid; grid-template-columns: 1fr 1.35fr; gap:.45rem .85rem; }
.mp-help-grid kbd{ padding:.15rem .35rem; border-radius:.45rem; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); font-size:.85rem; }
.mp-help-foot{ margin-top:.85rem; opacity:.75; font-size:.9rem; }

@media (max-width: 720px){
  .builder-draftbar{ left:9px; right:9px; transform:none; bottom:74px; }
  .mp-cmdk-panel{ top:10vh; }
  .mp-help-panel{ top:10vh; }
}

/* =============================
   UI Tokens (Theme) – global CSS variables
   These variables are set in views/partials/header.php from Admin → Settings → UI Tokens.
   This block provides fallbacks + derived helpers for older browsers.
================================ */
:root{
  --ok:#22c55e;
  --warn:#f59e0b;
  --info:#38bdf8;
  --ui-space:4px;
  --ui-radius:12px;
  --ui-shadow-alpha:.35;
  --ui-shadow-sm:0 10px 30px rgba(0,0,0,.35);
  --ui-shadow-lg:0 18px 40px rgba(0,0,0,.45);

  --ui-radius-sm:calc(var(--ui-radius) * 0.66);
  --ui-radius-md:var(--ui-radius);
  --ui-radius-lg:calc(var(--ui-radius) * 1.33);
  --ui-radius-pill:999px;

  --ui-space-1:var(--ui-space);
  --ui-space-2:calc(var(--ui-space) * 2);
  --ui-space-3:calc(var(--ui-space) * 3);
  --ui-space-4:calc(var(--ui-space) * 4);
  --ui-space-5:calc(var(--ui-space) * 5);
  --ui-space-6:calc(var(--ui-space) * 6);
}

/* Theme color token classes (for Builder token dropdowns) */
.mp-color-ok{color:var(--ok)}
.mp-color-warn{color:var(--warn)}
.mp-color-info{color:var(--info)}

.mp-bg-bg{background-color:var(--bg)}
.mp-bg-card{background-color:var(--card)}
.mp-bg-accent{background-color:var(--accent)}
.mp-bg-ok{background-color:var(--ok)}
.mp-bg-warn{background-color:var(--warn)}
.mp-bg-danger{background-color:var(--danger)}

/* Apply radius/shadow tokens to main UI elements (frontend + builder) */
.button{border-radius:var(--ui-radius-sm)}
.card{border-radius:var(--ui-radius-md)}
.mp-hamburger{border-radius:var(--ui-radius-sm)}
.mp-menu-panel{border-radius:var(--ui-radius-md)}
.builder-toolbar{border-radius:var(--ui-radius-md)}
.builder-sidebar{border-radius:var(--ui-radius-md)}
.builder-layer{border-radius:var(--ui-radius-sm)}
.mp-modal{border-radius:var(--ui-radius-lg)}
.mp-modal-item{border-radius:var(--ui-radius-md)}
.layer-icon{border-radius:var(--ui-radius-sm)}
.ps-outline,.ps-selected,.ps-inline-edit,.ps-main-outline,.abs-box{border-radius:var(--ui-radius-sm)}

/* Tokenized shadows */
.builder-fab{box-shadow:var(--ui-shadow-sm)}
.builder-sidebar{box-shadow:var(--ui-shadow-lg)}