/* Pages hub + Menu builder (cu-pages.js). Colors come from the theme variables only. */

/* ===== Menu builder ===== */
.mn{max-width:1180px}
.mn-bar{position:sticky;top:var(--bar-h,56px);z-index:6;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 4px;margin:-6px 0 12px;background:var(--bg,#f6f8fc)}
.mn-title{display:flex;align-items:center;gap:10px;flex:1;min-width:140px}
.mn-title h3{margin:0}
.mn-bar-acts{display:flex;gap:8px;align-items:center}
.mn-save-dirty{box-shadow:0 0 0 3px var(--gold-soft)}
.mn-preview{margin-bottom:16px}
.mn-pv-bar{display:flex;align-items:center;gap:18px;background:var(--navy);color:#fff;border-radius:12px;padding:12px 18px;min-height:52px;flex-wrap:wrap}
.mn-pv-logo{display:inline-flex;opacity:.8}
.mn-pv-nav{display:flex;gap:4px 8px;flex-wrap:wrap;flex:1}
.mn-pv-nav em{opacity:.6;font-size:13px}
.mn-pv-item{position:relative;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#e6edf8;cursor:default}
.mn-pv-item small{font-size:9px;opacity:.75}
.mn-pv-menu{display:none;position:absolute;top:100%;left:0;z-index:5;min-width:180px;background:var(--navy-2,#2b4067);border-radius:8px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.mn-pv-menu span{display:block;padding:7px 10px;border-radius:6px;white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:600;font-size:12.5px}
.mn-pv-menu span:hover{background:rgba(255,255,255,.12)}
.mn-pv-drop:hover .mn-pv-menu,.mn-pv-drop:focus .mn-pv-menu{display:block}
.mn-pv-btn{background:var(--gold);color:#fff;border-radius:8px;padding:8px 14px;font-size:12.5px;font-weight:700}
.mn-pv-note{font-size:12px;color:var(--muted);margin:6px 2px 0}
.mn-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media(max-width:980px){.mn-grid{grid-template-columns:1fr}}
.mn-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.mn-card h4{margin:0 0 10px;font-size:15px}
.mn-side{position:sticky;top:calc(var(--bar-h,56px) + 64px)}
@media(max-width:980px){.mn-side{position:static}}
.mn-list{list-style:none;margin:0;padding:0}
.mn-sub{margin:0 0 0 30px;padding:2px 0 2px 14px;border-left:2px solid var(--line);min-height:8px}
.mn.is-dragging .mn-sub:empty{min-height:34px;border:2px dashed var(--gold);border-radius:8px;margin-bottom:6px}
.mn-item{margin:6px 0}
.mn-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;transition:box-shadow .15s,border-color .15s}
.mn-row:hover{border-color:var(--gold-soft,#e8d9ad);box-shadow:0 2px 10px rgba(20,30,60,.07)}
.mn-item.is-hidden>.mn-row{opacity:.55}
.mn-handle{display:inline-flex;cursor:grab;color:var(--muted);padding:4px 2px;touch-action:none}
.mn-handle:active{cursor:grabbing}
.mn-label{flex:1 1 140px;min-width:90px;margin:0;font-weight:600;border-color:transparent;background:transparent;padding:6px 8px}
.mn-label:hover{border-color:var(--line)}
.mn-label:focus{border-color:var(--gold);background:var(--card,#fff)}
.mn-target{display:inline-flex;align-items:center;gap:6px;max-width:190px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-target:hover{border-color:var(--gold)}
.mn-target.is-none{color:var(--muted);font-style:italic}
.mn-target.wide{max-width:none;width:100%;justify-content:space-between}
.mn-badges{display:flex;gap:4px;flex:none}
.mn-badges .pill{font-size:10px}
.mn-acts{display:flex;gap:1px;flex:none}
.mn-ib{border:0;background:none;width:28px;height:28px;border-radius:7px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.mn-ib:hover{background:var(--bg);color:var(--navy)}
.mn-ib.is-off{opacity:.25;pointer-events:none}
.mn-del:hover{color:#a53b3b}
.mn-ghost{opacity:.4}
.mn-chosen .mn-row{box-shadow:0 8px 24px rgba(20,30,60,.2);border-color:var(--gold)}
@media(max-width:700px){.mn-badges{display:none}.mn-target{max-width:120px}}
/* side panel */
.mn-search{margin:10px 0 6px}
.mn-addlist{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px;background:var(--bg)}
.mn-grp{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 8px 3px}
.mn-add,.mn-opt{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink)}
.mn-add:hover,.mn-opt:hover{background:var(--card,#fff)}
.mn-add b{color:var(--ux-accent-ink,var(--gold-d));font-size:12px}
.mn-add em{font-style:normal;color:var(--muted);font-size:11.5px}
.mn-opt.is-on{background:var(--gold-soft);font-weight:700}
.mn-addbtns{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.mn-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;cursor:pointer;margin:6px 0}
.mn-check input{width:auto;margin:3px 0 0}
.mn-tips ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.mn-tips li{margin:5px 0}
/* popover */
.mn-pop{position:fixed;z-index:400;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(20,30,60,.22);padding:10px}
.mn-pop input[type=search]{width:100%;margin:0 0 6px}
.mn-poplist{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:3px;background:var(--bg)}
.mn-popfoot{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.mn-url{display:flex;gap:6px}
.mn-url input{flex:1;margin:0}
.mn-none{font-size:12.5px;color:var(--muted)}

/* ===== Pages hub ===== */
.pg{max-width:1000px}
.pg-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pg-head h3{flex:1}
.pg-search{max-width:300px;margin:0}
.pg-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:18px}
.pg-tile{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--card,#fff);border-radius:14px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink);transition:.15s}
.pg-tile:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(20,30,60,.08);transform:translateY(-1px)}
.pg-tile b{display:block;font-size:15px;color:var(--navy)}
.pg-tile small{color:var(--muted);font-size:12px}
.pg-tile-i{display:inline-flex;width:38px;height:38px;border-radius:10px;align-items:center;justify-content:center;background:var(--gold-soft);color:var(--navy);flex:none}
.pg-tile-i svg{width:20px;height:20px}
.pg-card{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:6px 16px 10px;margin-bottom:16px}
.pg-card-h{display:flex;align-items:baseline;gap:12px;padding:12px 0 6px;flex-wrap:wrap}
.pg-card-h h4{margin:0}
.pg-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.pg-card-h+div .pg-row:first-child{border-top:0}
.pg-main{flex:1;min-width:200px}
.pg-title{font-size:14.5px;color:var(--navy)}
.pg-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:12px}
.pg-status{font-size:10.5px}
.pg-s-none{background:var(--bg);color:var(--muted)}
.pg-inmenu{font-size:11px;font-weight:600;color:var(--ux-accent-ink,var(--gold-d))}
.pg-acts{display:flex;gap:8px;align-items:center}
.pg-courses summary{cursor:pointer;padding:12px 0;list-style:none}
.pg-courses summary::-webkit-details-marker{display:none}
.pg-courses summary::before{content:'▸ ';color:var(--muted)}
.pg-courses[open] summary::before{content:'▾ '}

/* ===== New page dialog + "Your pages" ===== */
.np-url{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);overflow:hidden}
.np-url span{padding:0 4px 0 12px;color:var(--muted);font-size:13px;white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.np-url input{border:0;margin:0;flex:1;min-width:0;padding-left:0;box-shadow:none}
.np-cards{display:grid;gap:8px}
.np-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.np-card:hover{border-color:var(--gold)}
.np-card:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
.np-card input{width:auto;margin:3px 0 0}
.np-card b{display:block;font-size:13.5px}
.np-card small{color:var(--muted);font-size:12px}
.np-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.pg-empty{padding:14px 2px 10px}
.pg-empty p{margin:0 0 10px;color:var(--muted)}
.pg-more{position:relative}
.pg-more summary{list-style:none;padding:0 10px}
.pg-more .cb-prev-menu{right:0;left:auto}

/* ===== Table section editor: one rich-text box per header / cell ===== */
.pe-tbl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin-bottom:6px}
.pe-tbl-cell{flex:1 1 170px;min-width:150px}
.pe-tbl-x{display:block;font-size:11px;color:#a53b3b;cursor:pointer;margin-top:2px}

/* rich text in footer blurb / home popup: tidy paragraph spacing */
.foot-blurb p{margin:0 0 .6em}.foot-blurb p:last-child{margin-bottom:0}
.popup-body p{margin:0 0 .7em}.popup-body p:last-child{margin-bottom:0}

/* ===== Admin bar (cu-adminbar.js): shown on the public site to a signed-in administrator ===== */
#adminBar{position:fixed;top:0;left:0;right:0;height:32px;z-index:70;display:flex;align-items:center;gap:6px;padding:0 6px;
  background:color-mix(in srgb,var(--navy) 72%,#000);color:#dfe7f5;font-size:13px;line-height:1;box-shadow:0 1px 0 rgba(255,255,255,.08)}
#adminBar a,#adminBar .ab-btn{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:0;background:none;font:inherit;cursor:pointer;white-space:nowrap;box-shadow:none}
#adminBar a:hover,#adminBar .ab-btn:hover{background:rgba(255,255,255,.14);color:#fff}
#adminBar svg{width:15px;height:15px;flex:none}
#adminBar .ab-brand{font-weight:700}
#adminBar .ab-items{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
#adminBar .ab-items::-webkit-scrollbar{display:none}
#adminBar .ab-ctx{background:rgba(255,255,255,.12);font-weight:600}
#adminBar .ab-right{display:flex;align-items:center;margin-left:auto;flex:none}
#adminBar .ab-user{padding:0 10px;opacity:.8;white-space:nowrap}
#adminBar .ab-x{font-size:18px;width:32px;justify-content:center;padding:0}
#adminBar .ab-empty{padding:0 10px;opacity:.7;display:inline-flex;align-items:center}
body.has-adminbar{padding-top:32px}
body.has-adminbar header.top{top:32px}
#adminBarTab{position:fixed;top:6px;left:6px;z-index:70;display:inline-flex;gap:6px;align-items:center;padding:5px 11px;border-radius:999px;border:0;background:rgba(10,20,40,.88);color:#fff;font-size:12px;cursor:pointer;opacity:.7}
#adminBarTab:hover{opacity:1}
#adminBarTab svg{width:14px;height:14px}
@media(max-width:760px){#adminBar .ab-user,#adminBar .ab-btn span{display:none}#adminBar .ab-btn:not(.ab-x){padding:0 8px}}
@media print{#adminBar,#adminBarTab{display:none!important}body.has-adminbar{padding-top:0}}
.ab-rows{margin:10px 0 4px;max-height:52vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:4px;background:var(--bg)}
.ab-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;border-radius:8px}
.ab-row.on{background:var(--card,#fff)}
.ab-row label{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;font-size:13.5px}
.ab-row label input{width:auto;margin:0}
.ab-row label small{color:var(--muted);font-size:11px;margin-left:6px}
.ab-row svg{width:15px;height:15px;vertical-align:-3px}
.ab-mv{display:flex;gap:2px}
.ab-mv button{border:1px solid var(--line);background:var(--card,#fff);border-radius:6px;width:26px;height:26px;cursor:pointer;color:var(--ink)}
.ab-mv button:disabled{opacity:.3;cursor:default}
.ab-sep{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 8px 4px}
.ab-foot{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}

/* ===== Editors: the "+ Add section" pill between sections =====
   The pill is 28px tall but the gap it lives in is only 12–16px, so its lower half hangs over the NEXT section —
   which, coming later in the page, was painted on top of it (a navy banner cut the label in half). Lift the gap
   above its neighbours; lift it a little more while it is hovered or open. */
.be-inserter{z-index:4}
.be-inserter:hover,.be-inserter:focus-within{z-index:8}

/* ===== Visual page builder (Stage 1): widget drawer | live canvas | settings panel =====
   Layout: three columns on a wide screen. Below 1280px the drawer becomes a slide-over opened by the bar's
   "Add" button; below 981px the drawer and the settings panel are both bottom sheets over the page. */
.pex .pex-body{grid-template-columns:264px minmax(0,1fr) 320px;gap:16px}
/* The editor breaks out of the portal's 1180px column: the page's own responsive rules key off the window
   width, so the canvas needs to be wide enough to look like the real page. */
.pex{width:100%;max-width:2000px;margin-left:auto;margin-right:auto}
.pex-left,.pex-panel{position:sticky;top:calc(var(--bar-h) + 76px);max-height:calc(100vh - var(--bar-h) - 96px);overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;min-width:0}
.pex-tabs{display:flex;gap:2px;padding:6px 6px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fbfcfe;z-index:3}
.pex-tabs button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:13px;padding:9px 4px;cursor:pointer;border-bottom:2px solid transparent}
.pex-tabs button.on{color:var(--navy);border-bottom-color:var(--gold,#c8a24a)}
.pex-tabs .pex-sheet-x,.pex-panel .pex-sheet-x{display:none}
.pex-drawer{padding:0 12px 12px}
.pex-drawer .cu-pal-head{position:sticky;top:41px;z-index:2;padding:10px 0 8px;background:#fbfcfe}
.pex-drawer .fb-palette{grid-template-columns:1fr 1fr}
.pex-drawer .fb-item{cursor:grab;min-width:0}
.pex-drawer .fb-item span:last-child{font-size:11.5px;line-height:1.25;overflow-wrap:anywhere}
.pex-drawer .fbx-group:first-of-type .fb-palette-group-label{margin-top:0;padding-top:0;border-top:0}
.pex-hint{font-size:12px;color:var(--muted);margin:12px 0 0}
.pex-left .pex-outline{position:static;max-height:none;border:0;border-radius:0;background:transparent}
.pex-panel{background:#fff}
.pex-panel-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:3}
.pex-panel-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy)}
.pex-panel-tools{display:inline-flex;gap:3px}
.pex-panel .pex-tool{width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pex-panel .pex-tool:hover{border-color:var(--accent);color:var(--accent)}
.pex-panel .pex-tool[disabled]{opacity:.35;cursor:default}
.pex-panel .pex-tool.is-danger{color:#a53b3b}
.pex-panel .pex-tool .ico{width:15px;height:15px}
.pex-panel #peFieldsWrap_0,.pex-panel [id^=peFieldsWrap_]{padding:10px 12px 18px}
.pex-panel .pe-tabs{position:sticky;top:49px;background:#fff;z-index:2;margin:-10px -12px 12px;padding:6px 12px 0}
.pex-panel-empty{padding:18px 16px;color:var(--muted);font-size:13px}
.pex-panel-empty b{display:block;color:var(--navy);font-size:14px;margin-bottom:6px}
.pex-panel-empty .btn{margin-top:6px}
/* the page canvas: blocks look like the real page, the chrome only shows on hover / selection */
.pex .pex-stage .be-canvas{padding:12px 20px 28px;overflow:visible}   /* 20px sides = the public page's own <main> padding, so text sits where it does on the live page instead of touching the card edge */
.pex .pex-stage .be-block{padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;position:relative;outline:1px solid transparent;outline-offset:-1px;cursor:pointer;transition:outline-color .12s}
.pex .pex-stage .be-block:hover{outline:1px dashed rgba(47,125,246,.7);margin-top:0;box-shadow:none;border:0}
.pex .pex-stage .be-block:hover:has(.be-block:hover){outline-color:transparent}
.pex .pex-stage .be-block.is-sel,.pex .pex-stage .be-block.is-sel:hover{outline:2px solid #2f7df6;outline-offset:-2px;z-index:2}
.pex .pex-stage .be-block.be-dragging{opacity:.4}
.pex .pex-stage .be-block-toolbar{position:absolute;top:4px;right:4px;left:auto;z-index:6;display:none;margin:0!important;padding:3px 4px;gap:2px 4px;border:0;border-radius:8px;background:#2f7df6;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);flex-wrap:nowrap;width:auto}
.pex .pex-stage .be-block.is-sel>.be-block-toolbar,.pex .pex-stage .be-block:hover>.be-block-toolbar{display:flex}
.pex .pex-stage .be-block:hover:has(.be-block:hover)>.be-block-toolbar{display:none}
.pex .pex-stage .be-block-toolbar .be-block-type{color:#fff;font-size:11.5px;font-weight:600;padding:0 6px;white-space:nowrap}
.pex .pex-stage .be-block-toolbar .be-drag-handle{color:#fff;cursor:grab}
.pex .pex-stage .be-block-toolbar .be-block-actions{margin-left:0;gap:2px}
.pex .pex-stage .be-block-toolbar .be-block-actions>.pex-tool{width:26px;min-width:26px;height:26px;border:0;background:transparent;color:#fff;box-shadow:none}
.pex .pex-stage .be-block-toolbar .be-block-actions>.pex-tool:hover{background:rgba(255,255,255,.25);color:#fff}
.pex .pex-stage .be-block-toolbar .be-block-actions>.pex-tool.is-danger{color:#fff}
.pex .pex-stage .be-block-toolbar .be-block-actions>.pex-tool.is-danger:hover{background:#d64545}
.pex .pex-stage .be-block-toolbar .be-act-sep{background:rgba(255,255,255,.4)}
.pex .pex-stage .be-block-toolbar .ico{width:15px;height:15px}
.pex .pex-stage .be-block>.pe-col-toolbar{display:none;margin:4px 6px}
.pex .pex-stage .be-block.is-sel>.pe-col-toolbar{display:flex}
.pex .pex-stage .pe-cols{outline:1px dashed rgba(47,125,246,.25);outline-offset:-1px;min-height:60px}
.pex .pex-stage .pe-col{outline:1px dashed rgba(47,125,246,.18);outline-offset:-1px;min-height:48px}
/* gaps between blocks: thin until something is being dragged, then a blue drop line */
.pex .pex-stage .be-inserter{height:12px;margin:0;position:relative;transition:height .1s}
.pex .pex-stage .be-inserter .be-inserter-btn{opacity:0;transition:opacity .12s}
.pex .pex-stage .be-inserter:hover .be-inserter-btn{opacity:.95}
.pex.pe-dragging .pex-stage .be-inserter{height:22px}
.pex.pe-dragging .pex-stage .be-inserter .be-inserter-btn{display:none}
.pex.pe-dragging .pex-stage .be-inserter::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(47,125,246,.3);border-radius:2px}
.pex .pex-stage .be-inserter.pe-drop-line::before,.pex .pex-stage .be-inserter.be-drop-hover::before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:#2f7df6;border-radius:3px;box-shadow:0 0 0 3px rgba(47,125,246,.25)}
.pex .pex-stage .be-inserter.be-drop-hover .be-inserter-btn{display:none}
.pex .pex-stage .be-block.pe-hide-d,.pex .pex-stage .be-block.pe-hide-t,.pex .pex-stage .be-block.pe-hide-m{opacity:.4}
@media(max-width:1599px){
  .pex .pex-body{grid-template-columns:minmax(0,1fr) 320px}
  .pex-left{position:fixed;left:12px;top:calc(var(--bar-h) + 70px);bottom:12px;width:300px;max-height:none;z-index:70;display:none;box-shadow:0 12px 40px rgba(12,30,60,.3)}
  .pex.show-left .pex-left{display:block}
  .pex-tabs .pex-sheet-x{display:inline-flex;flex:none;width:34px;align-items:center;justify-content:center}
}
@media(min-width:1600px){.pex-addbtn{display:none}}
@media(max-width:1099px){
  .pex .pex-body{grid-template-columns:minmax(0,1fr)}
  .pex-left,.pex-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:68vh;border-radius:16px 16px 0 0;z-index:80;box-shadow:0 -10px 34px rgba(12,30,60,.3);display:none}
  .pex.show-left .pex-left,.pex.show-panel .pex-panel{display:block}
  .pex-panel .pex-sheet-x{display:inline-flex}
  .pex .pex-stage{padding:6px}
  .pex .pex-stage .be-block-toolbar{top:2px;right:2px}
  .pex.show-panel .pex-stage,.pex.show-left .pex-stage{padding-bottom:62vh}
}
.portal:has(.pex) .pside-fab{display:none}
.portal.nav-hidden .pex .pex-bar{padding-left:24px}
@media(max-width:1099px){
  .pex{width:calc(100vw - 24px);margin-left:calc(50% - 50vw + 12px)}
  .pex .pex-bar{margin:-16px -12px 12px;padding:8px 12px!important;gap:6px 8px}
  .pex .pex-bar .btn.sm{padding:6px 10px}
}

/* ===== Responsive mode: Desktop / Tablet / Mobile switch and the framed preview ===== */
.pex-dev{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.pex-dev button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;cursor:pointer}
.pex-dev button.on{background:var(--navy);color:#fff}
.pex .pex-stage .be-canvas.pe-framed{padding:0;background:transparent;box-shadow:none}
.pe-frame{display:block;margin:0 auto;max-width:100%;border:0;background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(12,45,81,.15);min-height:300px}

/* Layers tree (left drawer, second tab) */
.pex-left .pex-outline ol{margin:0 0 10px}
.pex-left .pex-row{display:flex;align-items:center;border-radius:8px}
.pex-left .pex-outline li.is-on>.pex-row{background:color-mix(in srgb,#2f7df6 14%,transparent)}
.pex-left .pex-outline li.is-on>.pex-row .pex-lbl b{color:#1f63d1}
.pex-left .pex-eye{width:26px;height:26px}.pex-left .pex-eye[disabled]{opacity:.3}
.pex-left .pex-eye .ico{width:14px;height:14px}
.pex-left .pex-kids{list-style:none;margin:0 0 4px 12px;padding:0 0 0 6px;border-left:1px solid var(--line)}
.pex-left .pex-col-label,.pex-left .pex-col-empty{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 4px 2px}
.pex-left .pex-col-empty{font-weight:500;text-transform:none;font-style:italic}

.pe-swatches{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 6px}
.pe-swatch{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.pe-swatch.on{box-shadow:0 0 0 2px #2f7df6}

/* Pages hub polish + multi-select */
.pg-card{padding:6px 18px 12px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.pg-row{padding:14px 10px;margin:0 -10px;border-radius:10px;transition:background .12s}
.pg-row:hover{background:color-mix(in srgb,var(--gold,#c9a227) 7%,transparent)}
.pg-row.sel{background:color-mix(in srgb,var(--gold,#c9a227) 14%,transparent)}
.pg-title{font-weight:700}
.pg-ck,#pgAll{width:17px;height:17px;margin:0;cursor:pointer;accent-color:var(--navy,#1a2b4c);flex:none}
.pg-allck{display:inline-flex;align-items:center}
.pg-bulk{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:6px 0 4px;border-radius:12px;background:var(--navy,#1a2b4c);color:#fff;font-weight:600}
.pg-bulk[hidden]{display:none}
.pg-bulk .grow{flex:1}
.pg-bulk button{border:0;border-radius:8px;padding:7px 14px;font:inherit;font-weight:700;cursor:pointer}
.pg-bulk .del{background:#d63031;color:#fff}
.pg-bulk .clr{background:transparent;color:#fff;opacity:.8}
.pg-bulk+div .pg-row:first-child{border-top:0}

/* ===== Full-screen editor (like the landing-page editor) =====
   The editor takes over the window: one top bar, a left Elements/Layers column, the canvas in the middle and the
   settings column on the right. Each column scrolls on its own, so the bar and both side columns never move.
   Modals are z-index 100 and the section palette 300, so both still open above it. */
.pex{position:fixed;inset:0;width:auto;max-width:none;margin:0;z-index:90;display:flex;flex-direction:column;background:#f3f5f9;overflow:hidden}
.pex .pex-bar{position:relative;top:auto;flex:none;flex-wrap:nowrap;margin:0;padding:0 14px;height:60px;gap:10px;box-shadow:none;z-index:5;overflow-x:auto}
.pex .pex-bar>*{flex:none}
.pex .pex-title{flex:0 1 auto;flex-wrap:nowrap;min-width:120px}
.pex .pex-title b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26vw}
.pex .pex-dev{margin:0 auto}
.pex .pex-actions{margin-left:0;flex-wrap:nowrap}
.pex .pex-body{flex:1;min-height:0;display:grid;gap:0;align-items:stretch}
.pex .pex-stage{overflow-y:auto;border-radius:0;background:#eef1f6;padding:24px}
.portal.nav-hidden .pex .pex-bar{padding-left:14px}
@media(min-width:1100px){
  .pex .pex-body{grid-template-columns:280px minmax(0,1fr) 320px}
  .pex .pex-left,.pex .pex-panel{position:static;display:block;width:auto;max-height:none;height:100%;border:0;border-radius:0;box-shadow:none;overflow-y:auto}
  .pex .pex-left{border-right:1px solid var(--line)}
  .pex .pex-panel{border-left:1px solid var(--line)}
  .pex .pex-addbtn,.pex .pex-tabs .pex-sheet-x{display:none}
}
@media(max-width:1099px){
  .pex .pex-bar{margin:0;padding:0 10px!important;gap:6px}
  .pex .pex-bar .btn.sm span:not(.ico){display:none}
}
.pex-pagetab{padding:12px}
.pex-page-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--navy)}
.pex-page-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pex-page-row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:10px;margin:0 0 6px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font:inherit;cursor:pointer}
.pex-page-row:hover{border-color:#2f7df6}
.pex-page-row .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--muted)}
.pex-page-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pex-page-row b{font-size:13px}.pex-page-row small{font-size:11.5px;color:var(--muted)}
.pex-tabs button{white-space:nowrap}