/* ============================================================================
   LpConverse theme for the BuilderJS editor
   ============================================================================

   The builder is framed by the LpConverse app, so its chrome has to read as the
   same product. This file is the whole of that: nothing in dist/ is edited,
   because dist/builder.css is 1.5 MB minified onto 48 lines and any hand-edit
   there is unreviewable and lost on the next vendor upgrade.

   HOW IT WINS
   -----------
   Linked last in <head> — after dist/builder.css, after loading.css, and after
   the inline <style> block above it. Source order does most of the work, which
   is why almost nothing here needs !important.

   Every rule is prefixed `#lpc`, the id on <body> in design.html. An id
   outranks any number of classes, and that is what it takes here: the first
   attempt used `html body`, which is one class plus two elements and therefore
   LOSES to a two-class vendor rule. `.top` is declared as `.wrapper .top` in
   dist/builder.css, so the top bar stayed black. Vendor selectors in that file
   run up to seven classes deep, and dist/builder.css line 20 is ~731 KB of
   unrelated Acelle Mail CSS with its own `body` and `.btn-primary` rules, so
   matching class counts one by one is not a strategy. The id settles all of it.

   Keep the prefix on every rule. A bare selector added later will silently lose
   and the next person will not know why.

   !important is used ONLY where the vendor used one, or where an inline style=
   attribute inside the builder.js HTML string is in the way. Every such use
   names its source in a trailing comment.

   TWO THINGS YOU MUST NOT DO
   --------------------------
   1. Never set `display` on .top or .box-popup-right. design.html reveals both
      by assigning element.style.display — an inline style. A non-important rule
      of ours correctly loses to it; an !important one would win and pin them
      forever.
   2. Never put font-family on `body` or `*`. The design canvas is the
      customer's email, inside #builder_iframe, and it must keep its own fonts.
      Chrome selectors only.

   The vendor logo cannot be changed from JS: setLogo() at dist/builder.js:2108
   re-stamps the BuilderJS path on every run and ignores the `logo:` option.
   CSS is the only lever — see "Branding" below.
   ========================================================================= */

/* Must be the first at-rule in the file — an @import after any other rule is
   dropped by the parser. The app loads Inter through next/font, which emits a
   hashed family name the iframe cannot inherit, so the builder loads its own. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------------
   Tokens — hex mirrors of the app's oklch values.
   Source of truth: lpconverse-frontend-v2/src/app/globals.css
   Light only: the canvas renders customer email HTML, which is almost always
   light, so dark chrome around a white canvas would read as broken.
   --------------------------------------------------------------------------- */
:root {
  --lpc-bg: #ffffff;
  --lpc-fg: #0a0a0a;
  --lpc-card: #ffffff;
  --lpc-muted: #f5f5f5;
  --lpc-muted-fg: #737373;
  --lpc-border: #e5e5e5;
  --lpc-input: #e5e5e5;
  --lpc-primary: #1877f2;
  --lpc-primary-fg: #fafafa;
  --lpc-primary-ring: rgba(24, 119, 242, 0.5);
  --lpc-destructive: #e7000b;
  --lpc-success: #059669;

  --lpc-r-lg: 10px;   /* inputs, buttons */
  --lpc-r-xl: 14px;   /* cards, panels, popovers */
  --lpc-r-2xl: 18px;  /* modals */

  --lpc-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lpc-shadow-sm: 0 1px 3px 0 rgba(10, 10, 10, 0.1), 0 1px 2px -1px rgba(10, 10, 10, 0.1);
  --lpc-shadow-pop: 0 8px 24px rgba(10, 10, 10, 0.08);
}

/* ---------------------------------------------------------------------------
   Typography — chrome only, never the canvas
   --------------------------------------------------------------------------- */
#lpc .top,
#lpc .content-right,
#lpc .content-left,
#lpc .undo-redo,
#lpc .box-popup-right,
#lpc #builderModal,
#lpc .swal2-container,
#lpc .loading-page-overlay {
  font-family: var(--lpc-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
   Scrollbars — the app's 3px thin scrollbar (globals.css)
   `*` is acceptable here only because ::-webkit-scrollbar cannot be reached any
   other way; it takes no part in the specificity contest above.
   --------------------------------------------------------------------------- */
#lpc *::-webkit-scrollbar { width: 3px; height: 3px; }
#lpc *::-webkit-scrollbar-track { background: transparent; }
#lpc *::-webkit-scrollbar-thumb {
  background: rgba(161, 161, 161, 0.35);
  border-radius: 99px;
}
#lpc *::-webkit-scrollbar-thumb:hover { background: rgba(115, 115, 115, 0.55); }
#lpc * {
  scrollbar-width: thin;
  scrollbar-color: rgba(161, 161, 161, 0.35) transparent;
}

