/* css/editor.css — owner-gated editor (toolbar + live preview + side panel). */

body.xprf-editing { overflow: hidden; }
body.xprf-editing .xprf-topbar { display: none; }
body.xprf-editing .xprf-footer { display: none; }
body.xprf-editing .xprf-bg-layer { display: none; }

/* editor boot loader — light full-screen, shown instantly so /edit never flashes
   the dark public page before the editor mounts */
.xprf-ed-boot { position: fixed; inset: 0; z-index: 100; background: #e9ecf1; display: grid; place-items: center; }
.xprf-ed-boot__spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #cfd6e0;
  border-top-color: #0e7aa8; animation: xprf-ed-bootspin .7s linear infinite; }
@keyframes xprf-ed-bootspin { to { transform: rotate(360deg); } }

/* locked state (viewer isn't the owner): connect hint in the nav + a mask over
   the middle panel. The right-hand preview keeps showing the full profile. */
.xprf-ed-connecthint { margin: 8px 4px 2px; font-size: 12.5px; line-height: 1.45; color: var(--profile-muted); }
.xprf-ed-canvas { position: relative; }
.xprf-ed-lockmask { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 26px; border-radius: inherit;
  background: color-mix(in srgb, var(--profile-surface) 66%, transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.xprf-ed-lockmask__ic { width: 54px; height: 54px; margin-bottom: 10px; border-radius: 16px; display: grid; place-items: center;
  background: var(--profile-accent-tint); color: var(--profile-accent-ink); }
.xprf-ed-lockmask__ic svg { width: 26px; height: 26px; }
.xprf-ed-lockmask__title { margin: 0; font-size: 18px; font-weight: var(--profile-fw-black); color: var(--profile-fg); }
.xprf-ed-lockmask__msg { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--profile-muted); max-width: 30ch; }

/* full-viewport: breaks out of #profile-root's centered .xprf-column.
   The editor chrome uses its OWN neutral-light palette (independent of the
   profile theme, which is often very dark) by overriding the profile tokens
   locally. The preview iframe is a separate document, so it keeps its theme. */
.xprf-editor {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: row;
  --profile-bg: #e9ecf1;
  --profile-surface: #ffffff;
  --profile-surface-2: #eef1f5;
  --profile-surface-hover: #e5e8ed;
  --profile-fg: #1b1f24;
  --profile-muted: #697080;
  --profile-border: #dee2e8;
  --profile-hairline: #e9ecf1;
  --profile-accent: #0e7aa8;                      /* app cyan — consistent with dashboard + profile */
  --profile-accent-tint: #e6f4fb;
  --profile-accent-ink: #0b6c95;
  --profile-accent-text: #ffffff;
  /* match home/dashboard typography (Satoshi + JetBrains Mono) */
  --profile-font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --profile-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--profile-font);
  background: var(--profile-bg); color: var(--profile-fg);
}
/* consistent keyboard focus ring across the whole editor chrome */
.xprf-editor :focus-visible { outline: 2px solid var(--profile-accent); outline-offset: 2px; border-radius: 4px; }

/* toolbar (fixed top; the two columns below scroll independently) */
.xprf-ed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--profile-bg); }
.xprf-ed-bar {
  flex: none; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 22px; background: transparent; border-bottom: 1px solid var(--profile-hairline);
}
.xprf-ed-content { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 650px; grid-template-rows: minmax(0, 1fr); gap: 20px; padding: 20px; }
.xprf-ed-bar__title { display: flex; align-items: center; gap: 8px; font-weight: var(--profile-fw-bold); font-size: var(--profile-fs-sm); }
.xprf-ed-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--profile-accent); box-shadow: 0 0 0 3px var(--profile-accent-tint); }
.xprf-ed-bar__status { display: none; align-items: center; gap: 7px; font-size: var(--profile-fs-xs); color: var(--profile-muted); }
.xprf-ed-bar__status.is-on { display: inline-flex; }
.xprf-ed-bar__status.is-err .xprf-ed-bar__statustext { color: #ef4444; }
.xprf-ed-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.xprf-editor.is-dirty .xprf-ed-dot { display: block; animation: xprf-ed-pulse 1.6s ease-out infinite; }
@keyframes xprf-ed-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); } 70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
.xprf-editor.is-dirty .xprf-ed-canvas__head .xprf-ed-btn.is-primary { box-shadow: 0 0 0 3px var(--profile-accent-tint); }
/* breadcrumb (Design › Sub-panel) */
.xprf-ed-crumb { color: var(--profile-muted); }
.xprf-ed-crumb__sep { color: var(--profile-muted); margin: 0 4px; }
.xprf-ed-crumb__cur { color: var(--profile-fg); }
.xprf-ed-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px;
  background: var(--profile-surface-2); border: 1px solid var(--profile-border); color: var(--profile-fg);
  font-weight: var(--profile-fw-semibold); font-size: var(--profile-fs-sm); text-decoration: none; cursor: pointer;
  transition: border-color var(--profile-dur-fast) var(--profile-ease), filter var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-btn:hover { border-color: color-mix(in srgb, var(--profile-accent) 45%, var(--profile-border)); text-decoration: none; }
.xprf-ed-btn.is-primary { background: var(--profile-accent); color: var(--profile-accent-text); border-color: transparent; }
.xprf-ed-btn.is-primary:hover { filter: brightness(1.06); }
.xprf-ed-btn:disabled { opacity: 0.55; pointer-events: none; }

/* left nav sidebar (full height) */
.xprf-ed-menu {
  flex: none; width: 244px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 16px 12px; background: var(--profile-surface); border-right: 1px solid var(--profile-hairline);
}
.xprf-ed-connectrow { padding: 2px 4px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--profile-hairline); }
/* editor's own Connect Wallet button — outline / light (distinct from the public one) */
.xprf-ed-connectbtn {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--profile-border);
  background: transparent; color: var(--profile-fg); font: inherit; font-size: var(--profile-fs-sm);
  font-weight: var(--profile-fw-semibold); cursor: pointer;
  transition: border-color var(--profile-dur-fast) var(--profile-ease), background var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-connectbtn:hover { border-color: color-mix(in srgb, var(--profile-accent) 55%, var(--profile-border)); background: var(--profile-surface-2); }