/* ---------------------------------------------------------------------------
   Buttons — translated from src/components/ui/button.tsx, variant="default".
   Deliberately a lit surface rather than a flat fill: white top gradient, inset
   white ring, brightness on hover. Replaces the vendor's #0190d2 / #027dbb.
   --------------------------------------------------------------------------- */
#lpc .btn.btn-primary,
#lpc .menu-bar-action,
#lpc .swal2-styled.swal2-confirm {
  height: 32px;
  min-height: 32px;
  /* padding: 0 14px; */
  border-radius: var(--lpc-r-lg);
  font: 500 14px/1 var(--lpc-font);
  text-transform: none;
  letter-spacing: 0;
  color: var(--lpc-primary-fg);
  background-color: var(--lpc-primary);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent);
  border: 1px solid #0060c8; /* = color-mix(primary, black 16%) */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), var(--lpc-shadow-sm);
  transition: filter 0.12s ease, transform 0.12s ease;
}
#lpc .btn.btn-primary:hover,
#lpc .menu-bar-action:hover,
#lpc .swal2-styled.swal2-confirm:hover {
  filter: brightness(1.1);
  color: var(--lpc-primary-fg);
}
#lpc .btn.btn-primary:active,
#lpc .menu-bar-action:active,
#lpc .swal2-styled.swal2-confirm:active {
  filter: brightness(0.95);
  transform: translateY(1px);
}
#lpc .btn.btn-primary:focus-visible,
#lpc .menu-bar-action:focus-visible,
#lpc .swal2-styled.swal2-confirm:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 3px var(--lpc-primary-ring);
}

/* The vendor also ships Save & Close and Export as primary buttons up here.
   Both are gone — Export is switched off by disableFeatures, Save & Close by
   design.html — so SAVE is the one filled button on the screen, per DESIGN.md.
   The close control is not a button tier at all; it is a ghost icon button,
   defined under "Close buttons" further down. */

/* Save spinner — vendor uses #4784b8 / #00c4ff on a blue button. */
#lpc .menu-bar-action .loader-save {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Inputs — translated from src/components/ui/input.tsx

   TWO SIZES, and the distinction matters. The app's input is 40px tall with
   8/16 padding. That is right in a dialog and wrong in the settings panel: the
   vendor sizes those rows for a ~28px control, so a 40px input overflowed its
   row and the value was clipped mid-glyph — "Times" and "14px" were both cut in
   half. The panel gets a 30px variant below with the same border, radius and
   focus ring, so it still reads as the same control.
   --------------------------------------------------------------------------- */
#lpc input.form-control,
#lpc select.form-control,
#lpc textarea.form-control,
#lpc .swal2-input,
#lpc .swal2-textarea {
  border-radius: var(--lpc-r-lg);
  border: 1px solid var(--lpc-input);
  background: var(--lpc-card);
  color: var(--lpc-fg);
  font-family: var(--lpc-font);
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#lpc .swal2-input,
#lpc .swal2-textarea {
  height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.4;
}
#lpc input.form-control::placeholder,
#lpc textarea.form-control::placeholder,
#lpc .swal2-input::placeholder {
  color: var(--lpc-muted-fg);
}
#lpc input.form-control:focus,
#lpc select.form-control:focus,
#lpc textarea.form-control:focus,
#lpc .swal2-input:focus,
#lpc .swal2-textarea:focus {
  outline: none;
  border-color: var(--lpc-primary);
  box-shadow: 0 0 0 3px var(--lpc-primary-ring);
}

/* The compact variant, for everything inside the right-hand settings panel.
   30px with 6px vertical padding leaves room for a 14px line box, so nothing
   clips whatever the row height the vendor chose. */
#lpc .content-right input.form-control,
#lpc .content-right select.form-control,
#lpc .content-right input[type="text"],
#lpc .content-right input[type="number"] {
  height: 30px;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 16px;
  border-radius: 8px;
}
#lpc .content-right textarea.form-control,
#lpc .content-right textarea {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 8px;
}
/* Selects need room for the native arrow or the last character sits under it. */
#lpc .content-right select.form-control,
#lpc .content-right select {
  height: 30px;
  min-height: 30px;
  padding: 0 26px 0 10px;
  font: 400 13px/28px var(--lpc-font);
  border-radius: 8px;
  background: var(--lpc-card);
  color: var(--lpc-fg);
  border: 1px solid var(--lpc-input);
}
/* Colour swatch + hex pairs sit in one row; the swatch must not stretch. */
#lpc .content-right input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--lpc-border);
  border-radius: 8px;
  background: var(--lpc-card);
  cursor: pointer;
}
/* The -/+ steppers the vendor draws as flat #c9d3cf squares, and the ones
   design.html injects for Content Width. */
#lpc .content-right .place-value button,
#lpc .content-right ._1_minus-plus button,
#lpc .content-right button.minus,
#lpc .content-right button.plus {
  width: 26px !important;   /* inline width/height on the injected markup */
  height: 26px !important;
  padding: 0;
  border: 1px solid var(--lpc-border) !important;
  border-radius: 8px;
  background-color: var(--lpc-card) !important;
  color: var(--lpc-fg);
  font: 500 14px/1 var(--lpc-font);
}
#lpc .content-right .place-value button:hover,
#lpc .content-right ._1_minus-plus button:hover {
  background-color: var(--lpc-muted) !important;
}
/* Panel section headings — vendor renders them as bare bold text at whatever
   size the surrounding block inherited. */
#lpc .content-right .widget-row > h4,
#lpc .content-right .jumb-title,
#lpc .content-right .setting-module > .title {
  font: 600 12px/1.4 var(--lpc-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lpc-muted-fg);
}
#lpc .content-right .widget .label,
#lpc .content-right .widget-row .label {
  font: 400 13px/1.4 var(--lpc-font);
  color: var(--lpc-fg);
}

/* ---------------------------------------------------------------------------
   Top bar — vendor: background #000, height 55px, position fixed.
   Height and position are load-bearing: the height arithmetic further down
   subtracts exactly 55px. Do not change either.
   --------------------------------------------------------------------------- */
#lpc .top {
  background: var(--lpc-card);
  border-bottom: 1px solid var(--lpc-border);
  box-shadow: none;
}
#lpc .top .top-left .design-menu,
#lpc .top .top-left .action,
#lpc .top .top-left .design-menu span.action-design {
  color: var(--lpc-fg);
  font-family: var(--lpc-font);
  font-size: 14px;
  font-weight: 500;
}
/* Vendor draws 1px separators between menu items; a white bar doesn't need them. */
#lpc .top .top-left .design-menu:after,
#lpc .top .top-left .action:after {
  background: transparent;
}
#lpc .top .top-left .action-menu .material-icons,
#lpc .top-left i.fa-angle-down {
  color: var(--lpc-muted-fg);
}

/* ---------------------------------------------------------------------------
   Menus / dropdowns — vendor: #444 surface, #333 hover, #4a4a4a borders.
   Becomes our popover.

   There are four of these and they share exactly one class, `.action-menu`:

     Design           .design-menu             ul.design.display
     Change Template  .action-choose-template  ul.display-template
     Preview          .preview-page            ul.display
     Mode Design      .view-mode               ul.display-view-mode

   An earlier pass matched `.design-menu ul, .action ul`, which caught the
   Design menu and — because `.action` happens to also sit on Preview — half of
   Preview, leaving Change Template and Mode Design black. Hanging everything
   off `.action-menu` covers all four and cannot drift when a list is renamed.
   --------------------------------------------------------------------------- */
#lpc .top .top-left .action-menu ul {
  background: var(--lpc-card);
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-xl);
  box-shadow: var(--lpc-shadow-pop);
  padding: 4px;
  min-width: 190px;
}
#lpc .top .top-left .action-menu ul li {
  border-bottom: 0;
  border-radius: var(--lpc-r-lg);
  padding: 0;
}
#lpc .top .top-left .action-menu ul li a {
  display: block;
  padding: 8px 12px;
  color: var(--lpc-fg);
  font-family: var(--lpc-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}
#lpc .top .top-left .action-menu ul li:hover,
#lpc .top .top-left .action-menu ul li:hover a {
  background: var(--lpc-muted);
  color: var(--lpc-fg);
}
#lpc .top .top-left .action-menu ul li:hover {
  border-radius: var(--lpc-r-lg);
}

/* The Change Template list can outrun the viewport — 11 entries at 37px each
   plus the bar. Cap it and let it scroll rather than run off the bottom. */
#lpc .top .top-left .action-choose-template ul.display-template {
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

/* Open state. All four trigger classes, because the vendor uses three
   different names for the same idea. */
#lpc .top .top-left .add-background-design,
#lpc .top .top-left .add-background-choose,
#lpc .top .top-left .add-background-color,
#lpc .top .top-left .action-menu:hover {
  background-color: var(--lpc-muted);
  border-radius: var(--lpc-r-lg);
}

/* Hover preview beside the Change Template list — vendor draws it as a bare
   image on a dark slab. */
#lpc .top .top-left .template-thumbnail {
  padding: 8px;
  background: var(--lpc-card);
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-xl);
  box-shadow: var(--lpc-shadow-pop);
}
#lpc .top .top-left .template-thumbnail img.img-template {
  display: block;
  width: 100%;
  border-radius: var(--lpc-r-lg);
  background: var(--lpc-muted);
}

/* ---------------------------------------------------------------------------
   Right panel — vendor: #f5f5f5 surface, #516167 active tab, #c0c5c9 hover.
   --------------------------------------------------------------------------- */