.xprf-ed-connectbtn__ic { width: 17px; height: 17px; display: inline-grid; place-items: center; color: var(--profile-muted); }
.xprf-ed-connectbtn__ic svg { width: 17px; height: 17px; }
.xprf-ed-connectbtn__lbl { font-variant-numeric: tabular-nums; }
.xprf-ed-connectbtn.is-connected { border-color: color-mix(in srgb, #22c55e 45%, var(--profile-border)); }
.xprf-ed-connectbtn__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent); }
.xprf-ed-brand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 8px; font-size: var(--profile-fs-sm); font-weight: var(--profile-fw-bold); color: var(--profile-fg); }
/* back-to-dashboard link (top of the nav) */
.xprf-ed-backdash { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 2px; border-radius: 10px; color: var(--profile-muted); font: inherit; font-size: var(--profile-fs-sm); font-weight: var(--profile-fw-bold); text-decoration: none; transition: background var(--profile-dur-fast) var(--profile-ease), color var(--profile-dur-fast) var(--profile-ease); }
.xprf-ed-backdash:hover { background: var(--profile-surface-2); color: var(--profile-fg); text-decoration: none; }
.xprf-ed-backdash svg { width: 18px; height: 18px; flex: none; }
.xprf-ed-navlist { display: flex; flex-direction: column; gap: 3px; }
.xprf-ed-nav {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--profile-muted);
  font: inherit; font-size: var(--profile-fs-sm); font-weight: var(--profile-fw-semibold); cursor: pointer;
  transition: background var(--profile-dur-fast) var(--profile-ease), color var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-nav:hover { background: var(--profile-surface-2); color: var(--profile-fg); }
.xprf-ed-nav.is-on { background: var(--profile-accent-tint); color: var(--profile-accent); }
.xprf-ed-nav__ic { flex: none; width: 18px; height: 18px; display: inline-flex; }
.xprf-ed-nav__ic svg { width: 18px; height: 18px; }

/* center edit panel */
/* canvas card (col 2): header (Cancel / Save) + scrollable body */
.xprf-ed-canvas { min-width: 0; display: flex; flex-direction: column; background: var(--profile-surface); border: 1px solid var(--profile-hairline); border-radius: 16px; overflow: hidden; }
.xprf-ed-canvas__head { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--profile-hairline); }
.xprf-ed-panel {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  background: transparent; border: 0; border-radius: 0; padding: 0 30px 36px;
}
/* keep the work area readable and centered instead of stretching wide */
.xprf-ed-panel > * { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
.xprf-ed-panel__title { margin: 0 0 2px; font-size: 21px; font-weight: var(--profile-fw-black); letter-spacing: -0.015em; color: var(--profile-fg); }

/* right preview = framed browser viewport (works for PC + mobile, not a phone) */
.xprf-ed-preview { min-width: 0; display: flex; flex-direction: column; background: var(--profile-surface); border: 1px solid var(--profile-hairline); border-radius: 16px; overflow: hidden; }
.xprf-ed-preview__chrome { flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--profile-hairline); background: var(--profile-surface); }
.xprf-ed-preview__url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  font-size: var(--profile-fs-sm); color: var(--profile-fg); font-weight: var(--profile-fw-semibold);
  padding: 6px 6px 6px 15px; border-radius: 999px;
  background: var(--profile-surface-2); border: 1px solid var(--profile-hairline);
}
.xprf-ed-preview__globe { width: 15px; height: 15px; color: var(--profile-muted); flex: none; }
.xprf-ed-preview__urltext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xprf-ed-preview__view {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
  border-radius: 10px; background: var(--profile-surface-2); border: 1px solid var(--profile-border);
  color: var(--profile-fg); font-size: var(--profile-fs-sm); font-weight: var(--profile-fw-semibold); text-decoration: none;
}
.xprf-ed-preview__view:hover { border-color: color-mix(in srgb, var(--profile-accent) 45%, var(--profile-border)); text-decoration: none; }
.xprf-ed-preview__view svg { width: 15px; height: 15px; }
.xprf-ed-preview__url .xprf-copy-btn {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 999px; border: 0; background: var(--profile-surface); color: var(--profile-muted); cursor: pointer;
}
.xprf-ed-preview__url .xprf-copy-btn:hover { color: var(--profile-fg); background: var(--profile-surface-hover, var(--profile-surface)); }

/* wallet Connect relocated into the toolbar */
.xprf-ed-bar .xprf-ed-connect { display: inline-flex; align-items: center; }

/* Design index list — flush inside the canvas card (dividers only) */
.xprf-ed-list { border: 0; border-radius: 0; background: transparent; }
.xprf-ed-listrow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 16px; border: 0; border-bottom: 1px solid var(--profile-hairline);
  background: transparent; color: var(--profile-fg); cursor: pointer;
  transition: background var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-listrow:last-child { border-bottom: 0; }
.xprf-ed-listrow:hover { background: var(--profile-surface-2); }
.xprf-ed-listrow__ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--profile-fg) 6%, transparent); color: var(--profile-fg); }
.xprf-ed-listrow__ic svg { width: 19px; height: 19px; }
.xprf-ed-listrow__label { font-weight: var(--profile-fw-semibold); font-size: var(--profile-fs-base); }
.xprf-ed-listrow__val { margin-left: auto; font-size: var(--profile-fs-sm); color: var(--profile-muted); }
.xprf-ed-listrow__chev { flex: none; width: 18px; height: 18px; color: var(--profile-muted); }
.xprf-ed-listrow__chev svg { width: 18px; height: 18px; }
.xprf-ed-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: var(--profile-bg); }

/* Expand: a section can widen the canvas and hide the preview (api.setWide) */
.xprf-editor.is-wide .xprf-ed-content { grid-template-columns: minmax(0, 1fr); }
.xprf-editor.is-wide .xprf-ed-preview { display: none; }

/* Inside the preview iframe (body.xprf-preview-mode): hide the page's own
   topbar controls (theme toggle + Connect) — the editor toolbar owns those. */