#lpc .content-right,
#lpc .content-right .tab-pane .container,
#lpc .content-right .tab-pane .setting-module {
  background: var(--lpc-muted);
}
#lpc .content-right nav {
  background: var(--lpc-card);
  border-bottom: 1px solid var(--lpc-border);
}
#lpc .content-right nav #nav-tab a {
  color: var(--lpc-muted-fg);
  font-family: var(--lpc-font);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  border-bottom: 2px solid transparent;
  background-color: transparent;
}
#lpc .content-right nav #nav-tab a.active {
  color: var(--lpc-fg);
  background-color: transparent;
  border-bottom-color: var(--lpc-primary);
}
#lpc .content-right nav #nav-tab a:hover {
  background-color: var(--lpc-muted);
  color: var(--lpc-fg);
}
#lpc .content-right .tab-pane .setting-module .jumb-title .container {
  background: transparent;
  color: var(--lpc-muted-fg);
  font-size: 12px;
}
#lpc .content-right .tab-pane .setting-module ul li.tags {
  border-bottom-color: var(--lpc-border);
}
/* Widget cards sit inside an already-tinted panel, so per DESIGN.md they take a
   surface rather than a border — never a border inside a border. */
#lpc .content-right ._1content .panel__body {
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-lg);
  background: var(--lpc-card);
  color: var(--lpc-fg);
  text-transform: none;
  font-family: var(--lpc-font);
}

/* ---------------------------------------------------------------------------
   Floating controls — vendor: rgba(72,78,81,.85) and #424952 slabs.
   --------------------------------------------------------------------------- */
#lpc .undo-redo .undo-redo-actions .undo-redo-action-undo,
#lpc .undo-redo .undo-redo-actions .undo-redo-action-redo,
#lpc .undo-redo .undo-redo-actions .undo-redo-action-history,
#lpc .box-popup-right {
  background: var(--lpc-card);
  border: 1px solid var(--lpc-border);
  box-shadow: var(--lpc-shadow-sm);
  color: var(--lpc-fg);
}
#lpc .undo-redo .undo-redo-actions .undo-redo-action-undo:hover,
#lpc .undo-redo .undo-redo-actions .undo-redo-action-redo:hover,
#lpc .undo-redo .undo-redo-actions .undo-redo-action-history:hover {
  background: var(--lpc-muted);
}
#lpc .undo-redo-actions .history,
#lpc .box-popup-right i.icon-box {
  color: var(--lpc-muted-fg);
}
#lpc .undo-redo__history--wrapper .undo-redo__history {
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-xl);
  box-shadow: var(--lpc-shadow-pop);
}
#lpc .undo-redo__history ul li.history__step {
  border-bottom-color: var(--lpc-border);
}
#lpc .undo-redo__history ul li.history__step .step__body .step__title {
  color: var(--lpc-fg);
  font-family: var(--lpc-font);
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   Vendor modal — #dcdcdc header
   --------------------------------------------------------------------------- */
#lpc #builderModal .modal-dialog .modal-content {
  border: 0;
  border-radius: var(--lpc-r-2xl);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.1);
  overflow: hidden;
}
#lpc #builderModal .modal-dialog .modal-content .modal-header {
  background: var(--lpc-card);
  border-bottom: 1px solid var(--lpc-border);
  padding: 16px;
  font-family: var(--lpc-font);
}

/* ---------------------------------------------------------------------------
   Accents — vendor scatters #0190d2 and #4cb9ea through the panels
   --------------------------------------------------------------------------- */
#lpc .toggle-desktop-mobile .btn-select-type.active,
#lpc .section-tren .widget .container .right div.square {
  background-color: var(--lpc-primary);
  color: var(--lpc-primary-fg);
}
/* `.tren input` used to be in the list above, which was too broad: .tren wraps
   the padding and image-link fields as well as the sliders, so every numeric
   box in Block Options came out as a solid blue tile with white digits. A
   filled primary surface is for the one important action on a screen, not for
   a value you type into. Sliders only. */
#lpc div .widget .tren input[type="range"] {
  accent-color: var(--lpc-primary);
}
/* The numeric steppers those sliders sit beside. */
#lpc .content-right .minus-plus input {
  height: 26px;
  width: 44px;
  padding: 0 6px;
  border: 1px solid var(--lpc-input);
  border-radius: 8px;
  background: var(--lpc-card);
  color: var(--lpc-fg);
  font: 400 13px/24px var(--lpc-font);
  text-align: center;
}
#lpc .content-right .minus-plus span.minus button,
#lpc .content-right .minus-plus span.plus button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--lpc-border);
  border-radius: 8px;
  background: var(--lpc-card);
  color: var(--lpc-fg);
  font: 500 14px/1 var(--lpc-font);
}
#lpc .content-right .minus-plus span.minus button:hover,
#lpc .content-right .minus-plus span.plus button:hover {
  background: var(--lpc-muted);
}
#lpc .styled3[type="checkbox"]:checked ~ .check-symbol:before {
  background-color: var(--lpc-primary);
}
#lpc div .widget.image-name .tren div.button button.btn-info {
  background-color: var(--lpc-primary);
  border-color: #0060c8;
}
#lpc div .widget-section.link-image .wg-info .duoi a,
#lpc .widget-action .wg-info .duoi a,
#lpc .action-video .widget__label a {
  color: var(--lpc-primary);
}
#lpc .undo-redo__history ul li.history_item_current:before,
#lpc .history_add_mouseenter:before,
#lpc .history_add_mouseenter:after,
#lpc .history__step:hover:before {
  background-color: var(--lpc-primary);
}

/* ---------------------------------------------------------------------------
   Branding
   The menu-bar logo is vendor markup (dist/builder.js:9204) and cannot be
   changed from JS — setLogo() ignores the `logo:` option and re-stamps the
   BuilderJS path on every run. Hidden, not replaced: the app's own navbar sits
   directly above this frame, so a second wordmark inside it is a duplicate
   brand at 40px.
   --------------------------------------------------------------------------- */
#lpc .top .top-left .logo,
#lpc .top .top-left .logo img.logo-img {
  display: none !important; /* beats setLogo()'s re-stamped element */
}
/* The <li> that wrapped it, so the Design menu doesn't sit behind a gap. */
#lpc .top .top-left ul.menu-bar > li:has(> .logo) {
  display: none !important;
}
/* The vendor logo carried margin-left:-15px, which was the bar's left inset. */
#lpc .top .top-left ul.menu-bar {
  padding-left: 4px;
}

/* Startup splash — vendor renders a grey #eee overlay with an animated GIF and
   a "Starting...." label. Both the background and the label's font-size are
   inline attributes on the builder.js HTML string, so both need !important. */
#lpc .loading-page-overlay {
  background: var(--lpc-bg) !important; /* inline style= in builder.js:9204 */
}
#lpc .loading-page-overlay img {
  display: none !important; /* the vendor's base64 GIF */
}
#lpc .loading-page-overlay label {
  font-size: 0 !important; /* inline font-size:95% in builder.js:9204 */
  color: var(--lpc-muted-fg);
}
#lpc .loading-page-overlay label:after {
  content: "Preparing your editor…";
  font: 400 14px/1.4 var(--lpc-font);
  color: var(--lpc-muted-fg);
}
#lpc .loading-page-overlay > div > div:first-child:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid var(--lpc-border);
  border-top-color: var(--lpc-primary);
  animation: lpc-spin 0.7s linear infinite;
}
@keyframes lpc-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   SweetAlert (v8.14.0, bundled inside dist/builder.js — NOT v11).
   The v8 dialect is `type:` not `icon:`, `onOpen` not `didOpen`, and
   customClass is a STRING not an object. design.html already uses it
   correctly; "modernising" those call sites breaks all seven at once.

   Target: src/components/ui/dialog.tsx — light overlay, blurred, ringed panel
   with NO drop shadow.
   --------------------------------------------------------------------------- */

/* dist/builder.css:48 ends with .swal2-container{position:static!important} and
   :21 pins .swal2-popup{position:fixed;top:14px}. Together they top-pin the
   dialog instead of centring it, so both need !important to undo. */
#lpc .swal2-container {
  position: fixed !important;   /* dist/builder.css:48 sets static !important */
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#lpc .swal2-popup {
  position: relative !important; /* dist/builder.css:21 sets fixed + top:14px */
  top: auto !important;
  left: auto !important;
  width: 100% !important;        /* vendor width:23em */
  max-width: 384px !important;
  padding: 16px;
  border-radius: var(--lpc-r-xl);
  background: var(--lpc-card);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.1) !important; /* ring, no shadow */
  font-family: var(--lpc-font);
}
#lpc .swal2-header { padding: 0; align-items: flex-start; }
#lpc .swal2-title {
  margin: 0;
  padding: 0;
  color: var(--lpc-fg);
  font: 500 16px/1.4 var(--lpc-font);
  text-align: left;
}
#lpc .swal2-content {
  margin: 8px 0 0;
  padding: 0;
  color: var(--lpc-muted-fg);
  font: 400 14px/1.5 var(--lpc-font);
  text-align: left;
}
/* Right-aligned actions with no muted footer strip. Our DialogFooter draws one,
   but .swal2-actions is not a footer element and forcing one needs negative
   margins fighting the popup's own padding — not worth the fragility. */
#lpc .swal2-actions {
  margin: 16px 0 0;
  padding: 0;
  justify-content: flex-end;
  gap: 8px;
}
#lpc .swal2-styled {
  margin: 0;
  padding: 0 14px;
  border-radius: var(--lpc-r-lg);
  font: 500 14px/1 var(--lpc-font);
  box-shadow: none;
}
/* v8 writes confirmButtonColor as an inline style when set, so the fill needs
   !important even though nothing else on the button does. */