body.xprf-preview-mode .xprf-topbar,
body.xprf-preview-mode .xprf-theme-toggle,
body.xprf-preview-mode #profile-connect-mount { display: none !important; }
/* editor hosts the kit's real ConnectButton in the nav — full width, outline look */
.xprf-ed-connectrow #profile-connect-mount { display: flex; width: 100%; min-height: 0; }
.xprf-ed-connectrow #profile-connect-mount > *,
.xprf-ed-connectrow .xwk-button-root,
.xprf-ed-connectrow .xwk-button-root > button,
.xprf-ed-connectrow .xwk-legacy-fallback { width: 100%; }
.xprf-ed-connectrow #profile-connect-mount .xwk-button-root > button,
.xprf-ed-connectrow #profile-connect-mount .xwk-legacy-fallback {
  background: transparent !important; border: 1px solid var(--profile-border) !important; box-shadow: none !important;
  border-radius: 999px !important; justify-content: flex-start !important;
}
.xprf-ed-connectrow #profile-connect-mount .xwk-button-root > button:hover,
.xprf-ed-connectrow #profile-connect-mount .xwk-legacy-fallback:hover {
  background: var(--profile-surface-2) !important;
  border-color: color-mix(in srgb, var(--profile-accent) 55%, var(--profile-border)) !important;
}

/* editor live-toggle: hide the cover in the preview without a re-render.
   Also restore the no-cover top spacing (the element stays in the DOM, so the
   renderer's :not(:has(.xprf-cover)) rule wouldn't otherwise apply). */
body.xprf-cover-hidden .xprf-cover { display: none !important; }
body.xprf-cover-hidden .xprf-avatar-wrap { margin-top: var(--profile-space-8) !important; }
body.xprf-cover-hidden .xprf-share-btn--cover { top: 0; }

/* collapsible sections */
.xprf-ed-sec { border-bottom: 1px solid var(--profile-hairline); }
.xprf-ed-sec__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; background: transparent; border: 0; color: var(--profile-fg);
  font-weight: var(--profile-fw-bold); font-size: var(--profile-fs-sm); cursor: pointer;
}
.xprf-ed-sec__chev { width: 15px; height: 15px; color: var(--profile-muted); transition: transform var(--profile-dur-base) var(--profile-ease); }
.xprf-ed-sec.is-open .xprf-ed-sec__chev { transform: rotate(90deg); }
.xprf-ed-sec__body { display: none; flex-direction: column; gap: 13px; padding: 2px 2px 18px; }
.xprf-ed-sec.is-open .xprf-ed-sec__body { display: flex; }
.xprf-ed-soon { font-size: var(--profile-fs-xs); color: var(--profile-muted); }

/* fields */
.xprf-ed-field { display: flex; flex-direction: column; gap: 7px; }
.xprf-ed-field__lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--profile-fg); font-weight: var(--profile-fw-bold); letter-spacing: -0.005em; }
.xprf-ed-social__ic { width: 15px; height: 15px; color: var(--profile-fg); }
.xprf-ed-hint { margin: -9px 0 0; font-size: var(--profile-fs-sm); line-height: 1.5; color: var(--profile-muted); }

/* repeatable item editor (Team members, etc.) */
.xprf-ed-repeat { display: flex; flex-direction: column; gap: 10px; }
.xprf-ed-repeat__item { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border: 1px solid var(--profile-border); border-radius: 12px; background: var(--profile-surface-2); }
.xprf-ed-repeat__head { display: flex; align-items: center; justify-content: space-between; }
.xprf-ed-repeat__n { font-size: var(--profile-fs-xs); font-weight: var(--profile-fw-semibold); letter-spacing: 0; color: var(--profile-muted); }
.xprf-ed-repeat__rm { width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--profile-muted); cursor: pointer; font-size: 14px; line-height: 1; transition: background var(--profile-dur-fast) var(--profile-ease), color var(--profile-dur-fast) var(--profile-ease); }
.xprf-ed-repeat__rm:hover { background: color-mix(in srgb, var(--profile-danger) 14%, transparent); color: var(--profile-danger); }
.xprf-ed-repeat__add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 1px dashed var(--profile-border); border-radius: 12px; background: transparent; color: var(--profile-accent-ink); font-weight: var(--profile-fw-semibold); font-size: var(--profile-fs-sm); cursor: pointer; transition: background var(--profile-dur-fast) var(--profile-ease), border-color var(--profile-dur-fast) var(--profile-ease); }
.xprf-ed-repeat__add:hover { background: var(--profile-accent-tint); border-color: color-mix(in srgb, var(--profile-accent) 45%, var(--profile-border)); }

/* Crypto addresses editor */
.xprf-ed-combo { position: relative; }
.xprf-ed-combo__menu { display: none; position: absolute; z-index: 5; top: calc(100% + 5px); left: 0; right: 0; max-height: 300px; overflow-y: auto; padding: 4px; background: var(--profile-surface); border: 1px solid var(--profile-border); border-radius: 12px; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .28); }
.xprf-ed-combo__menu.is-open { display: block; }
.xprf-ed-combo__opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--profile-fg); font: inherit; cursor: pointer; }
.xprf-ed-combo__opt:hover { background: var(--profile-surface-2); }
.xprf-ed-addr__sym { font-weight: var(--profile-fw-bold); font-size: var(--profile-fs-sm); }
.xprf-ed-addr__name { font-size: var(--profile-fs-sm); color: var(--profile-muted); }
.xprf-ed-coin { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--profile-surface-2); }
.xprf-ed-coin img { width: 100%; height: 100%; object-fit: contain; }
.xprf-ed-coin.is-fallback { font-size: 9px; font-weight: 700; color: #fff; letter-spacing: -.02em; }

/* Blocks manager (E5) */
.xprf-ed-blks { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.xprf-ed-blk { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 4px; border: 1px solid var(--profile-border); border-radius: 12px; background: var(--profile-surface); transition: border-color var(--profile-dur-fast) var(--profile-ease); }
.xprf-ed-blk:hover { border-color: color-mix(in srgb, var(--profile-accent) 32%, var(--profile-border)); }
.xprf-ed-blk.is-hidden { opacity: .55; }
.xprf-ed-blk.is-hidden .xprf-ed-blk__label { color: var(--profile-muted); }
.xprf-ed-blk__drag { flex: none; width: 22px; display: grid; place-items: center; color: var(--profile-muted); cursor: grab; }
.xprf-ed-blk__drag:active { cursor: grabbing; }
.xprf-ed-blk__drag svg { width: 18px; height: 18px; }
.xprf-ed-blk__ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--profile-surface); border: 1px solid var(--profile-border); color: var(--profile-fg); }
.xprf-ed-blk__ic svg { width: 18px; height: 18px; }
.xprf-ed-blk__label { flex: 1; min-width: 0; font-weight: var(--profile-fw-semibold); font-size: var(--profile-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xprf-ed-blk__vis, .xprf-ed-blk__rm, .xprf-ed-blk__cog { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--profile-muted); cursor: pointer;
  transition: background var(--profile-dur-fast) var(--profile-ease), color var(--profile-dur-fast) var(--profile-ease); }
/* actions read as a live toolbar: they strengthen when the row is hovered */
.xprf-ed-blk:hover .xprf-ed-blk__vis, .xprf-ed-blk:hover .xprf-ed-blk__cog, .xprf-ed-blk:hover .xprf-ed-blk__rm { color: color-mix(in srgb, var(--profile-muted) 32%, var(--profile-fg)); }
.xprf-ed-blk__rmspace { flex: none; width: 32px; }
.xprf-ed-blk__vis:hover, .xprf-ed-blk__cog:hover { background: var(--profile-surface-2); color: var(--profile-fg); }
.xprf-ed-blk__rm:hover { background: color-mix(in srgb, var(--profile-danger) 12%, transparent); color: var(--profile-danger); }
.xprf-ed-blk__vis svg, .xprf-ed-blk__rm svg, .xprf-ed-blk__cog svg { width: 18px; height: 18px; }
/* block config: small description under the title */
.xprf-ed-desc { margin: -4px 0 8px; font-size: var(--profile-fs-sm); color: var(--profile-muted); line-height: 1.5; }
.xprf-ed-addwrap { margin-top: 4px; }
.xprf-ed-addwrap { margin-bottom: 14px; }
/* ---- Add-block modal (categorised + searchable) ---- */
.xprf-addmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px;
  background: rgba(15, 23, 42, 0.42); animation: xprf-overlay-in .18s ease both; }