#lpc .swal2-styled.swal2-confirm {
  background-color: var(--lpc-primary) !important;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), transparent) !important;
  border-color: #0060c8 !important;
}
#lpc .swal2-styled.swal2-cancel {
  height: 32px;
  background-color: var(--lpc-card) !important;
  background-image: none !important;
  border: 1px solid var(--lpc-border) !important;
  color: var(--lpc-fg);
}
#lpc .swal2-styled.swal2-cancel:hover {
  background-color: var(--lpc-muted) !important;
}
#lpc .swal2-input {
  margin: 0;               /* vendor margin:1em auto — spacing comes from .lpc-field */
  width: 100%;
  box-sizing: border-box;
}
#lpc .swal2-validation-message {
  margin: 12px 0 0;
  padding: 0;
  background: transparent;
  color: var(--lpc-destructive);
  font: 400 12px/1.4 var(--lpc-font);
  justify-content: flex-start;
}
#lpc .swal2-validation-message:before { display: none; } /* grey "!" bubble */
#lpc .swal2-icon { width: 48px; height: 48px; margin: 0 auto 12px; }
#lpc .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--lpc-success); }
#lpc .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--lpc-success); }
#lpc .swal2-icon.swal2-error { border-color: var(--lpc-destructive); }
#lpc .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--lpc-destructive); }
#lpc .swal2-close {
  width: 28px;
  height: 28px;
  border-radius: var(--lpc-r-lg);
  color: var(--lpc-muted-fg);
}
#lpc .swal2-close:hover { background: var(--lpc-muted); color: var(--lpc-fg); }
#lpc .swal2-loading .swal2-styled.swal2-confirm { border-color: #0060c8 !important; }

/* Labelled fields inside the template name/subject dialog — the app's
   <Field> → <FormLabel> → input hierarchy. The vendor markup was two bare
   inputs with placeholders only, which a screen reader announces as nothing. */
#lpc .lpc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-top: 16px;
}
#lpc .lpc-field:first-of-type { margin-top: 4px; }
#lpc .lpc-label {
  font: 500 14px/1 var(--lpc-font);
  color: var(--lpc-fg);
}
#lpc .lpc-hint {
  font: 400 12px/1.4 var(--lpc-font);
  color: var(--lpc-muted-fg);
}

/* ---------------------------------------------------------------------------
   Height — fill the iframe with no dead space
   Inside an iframe, 100vh IS the iframe height, so 100vh is not the bug here:
   the constants are. Each one was tuned for a 30px footer that design.html
   hides, so each loses 30px. They are NOT switched to 100% — the ancestor
   chain is not uniformly height-resolved and several would collapse to zero.
   --------------------------------------------------------------------------- */

/* Canvas column. Vendor: calc(100vh - 85px) = 55 top bar + 30 footer. */
#lpc .content-container { height: calc(100vh - 55px); }

/* Right panel inner scroll areas. Vendor values: 152, 155, 141, 132, 41. */
#lpc .content-right .tab-content { height: calc(100vh - 125px); }
#lpc .content-right .tab-pane .container { height: calc(100vh - 11px); }
#lpc .content-right .tab-pane .container.widgets-sections { height: calc(100vh - 111px); }
#lpc .side-panel-container .content-right .tab-pane .container.widgets-sections { height: calc(100vh - 102px); }

/* ---------------------------------------------------------------------------
   ICONS
   ---------------------------------------------------------------------------
   The chrome's icons came from two webfonts, and both are fragile here:

   - FontAwesome. dist/builder.css carries its glyphs as literal U+F0xx
     characters rather than \f0xx escapes, and declares no @charset — so the
     whole icon set is one encoding guess away from rendering as mojibake. The
     charset fixes in design.html and web.config close that, but the class of
     bug stays open for as long as the icons are characters.
   - Material Icons. builder.js appends a fonts.googleapis.com <link> at
     runtime, so every menu-bar icon depends on the server reaching Google. On a
     locked-down IIS host it will not, and a ligature degrades to the literal
     word "expand_more", not to nothing.

   The chrome's icons are therefore drawn here as masked SVG: the element
   becomes a coloured box clipped to the shape. Colour comes from
   background-color — which is also how the device-toggle bug below fixes
   itself, since the vendor writes an inline `color` and a mask never reads it.

   Chrome only. The widget panel keeps FontAwesome; there are several hundred
   icons in there and no reason to hand-port them.
   --------------------------------------------------------------------------- */

#lpc .top .material-icons,
#lpc .top .material-icons-outlined,
#lpc .top .top-right .btn-close i,
#lpc .box-popup-right .icon,
#lpc .content-right .icon-align {
  font-size: 0 !important;   /* the ligature word / FA character itself */
  line-height: 0;
  display: inline-block;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
/* FontAwesome's :before is what carried the glyph. */
#lpc .top .top-right .btn-close i:before,
#lpc .content-right .icon-align:before {
  content: none !important;  /* .fa-times:before { content: "\f00d" } */
}

/* Menu-bar carets */
#lpc .top .top-left .action-menu > span.material-icons {
  width: 16px;
  height: 16px;
  background-color: var(--lpc-muted-fg);
  -webkit-mask-size: 16px;
          mask-size: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Device toggles — mobile / tablet / desktop, top right

   The vendor marks the selection by writing an inline color:#fff onto the
   chosen icon (the `li.device` click handler in builder.js). Legible on its
   black bar; on ours the selected device simply disappeared. Masking makes
   `color` irrelevant, and design.html adds .lpc-device-active so there is still
   something to see.
   --------------------------------------------------------------------------- */
#lpc .top .top-right .mode-device {
  display: flex;
  align-items: center;
  gap: 2px;
}
#lpc .top .top-right .mode-device li.device {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--lpc-r-lg);
  list-style: none;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
#lpc .top .top-right .mode-device li.device:hover {
  background: var(--lpc-muted);
}
#lpc .top .top-right .mode-device li.device .icon-mode {
  width: 18px;
  height: 18px;
  background-color: var(--lpc-muted-fg);
  -webkit-mask-size: 18px;
          mask-size: 18px;
}
#lpc .top .top-right .mode-device li.device.lpc-device-active {
  background: rgba(24, 119, 242, 0.12);
}
#lpc .top .top-right .mode-device li.device.lpc-device-active .icon-mode {
  background-color: var(--lpc-primary);
}
#lpc .top .top-right .mode-mobile .icon-mode {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
#lpc .top .top-right .mode-tablet .icon-mode {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='20' x='3' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='20' x='3' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
#lpc .top .top-right .mode-desktop .icon-mode {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Close buttons

   Three of them, each previously an oversized glyph or a literal "&times;":
   the editor's, the vendor modal's, and SweetAlert's (styled further up). All
   become the same 32px ghost icon button — the app's variant="ghost"
   size="icon". None of them is a primary action, so none of them is filled.
   --------------------------------------------------------------------------- */
#lpc .top .top-right .btn.btn-primary.btn-close.menu-bar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--lpc-r-lg);
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--lpc-muted-fg);
}
#lpc .top .top-right .btn.btn-primary.btn-close.menu-bar-action:hover {
  background: var(--lpc-muted);
  color: var(--lpc-fg);
  filter: none;
}
#lpc .top .top-right .btn-close i {
  width: 18px;
  height: 18px;
  -webkit-mask-size: 18px;
          mask-size: 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

/* The vendor modal's close is the literal text "&times;", so it is hidden with
   font-size and redrawn on the button itself rather than on a child. */
#lpc #builderModal .modal-header .close {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--lpc-r-lg);
  background: transparent;
  font-size: 0;
  opacity: 1;
  color: var(--lpc-muted-fg);
}
#lpc #builderModal .modal-header .close:hover {
  background: var(--lpc-muted);
  color: var(--lpc-fg);
  opacity: 1;
}
#lpc #builderModal .modal-header .close:after {
  content: "";
  position: absolute;
  inset: 7px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------------------------------------------------------------------------
   "Choose your template" — Design > New From Template

   The same grid of cards as the app's picker, so the two steps read as one
   product. Thumbnails are the wireframes lpcThumb() draws in design.html, from
   the same column-weight spec the picker uses.
   --------------------------------------------------------------------------- */
#lpc #builderModal .modal-header .modal-title {
  font: 600 18px/1.4 var(--lpc-font);
  color: var(--lpc-fg);
}
#lpc #builderModal .modal-body.PopUpContent {
  padding: 20px;
  background: var(--lpc-bg);
}
#lpc #builderModal ul.list-new-template,
#lpc #builderModal .templates-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#lpc #builderModal li.c-templateSelection_item {
  width: auto;
  margin: 0;
  padding: 0 !important;   /* vendor ships pb-4 on the <li> */
  float: none;
  list-style: none;
}
#lpc #builderModal .c-choiceCard_innerContainer {
  overflow: hidden;
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-xl);
  background: var(--lpc-card);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#lpc #builderModal .c-choiceCard_innerContainer:hover {
  border-color: rgba(24, 119, 242, 0.4);
  box-shadow: var(--lpc-shadow-sm);
}
#lpc #builderModal a.newTemplate {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 !important;       /* vendor margin-bottom--lv1 */
  border: 0 !important;       /* vendor border-gray */
  border-radius: 0 !important;
  background-color: var(--lpc-muted);
  /* All three are inline attributes on the anchor the vendor builds. Its 151px
     cropped the wireframe on a card this size; contain shows the whole thing. */
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#lpc #builderModal .c-choiceCard_innerContainer > p {
  margin: 0 !important;
  padding: 10px 12px;
  border-top: 1px solid var(--lpc-border);
  font: 500 14px/1.3 var(--lpc-font) !important;  /* vendor font-weight--bold */
  color: var(--lpc-fg);
  text-align: left !important;                    /* vendor text-align--center */
}