.xprf-addmodal__panel { width: min(720px, 96vw); height: min(660px, 86vh); display: flex; flex-direction: column;
  background: var(--profile-surface); border: 1px solid var(--profile-border); border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.45); overflow: hidden; }
.xprf-addmodal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.xprf-addmodal__title { margin: 0; font-size: 18px; font-weight: var(--profile-fw-bold); }
.xprf-addmodal__x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--profile-surface-2);
  color: var(--profile-muted); cursor: pointer; display: grid; place-items: center; }
.xprf-addmodal__x:hover { background: var(--profile-surface-hover); color: var(--profile-fg); }
.xprf-addmodal__x svg { width: 16px; height: 16px; }
.xprf-addmodal__searchwrap { padding: 0 20px 14px; border-bottom: 1px solid var(--profile-hairline); }
.xprf-addmodal__searchinput { width: 100%; height: 44px; border-radius: 12px; background: var(--profile-surface-2);
  border: 1px solid var(--profile-border); color: var(--profile-fg); padding: 0 14px 0 40px; font: inherit; font-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%2394a3b8' stroke-width='1.7'/%3E%3Cpath d='M20 20l-3.4-3.4' stroke='%2394a3b8' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 17px; }
.xprf-addmodal__searchinput:focus { outline: none; border-color: var(--profile-accent); box-shadow: 0 0 0 3px var(--profile-accent-tint); }
.xprf-addmodal__body { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; min-height: 0; flex: 1; padding: 14px 14px 16px; }
.xprf-addmodal__cats { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding: 0 12px 0 2px; border-right: 1px solid var(--profile-hairline); }
.xprf-addmodal__cat { text-align: left; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent;
  color: var(--profile-muted); font: inherit; font-size: 13.5px; font-weight: var(--profile-fw-semibold); cursor: pointer;
  transition: background var(--profile-dur-fast) var(--profile-ease), color var(--profile-dur-fast) var(--profile-ease); }
.xprf-addmodal__cat:hover { background: var(--profile-surface-2); color: var(--profile-fg); }
.xprf-addmodal__cat.is-on { background: var(--profile-accent-tint); color: var(--profile-accent-ink); font-weight: var(--profile-fw-bold); }
.xprf-addmodal__list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 0 4px 0 0; }
/* thin, quiet scrollbars */
.xprf-addmodal__list::-webkit-scrollbar, .xprf-addmodal__cats::-webkit-scrollbar { width: 8px; }
.xprf-addmodal__list::-webkit-scrollbar-thumb, .xprf-addmodal__cats::-webkit-scrollbar-thumb { background: var(--profile-border); border-radius: 8px; border: 2px solid var(--profile-surface); }
.xprf-addmodal__list::-webkit-scrollbar-thumb:hover { background: var(--profile-muted); }

/* addable card — full colour, clear affordance */
.xprf-addblk-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px;
  border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--profile-fg); font: inherit; cursor: pointer;
  transition: background var(--profile-dur-fast) var(--profile-ease), border-color var(--profile-dur-fast) var(--profile-ease); }
.xprf-addblk-card:hover { background: var(--profile-surface-2); border-color: color-mix(in srgb, var(--profile-accent) 40%, var(--profile-border)); }
.xprf-addblk-card__ic { width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--profile-surface); border: 1px solid var(--profile-border); color: var(--profile-fg); display: grid; place-items: center;
  transition: background var(--profile-dur-fast) var(--profile-ease), color var(--profile-dur-fast) var(--profile-ease), border-color var(--profile-dur-fast) var(--profile-ease); }
.xprf-addblk-card:hover .xprf-addblk-card__ic { background: var(--profile-accent-tint); color: var(--profile-accent-ink); }
.xprf-addblk-card__ic svg { width: 18px; height: 18px; }
.xprf-addblk-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xprf-addblk-card__name { font-weight: var(--profile-fw-bold); font-size: 14px; color: var(--profile-fg); }
.xprf-addblk-card__desc { font-size: 12.5px; color: var(--profile-muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.xprf-addblk-card__chev { color: var(--profile-border); flex: none; }
.xprf-addblk-card:hover .xprf-addblk-card__chev { color: var(--profile-accent); }
.xprf-addblk-card__chev svg { width: 18px; height: 18px; }

/* already-added card — greyed + a quiet neutral "Added" pill, no hover affordance */
.xprf-addblk-card.is-added { cursor: default; }
.xprf-addblk-card.is-added:hover { background: transparent; border-color: transparent; }
.xprf-addblk-card.is-added .xprf-addblk-card__ic { background: var(--profile-surface-2); color: var(--profile-muted); }
.xprf-addblk-card.is-added .xprf-addblk-card__name { color: var(--profile-muted); }
.xprf-addblk-card.is-added .xprf-addblk-card__desc { opacity: .8; }
.xprf-addblk-card__badge { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: var(--profile-fw-bold);
  padding: 4px 11px; border-radius: 999px; background: var(--profile-surface-2);
  color: var(--profile-muted); border: 1px solid var(--profile-border); }
.xprf-addblk-card__badge::before { content: "✓"; font-weight: var(--profile-fw-black); color: var(--profile-muted); }
.xprf-ed-addblk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 0; border-radius: 12px; background: var(--profile-accent); color: var(--profile-accent-text); font: inherit; font-size: var(--profile-fs-sm); font-weight: var(--profile-fw-bold); cursor: pointer; box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--profile-accent) 45%, transparent); transition: filter var(--profile-dur-fast) var(--profile-ease), transform var(--profile-dur-fast) var(--profile-ease), box-shadow var(--profile-dur-fast) var(--profile-ease); }
.xprf-ed-addblk:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--profile-accent) 55%, transparent); }
.xprf-ed-addblk__ic { color: var(--profile-accent-text); }
.xprf-ed-addblk__ic { width: 18px; height: 18px; display: inline-grid; place-items: center; }
.xprf-ed-addblk__ic svg { width: 18px; height: 18px; }

/* shared single-row: [icon] [borderless input] (+ optional trailing controls) */
.xprf-ed-inlines { display: flex; flex-direction: column; gap: 8px; }
.xprf-ed-inline { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 2px 12px; border: 1px solid var(--profile-border); border-radius: 12px; background: var(--profile-surface); }
.xprf-ed-inline__ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--profile-fg); }
.xprf-ed-inline__ic svg { width: 18px; height: 18px; }
.xprf-ed-inline__input, .xprf-ed-addr__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--profile-fg); font: inherit; font-size: var(--profile-fs-sm); padding: 10px 2px; }
.xprf-ed-inline__input:focus, .xprf-ed-addr__input:focus { outline: none; }

/* addresses row = inline + drag handle + validation state + delete */
.xprf-ed-addrs { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.xprf-ed-addr { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 6px 2px 3px; border: 1px solid var(--profile-border); border-radius: 12px; background: var(--profile-surface); }
.xprf-ed-addr.is-valid { border-color: color-mix(in srgb, #22c55e 46%, var(--profile-border)); }
.xprf-ed-addr.is-invalid { border-color: color-mix(in srgb, #f59e0b 58%, var(--profile-border)); }
body.xprf-ed-dragging { user-select: none; -webkit-user-select: none; }
/* lifted "grabbed" card while dragging (shared by addresses + blocks) */
.xprf-ed-addr.is-dragging, .xprf-ed-blk.is-dragging {
  position: relative; z-index: 6; cursor: grabbing;
  background: var(--profile-surface);
  border-color: color-mix(in srgb, var(--profile-accent) 40%, var(--profile-border));
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .34);
}
.xprf-ed-addr__drag { flex: none; width: 22px; display: grid; place-items: center; color: var(--profile-muted); cursor: grab; }
.xprf-ed-addr__drag:active { cursor: grabbing; }
.xprf-ed-addr__drag svg { width: 18px; height: 18px; }
.xprf-ed-addr__state { flex: none; width: 20px; height: 20px; display: grid; place-items: center; }
.xprf-ed-addr__state svg { width: 18px; height: 18px; }
.xprf-ed-addr__rm { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--profile-muted); cursor: pointer; }
.xprf-ed-addr__rm:hover { background: var(--profile-surface-2); color: #ef4444; }
.xprf-ed-addr__rm svg { width: 17px; height: 17px; }
/* labelled divider between the DATA form and the SETTINGS form in a block's config */
.xprf-ed-section {
  display: flex; flex-direction: column; gap: 3px;
  margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--profile-border);
}
.xprf-ed-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.xprf-ed-section__lbl { font-size: 0.9375rem; font-weight: var(--profile-fw-black); letter-spacing: -0.012em; color: var(--profile-fg); }
.xprf-ed-section__hint { font-size: var(--profile-fs-sm); line-height: 1.45; color: var(--profile-muted); }
.xprf-ed-fav__label { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.xprf-ed-fav__label .xprf-ed-addr__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xprf-ed-addr__stats { margin-top: 12px; font-size: var(--profile-fs-xs); color: var(--profile-muted); }
.xprf-ed-input {
  width: 100%; min-height: 44px; border-radius: 12px;
  background: var(--profile-surface);
  border: 1px solid color-mix(in srgb, var(--profile-border) 74%, var(--profile-fg) 16%);
  color: var(--profile-fg); padding: 11px 14px; font: inherit; font-size: var(--profile-fs-base);
  transition: border-color var(--profile-dur-fast) var(--profile-ease), box-shadow var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-input::placeholder { color: var(--profile-muted); opacity: 1; }
.xprf-ed-input:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--profile-border) 50%, var(--profile-fg) 30%); }
.xprf-ed-input:focus { outline: none; border-color: var(--profile-accent); box-shadow: 0 0 0 3px var(--profile-accent-tint); }
/* borderless inline/address rows get the ring on their frame */
.xprf-ed-inline:focus-within, .xprf-ed-addr:focus-within { border-color: var(--profile-accent); box-shadow: 0 0 0 3px var(--profile-accent-tint); }
.xprf-ed-inline, .xprf-ed-addr { transition: border-color var(--profile-dur-fast) var(--profile-ease), box-shadow var(--profile-dur-fast) var(--profile-ease); }
textarea.xprf-ed-input { resize: vertical; min-height: 64px; }
select.xprf-ed-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px; }
select.xprf-ed-select:disabled { opacity: .55; cursor: not-allowed; }
.xprf-ed-soonchip { margin-left: 8px; align-self: center; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: var(--profile-fw-bold); letter-spacing: .04em;
  background: var(--profile-accent-tint); color: var(--profile-accent-ink); }
/* block-manager row: label + small type badge (when a custom title is set) */
.xprf-ed-blk__labelwrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.xprf-ed-blk__labelwrap .xprf-ed-blk__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xprf-ed-blk__tag { flex: none; font-size: 10.5px; font-weight: var(--profile-fw-bold); letter-spacing: .02em;
  padding: 2px 7px; border-radius: 6px; background: var(--profile-surface-2); color: var(--profile-muted);
  border: 1px solid var(--profile-hairline); }

/* segmented control */
.xprf-ed-seg { display: flex; gap: 4px; padding: 3px; background: var(--profile-surface-2); border: 1px solid var(--profile-hairline); border-radius: 11px; }
.xprf-ed-seg__btn {
  flex: 1; min-width: 0; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent;
  color: var(--profile-muted); font: inherit; font-size: var(--profile-fs-sm); font-weight: var(--profile-fw-semibold);
  cursor: pointer; transition: background var(--profile-dur-fast) var(--profile-ease), color var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-seg__btn:hover { color: var(--profile-fg); }
.xprf-ed-seg__btn.is-on { background: var(--profile-accent); color: var(--profile-accent-text); }

/* accent swatches */
.xprf-ed-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.xprf-ed-swatch {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--profile-border);
  cursor: pointer; transition: transform var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-swatch:hover { transform: scale(1.12); }
.xprf-ed-swatch.is-on { box-shadow: 0 0 0 2px var(--profile-bg), 0 0 0 4px var(--profile-fg); }
.xprf-ed-swatch.is-default { background: linear-gradient(135deg, #94a3b8 45%, #475569 55%); }
.xprf-ed-color-row { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; font-size: var(--profile-fs-xs); color: var(--profile-muted); }
.xprf-ed-color { width: 46px; height: 28px; padding: 0; border: 1px solid var(--profile-border); border-radius: 7px; background: var(--profile-surface-2); cursor: pointer; }
.xprf-ed-range { width: 100%; accent-color: var(--profile-accent); }

/* Design: sub-section index cards + navigation */
.xprf-ed-subhead { font-size: var(--profile-fs-sm); letter-spacing: -0.01em; color: var(--profile-fg); font-weight: var(--profile-fw-bold); margin-top: 6px; }
.xprf-ed-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 16px; border: 1px solid transparent; border-radius: 14px;
  background: var(--profile-surface-2); color: var(--profile-fg); cursor: pointer;
  transition: border-color var(--profile-dur-fast) var(--profile-ease), background var(--profile-dur-fast) var(--profile-ease);
}
.xprf-ed-card:hover { border-color: color-mix(in srgb, var(--profile-accent) 40%, transparent); background: var(--profile-surface-hover); }
.xprf-ed-card__ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--profile-surface); color: var(--profile-fg); }
.xprf-ed-card__ic svg { width: 19px; height: 19px; }
.xprf-ed-card__label { font-weight: var(--profile-fw-semibold); font-size: var(--profile-fs-base); }
.xprf-ed-card__val { margin-left: auto; font-size: var(--profile-fs-sm); color: var(--profile-muted); }
.xprf-ed-card__chev { flex: none; width: 18px; height: 18px; color: var(--profile-muted); }
.xprf-ed-card__chev svg { width: 18px; height: 18px; }

.xprf-ed-back {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 4px 4px 4px 2px; border: 0; background: transparent; color: var(--profile-fg);
  font: inherit; font-size: var(--profile-fs-lg); font-weight: var(--profile-fw-bold); cursor: pointer;
}
/* Pin the section title / block-config breadcrumb to the top of the scrolling
   panel, so on long content the user always sees where they are (and the Back
   crumb) without scrolling to the top. The bar full-bleeds past the panel's
   horizontal padding so scrolled content never peeks in the side gutters, and
   the negative top margin seats it flush under the Cancel/Save head. */
.xprf-ed-panel__title, .xprf-ed-back {
  position: sticky; top: 0; z-index: 6;
  max-width: none; width: auto; align-self: stretch;
  margin: 0 -30px 10px; padding: 18px 30px 12px;
  background: var(--profile-surface);
  border-bottom: 1px solid var(--profile-hairline);
}
.xprf-ed-back { padding-left: 28px; }
.xprf-ed-back__ic { width: 20px; height: 20px; color: var(--profile-muted); }
.xprf-ed-back__ic svg { width: 20px; height: 20px; }

/* Header: layout picker grid (planned layouts) */
.xprf-ed-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.xprf-ed-layout {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 6px; border: 1.5px solid var(--profile-border); border-radius: 12px;
  background: var(--profile-surface); color: var(--profile-fg); font: inherit; font-size: var(--profile-fs-xs); cursor: pointer;
}
.xprf-ed-layout.is-on { border-color: var(--profile-accent); }
.xprf-ed-layout.is-soon { opacity: .6; }
.xprf-ed-layout__thumb { width: 100%; height: 40px; border-radius: 7px; background: var(--profile-surface-2); border: 1px solid var(--profile-hairline); }
.xprf-ed-tag { position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: var(--profile-fw-bold); padding: 1px 5px; border-radius: 999px; background: var(--profile-surface-2); color: var(--profile-muted); }

.xprf-ed-plan { margin: 4px 0 0; padding-left: 18px; color: var(--profile-muted); font-size: var(--profile-fs-sm); }
.xprf-ed-plan li { margin: 4px 0; }

/* flat, airy form sections (no nested boxes / dividers) */
.xprf-ed-group { display: flex; flex-direction: column; gap: 12px; }
.xprf-ed-group__head { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: 0.9375rem; font-weight: var(--profile-fw-black); letter-spacing: -0.012em; color: var(--profile-fg); }
.xprf-ed-group__body { display: flex; flex-direction: column; gap: 12px; }
.xprf-ed-soonpill { margin-left: auto; font-size: 10px; font-weight: var(--profile-fw-bold); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--profile-accent-tint); color: var(--profile-accent); }