/* ---------------------------------------------------------------------------
   The apps rail — the "<" handle at the bottom right, and what it opens

   The handle is .box-popup-right, the panel .right-box. Unstyled, the
   background picker ran off the bottom of the viewport as a single column of
   full-width photographs.
   --------------------------------------------------------------------------- */
#lpc .box-popup-right {
  width: 28px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0;
  border-radius: var(--lpc-r-lg) 0 0 var(--lpc-r-lg);
}
#lpc .box-popup-right .icon {
  width: 16px;
  height: 16px;
  background-color: var(--lpc-muted-fg);
  -webkit-mask-size: 16px;
          mask-size: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.15s ease;
}
/* Open: the vendor swaps the ligature text, which a mask cannot see. Rotate. */
#lpc .box-popup-right.distance-right .icon {
  transform: rotate(180deg);
}

#lpc .right-popup .right-box {
  background: var(--lpc-card);
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-xl) 0 0 var(--lpc-r-xl);
  box-shadow: var(--lpc-shadow-pop);
  font-family: var(--lpc-font);
}
#lpc .right-box ul.box-mode {
  margin: 0;
  padding: 6px;
  list-style: none;
}
#lpc .right-box li.box-device,
#lpc .right-box li.change-background {
  border: 0;
  border-radius: var(--lpc-r-lg);
  background: transparent;
  color: var(--lpc-muted-fg);
}
#lpc .right-box li.box-device .group,
#lpc .right-box li.change-background .group {
  padding: 8px 4px;
  font: 400 11px/1.3 var(--lpc-font);
  color: inherit;
}
#lpc .right-box li.box-device:hover,
#lpc .right-box li.change-background:hover,
#lpc .right-box li.box-device.background-active {
  background: var(--lpc-muted);
  color: var(--lpc-fg);
}
/* Selected device. The vendor paints this near-black, which on a white rail is
   louder than the primary button in the top bar. */
#lpc .right-box li.box-device.active {
  background: rgba(24, 119, 242, 0.12);
  color: var(--lpc-primary);
}
#lpc .right-box li .group .icon {
  color: inherit;
}

/* The flyouts: device sizes, and the background picker. */
#lpc .right-box ul.group-device,
#lpc .right-box ul.group-background {
  margin: 0;
  padding: 6px;
  background: var(--lpc-card);
  border: 1px solid var(--lpc-border);
  border-radius: var(--lpc-r-xl);
  box-shadow: var(--lpc-shadow-pop);
  list-style: none;
}
#lpc .right-box ul.group-device li.device-screen {
  padding: 7px 12px;
  border: 0;
  border-radius: var(--lpc-r-lg);
  font: 400 13px/1.2 var(--lpc-font);
  color: var(--lpc-fg);
  white-space: nowrap;
}
#lpc .right-box ul.group-device li.device-screen:hover {
  background: var(--lpc-muted);
}
/* One full-width column of photographs ran off the bottom of the screen.
   Three across, capped, scrolling inside itself. */
#lpc .right-box ul.group-background {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
#lpc .right-box ul.group-background li {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  list-style: none;
}
#lpc .right-box ul.group-background img.bg-image {
  display: block;
  width: 56px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--lpc-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
#lpc .right-box ul.group-background img.bg-image:hover {
  border-color: var(--lpc-primary);
}

/* ---------------------------------------------------------------------------
   Alignment controls in the settings panel

   FontAwesome again, and the row where the mojibake showed most. Each one has
   its own class, so they can be masked individually.
   --------------------------------------------------------------------------- */
#lpc .content-right .thongso ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#lpc .content-right .thongso ul li {
  list-style: none;
}
#lpc .content-right .icon-align {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background-color: var(--lpc-muted-fg);
  -webkit-mask-size: 16px;
          mask-size: 16px;
  cursor: pointer;
}
#lpc .content-right .icon-align:hover {
  background-color: var(--lpc-fg);
}
#lpc .content-right .icon-align.active {
  background-color: var(--lpc-primary);
}
#lpc .content-right .icon-left-img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M17 18H3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M17 18H3'/%3E%3C/svg%3E");
}
#lpc .content-right .icon-center-img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M17 12H7'/%3E%3Cpath d='M19 18H5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M17 12H7'/%3E%3Cpath d='M19 18H5'/%3E%3C/svg%3E");
}
#lpc .content-right .icon-right-img {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M21 18H7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 6H3'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M21 18H7'/%3E%3C/svg%3E");
}