/* Linktree-style color pill: swatch + hex in one rounded frame */
.xprf-ed-colorpill { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; border-radius: 999px; background: var(--profile-surface-2); border: 1px solid var(--profile-hairline); cursor: pointer; }
.xprf-ed-colorpill input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; }
.xprf-ed-colorpill__sw { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--profile-fg) 18%, transparent); }
.xprf-ed-colorpill__hex { font-family: var(--profile-font-mono, ui-monospace, monospace); font-size: var(--profile-fs-sm); font-weight: var(--profile-fw-semibold); color: var(--profile-fg); letter-spacing: .02em; }

/* image upload (base64) — cover (16:6) / avatar (circle), drag-drop dashed dropzone */
.xprf-ed-upload { position: relative; background: var(--profile-surface-2); border: 1px solid var(--profile-hairline); transition: border-color var(--profile-dur-fast) var(--profile-ease), background var(--profile-dur-fast) var(--profile-ease); }
.xprf-ed-upload.is-busy { opacity: .55; pointer-events: none; }
.xprf-ed-upload.is-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2px solid var(--profile-accent); border-top-color: transparent; border-radius: 50%; animation: xprf-ed-spin .7s linear infinite; }
@keyframes xprf-ed-spin { to { transform: rotate(360deg); } }
.xprf-ed-upload--cover { width: 100%; aspect-ratio: 16 / 6; border-radius: 12px; overflow: hidden; }
.xprf-ed-upload--avatar { width: 84px; height: 84px; border-radius: 50%; }
.xprf-ed-upload--thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
/* compact thumbnail picker — small square, like the avatar chooser (no overflow
   clip so the edit/remove buttons sit on the corners) */
.xprf-ed-upload--thumbmini { width: 68px; height: 68px; border-radius: 12px; flex: none; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__img { border-radius: 11px; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__cloud { width: 20px; height: 20px; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__ph > span:last-child { display: none; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__edit { right: -5px; bottom: -5px; width: 26px; height: 26px; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__edit svg { width: 13px; height: 13px; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__remove { right: -5px; top: -5px; width: 22px; height: 22px; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__remove svg { width: 12px; height: 12px; }
/* row field: label left, compact control right */
.xprf-ed-field--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.xprf-ed-field--row > .xprf-ed-field__lbl { flex: 1 1 auto; }
.xprf-ed-upload__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xprf-ed-upload--avatar .xprf-ed-upload__img { border-radius: 50%; }
.xprf-ed-upload.is-empty { border: 2px dashed var(--profile-border); cursor: pointer; }
.xprf-ed-upload.is-empty:hover { border-color: color-mix(in srgb, var(--profile-accent) 45%, var(--profile-border)); }
.xprf-ed-upload.is-dragover { border: 2px dashed var(--profile-accent); background: var(--profile-accent-tint); }
.xprf-ed-upload.is-empty .xprf-ed-upload__img { display: none; }
.xprf-ed-upload__ph { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--profile-muted); font-size: var(--profile-fs-xs); font-weight: var(--profile-fw-semibold); }
.xprf-ed-upload.is-empty .xprf-ed-upload__ph { display: flex; }
.xprf-ed-upload.is-dragover .xprf-ed-upload__ph { color: var(--profile-accent); }
.xprf-ed-upload__cloud { width: 26px; height: 26px; }
.xprf-ed-upload__cloud svg { width: 100%; height: 100%; }
.xprf-ed-upload--avatar .xprf-ed-upload__cloud { width: 22px; height: 22px; }
.xprf-ed-upload--avatar .xprf-ed-upload__ph > span:last-child { display: none; }
.xprf-ed-upload__edit { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--profile-surface); background: rgba(15, 18, 28, .72); color: #fff; cursor: pointer; }
.xprf-ed-upload__edit:hover { background: rgba(15, 18, 28, .92); }
.xprf-ed-upload__edit svg { width: 15px; height: 15px; }
.xprf-ed-upload--avatar .xprf-ed-upload__edit { right: -4px; bottom: -4px; width: 30px; height: 30px; }
/* remove (×) — shown only when the zone has an image */
.xprf-ed-upload__remove { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--profile-surface); background: rgba(15, 18, 28, .72); color: #fff; cursor: pointer; }
.xprf-ed-upload__remove:hover { background: rgba(220, 38, 38, .92); }
.xprf-ed-upload__remove svg { width: 14px; height: 14px; }
.xprf-ed-upload.is-empty .xprf-ed-upload__remove { display: none; }
.xprf-ed-upload--avatar .xprf-ed-upload__remove { right: -4px; top: -4px; width: 26px; height: 26px; }

/* access gate */
.xprf-ed-gate { position: relative; max-width: 400px; margin: 92px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 36px 32px 30px; background: var(--profile-surface); border: 1px solid var(--profile-border);
  border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -20px rgba(16, 24, 40, 0.16); }
.xprf-ed-gate__icon { width: 52px; height: 52px; margin-bottom: 12px; border-radius: 14px; display: grid; place-items: center;
  background: var(--profile-accent-tint); color: var(--profile-accent-ink); }
.xprf-ed-gate__icon svg { width: 26px; height: 26px; }
.xprf-ed-gate__title { font-size: 20px; font-weight: var(--profile-fw-black); color: var(--profile-fg); margin: 0; letter-spacing: -0.01em; }
.xprf-ed-gate__msg { font-size: 14px; color: var(--profile-muted); margin: 0 0 16px; line-height: 1.5; }
.xprf-ed-gate__link { font-size: 13px; color: var(--profile-muted); margin-top: 8px; }

/* laptop 13-14": collapse the nav to icons early so the canvas keeps room (audit 7.2) */
@media (max-width: 1240px) {
  .xprf-ed-menu { width: 62px; }
  .xprf-ed-nav { justify-content: center; padding: 11px; }
  .xprf-ed-nav span:not(.xprf-ed-nav__ic) { display: none; }
  .xprf-ed-brand span:last-child { display: none; }
  .xprf-ed-connectrow { display: none; }
  .xprf-ed-backdash { justify-content: center; padding: 11px; }
  .xprf-ed-backdash span { display: none; }
}
@media (max-width: 1080px) { .xprf-ed-content { grid-template-columns: minmax(0, 1fr) 520px; } }
/* narrow: drop the live preview */
@media (max-width: 820px) {
  .xprf-ed-content { grid-template-columns: minmax(0, 1fr); }
  .xprf-ed-preview { display: none; }
}

/* ===========================================================================
   Publish overlay — waiting / error / success modal (replaces button-only
   loading). Confetti canvas on success. Editor chrome is always light.
   =========================================================================== */
.xprf-pubov { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.xprf-pubov.is-open { display: flex; }
.xprf-pubov__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #0b1220 55%, transparent); backdrop-filter: blur(5px); animation: xprf-pubov-fade .18s ease both; }
/* Card is ALWAYS light (editor chrome is light) regardless of the profile theme:
   override the neutral tokens locally so text + buttons read correctly; the brand
   accent is kept from the active theme. Larger + stronger shadow for a solid feel. */
.xprf-pubov__card {
  --profile-surface: #ffffff;
  --profile-surface-2: #f1f5f9;
  --profile-fg: #0b1220;
  --profile-muted: #5b6b85;
  --profile-border: #e4e9f2;
  --profile-hairline: #eef2f8;
  position: relative; z-index: 1; width: min(460px, 100%); overflow: hidden;
  background: #ffffff; border: 1px solid #e4e9f2;
  border-radius: 26px; box-shadow: 0 32px 80px -16px rgba(11,18,32,.38), 0 4px 14px rgba(11,18,32,.10);
  padding: 44px 40px 32px; text-align: center;
  animation: xprf-pubov-pop .24s cubic-bezier(.2,.9,.3,1.3) both;
}
.xprf-pubov__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.xprf-pubov__icon { position: relative; z-index: 1; width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.xprf-pubov__icon svg { width: 42px; height: 42px; }
.xprf-pubov__icon.is-ok  { background: color-mix(in srgb, #22c55e 15%, #ffffff); color: #16a34a; box-shadow: 0 0 0 8px color-mix(in srgb, #22c55e 9%, transparent); }
.xprf-pubov__icon.is-err { background: color-mix(in srgb, #f43f5e 13%, #ffffff); color: #e11d48; box-shadow: 0 0 0 8px color-mix(in srgb, #f43f5e 8%, transparent); }
.xprf-pubov__icon.is-spin { background: transparent; box-shadow: none; }
.xprf-pubov__spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--profile-accent) 22%, #e4e9f2); border-top-color: var(--profile-accent); animation: xprf-pubov-spin .72s linear infinite; }
.xprf-pubov__title { margin: 0 0 8px; font-size: 24px; font-weight: var(--profile-fw-black); letter-spacing: -.01em; color: #0b1220; }
.xprf-pubov__msg { margin: 0 0 26px; font-size: 15px; line-height: 1.55; color: #5b6b85; }
.xprf-pubov__actions { display: flex; gap: 12px; justify-content: center; }
.xprf-pubov__actions .xprf-ed-btn { min-width: 128px; height: 44px; font-size: 15px; justify-content: center; }
@keyframes xprf-pubov-spin { to { transform: rotate(360deg); } }
@keyframes xprf-pubov-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes xprf-pubov-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xprf-pubov__card, .xprf-pubov__backdrop { animation: none; } .xprf-pubov__spin { animation-duration: 1.2s; } }

/* Link block — suggested thumbnail from the page's og:image / favicon */
.xprf-ed-suggest-slot { margin-top: 8px; }
.xprf-ed-suggest { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--profile-surface-2); border: 1px solid var(--profile-border); border-radius: 12px; }
.xprf-ed-suggest__img { width: 42px; height: 42px; flex: none; border-radius: 9px;
  object-fit: contain; display: block; background-color: #fff;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  border: 1px solid var(--profile-hairline); }
.xprf-ed-suggest__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.xprf-ed-suggest__t { font-size: 12.5px; font-weight: var(--profile-fw-semibold); color: var(--profile-fg); }
.xprf-ed-suggest__sub { font-size: 11.5px; color: var(--profile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xprf-ed-suggest .xprf-ed-btn { flex: none; height: 32px; }

/* OG card theme picker — gradient preview swatches */
.xprf-ogtheme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xprf-ogtheme__opt { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--profile-border, #e3e3e8); border-radius: 10px; background: var(--profile-surface, #fff); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.xprf-ogtheme__opt:hover { border-color: #b9b9c2; }
.xprf-ogtheme__opt.is-sel { border-color: #2f6fe0; box-shadow: 0 0 0 2px rgba(47,111,224,.25); }
.xprf-ogtheme__sw { position: relative; height: 42px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.xprf-ogtheme__dot { position: absolute; left: 8px; top: 9px; width: 10px; height: 10px; border-radius: 50%; }
.xprf-ogtheme__line { position: absolute; left: 8px; top: 24px; width: 26px; height: 4px; border-radius: 2px; opacity: .9; }
.xprf-ogtheme__lbl { font-size: 12px; font-weight: 600; text-align: center; color: var(--profile-text, #333); }

/* Settings secondary sub-tabs (Visibility · General · SEO · Social share) */
.xprf-settabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--profile-surface-2); border: 1px solid var(--profile-border); border-radius: 12px; }
.xprf-settab { flex: 1; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--profile-muted, #8a8a93); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.xprf-settab:hover { color: var(--profile-fg); }
.xprf-settab.is-active { background: var(--profile-surface); color: var(--profile-fg); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.xprf-setpanel { display: flex; flex-direction: column; gap: 18px; animation: xprf-setfade .18s ease; }
@keyframes xprf-setfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Confirm dialog — guards block removal */
.xprf-confirm { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,10,16,.55); backdrop-filter: blur(3px); animation: xprf-setfade .15s ease; }
.xprf-confirm__panel { width: 100%; max-width: 360px; background: var(--profile-surface); border: 1px solid var(--profile-border); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.xprf-confirm__title { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--profile-fg); }
.xprf-confirm__msg { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--profile-muted); }
.xprf-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; }
.xprf-confirm__btn { height: 40px; padding: 0 18px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--profile-border); background: var(--profile-surface-2); color: var(--profile-fg); transition: background .14s ease; }
.xprf-confirm__btn:hover { background: var(--profile-surface-hover); }
.xprf-confirm__btn--danger { border-color: transparent; background: #dc2626; color: #fff; }
.xprf-confirm__btn--danger:hover { background: #b91c1c; }

/* Team member editor — compact: avatar left, Name/Role beside it */
.xprf-ed-teamm__row { display: flex; gap: 14px; align-items: center; }
.xprf-ed-teamm__av { flex: none; }
.xprf-ed-teamm__av .xprf-ed-upload--avatar { width: 72px; height: 72px; }   /* compact avatar in the Team repeat (keeps the row balanced) */
.xprf-ed-teamm__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Upload: "paste image URL" button (bottom-left, mirrors the edit pencil) */
.xprf-ed-upload__linkbtn { position: absolute; left: 8px; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--profile-surface); background: rgba(15, 18, 28, .72); color: #fff; cursor: pointer; }
.xprf-ed-upload__linkbtn:hover { background: rgba(15, 18, 28, .92); }
.xprf-ed-upload__linkbtn svg { width: 15px; height: 15px; }
.xprf-ed-upload--avatar .xprf-ed-upload__linkbtn { left: -4px; bottom: -4px; width: 30px; height: 30px; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__linkbtn { left: -5px; bottom: -5px; width: 26px; height: 26px; }
.xprf-ed-upload--thumbmini .xprf-ed-upload__linkbtn svg { width: 13px; height: 13px; }
/* paste-URL prompt (reuses the confirm overlay) */
.xprf-urlprompt__input { width: 100%; margin: 0 0 16px; box-sizing: border-box; }
.xprf-confirm__btn--primary { border-color: transparent; background: var(--profile-accent, #2f6fe0); color: #fff; }
.xprf-confirm__btn--primary:hover { filter: brightness(1.06); }