/* LuckyStudio Simple Editor: scoped UI only, protected template renderers unchanged. */
#lwstudio-dialog.lse-simple,
#editor.lse-simple {
  --lse-accent: #80dfb1;
  --lse-ink: #f1fff6;
  --lse-muted: #b5cbbf;
  --lse-edge: rgba(154, 236, 188, .19);
  --lse-surface: #0b1a17;
}
#lwstudio-dialog.lse-simple {
  width: min(97vw, 1510px) !important;
  max-width: none !important;
  max-height: 96dvh;
}
#lwstudio-dialog.lse-simple .lwstudio-main,
#editor.lse-simple .editor-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 342px) minmax(0, 1fr) !important;
  gap: 15px !important;
  align-items: stretch !important;
  min-width: 0;
}
#lwstudio-dialog.lse-simple .lwstudio-controls,
#editor.lse-simple .editor-panel,
.lse-advanced .lse-panel,
.lse-panel[hidden] {
  display: none !important;
}
#lwstudio-dialog.lse-simple .lwstudio-preview-side,
#editor.lse-simple .preview-panel {
  min-width: 0;
  width: 100%;
  max-width: none;
}
#lwstudio-dialog.lse-simple .lwstudio-preview-area,
#editor.lse-simple .preview-stage {
  min-height: min(65dvh, 740px);
}
#lwstudio-dialog .lse-mode-switch,
#editor .lse-mode-switch {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(141, 230, 176, .24);
  border-radius: 100px;
  background: rgba(12, 31, 24, .82);
  gap: 3px;
  white-space: nowrap;
  flex: 0 0 auto;
}
#lwstudio-dialog .lse-mode-switch button,
#editor .lse-mode-switch button {
  color: #c7e5d4;
  border: 0;
  background: transparent;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.2;
  border-radius: 100px;
  cursor: pointer;
}
#lwstudio-dialog .lse-mode-switch button[aria-pressed="true"],
#editor .lse-mode-switch button[aria-pressed="true"] {
  color: #10271e;
  background: linear-gradient(150deg, #a8f5c6, #70c99a);
  box-shadow: 0 3px 18px rgba(117, 224, 156, .18);
}
#lwstudio-dialog .lse-mode-switch button:focus-visible,
#editor .lse-mode-switch button:focus-visible,
.lse-panel :focus-visible {
  outline: 2px solid #c8ffda !important;
  outline-offset: 3px;
}
#lwstudio-dialog.lse-simple .lwstudio-head {
  flex-wrap: wrap;
  gap: 12px;
}
#editor.lse-simple .studio-topbar {
  flex-wrap: wrap;
  gap: 12px;
}
.lse-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: min(77dvh, 890px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  background:
    radial-gradient(circle at 92% 0, rgba(99, 169, 123, .11), transparent 32%),
    linear-gradient(160deg, #10261e, #081513 70%);
  color: var(--lse-ink, #f1fff6);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  padding: 17px;
  font-size: 14px;
}
.lse-intro {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.lse-intro img {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.lse-intro strong {
  display: block;
  font-size: 17px;
  color: #f5fff8;
  letter-spacing: -.025em;
}
.lse-intro small {
  display: block;
  color: var(--lse-muted, #b5cbbf);
  font-size: 12px;
  line-height: 1.45;
}
.lse-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: rgba(5, 18, 13, .74);
  border: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  border-radius: 13px;
  margin-bottom: 17px;
}
.lse-tabs button {
  min-width: 0;
  color: #c5dfd1;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  padding: 11px 3px;
  white-space: nowrap;
}
.lse-tabs button[aria-selected="true"] {
  color: #0b2418;
  background: #adf2c8;
}
.lse-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lse-body h3 {
  margin: 0;
  color: #f3fff8;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.24;
}
.lse-body h4 {
  font-size: 14px;
  margin: 3px 0;
  color: #e3f8eb;
}
.lse-body .lse-hint {
  margin: -2px 0 7px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--lse-muted, #b5cbbf);
}
.lse-panel .lse-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  color: #d7efe2;
  font-size: 12px;
  font-weight: 680;
}
.lse-field > span { display: block; }
.lse-panel :is(input, textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 41px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(183, 232, 200, .26);
  background: #091a16;
  color: #f3fff6;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  accent-color: #8cddb0;
}
.lse-panel input[type="color"] { padding: 4px; min-height: 48px; cursor: pointer; }
.lse-panel textarea { resize: vertical; min-height: 72px; }
.lse-panel :is(input, textarea, select):focus-visible {
  border-color: #abedc7;
}
.lse-panel button.lse-action,
.lse-panel button.lse-soft {
  width: 100%;
  min-height: 42px;
  border-radius: 11px;
  padding: 10px 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 740;
}
.lse-panel button.lse-action {
  border: 1px solid #99e1b3;
  background: linear-gradient(150deg, #9fe5bd, #70c69b);
  color: #0c271a;
}
.lse-panel button.lse-soft {
  border: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  color: #dbf4e5;
  background: rgba(145, 236, 178, .08);
}
.lse-panel button:hover { filter: brightness(1.09); }
.lse-panel button:disabled { opacity: .48; cursor: not-allowed; }
.lse-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 1px;
}
.lse-palette .lse-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(164, 215, 181, .07);
  color: #e2f4e8;
  border: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  border-radius: 11px;
  cursor: pointer;
  padding: 9px;
  min-height: 46px;
  font-size: 11px;
  text-align: left;
}
.lse-palette-item i {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  flex: 0 0 22px;
}
.lse-section-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}
.lse-section-add button { padding: 7px 11px; }
.lse-products { display: flex; flex-direction: column; gap: 9px; }
.lse-product {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: rgba(159,222,185,.06);
  border: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  border-radius: 13px;
  padding: 12px;
}
.lse-product > strong { color: #eafff0; font-size: 14px; }
.lse-new-product {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  padding-top: 16px;
}
.lse-roxy {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px;
  border: 1px solid rgba(153,232,181,.26);
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(74,133,99,.17), rgba(19,49,35,.18));
}
.lse-roxy .lse-hint { margin: 0; }
.lse-roxy-proposal:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  padding-top: 10px;
  overflow-wrap: anywhere;
}
.lse-roxy-proposal p { margin: 0; font-size: 12px; line-height: 1.5; }
.lse-footer {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 15px;
  border-top: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  padding-top: 13px;
}
.lse-undo {
  align-self: flex-start;
  background: transparent;
  color: #d6f6e3;
  border: 1px solid var(--lse-edge, rgba(154,236,188,.19));
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}
.lse-status { color: #b5cbbf; font-size: 11px; line-height: 1.5; }
#lwstudio-dialog.lse-simple [data-lse-editable],
#editor.lse-simple [data-lse-editable] {
  cursor: text;
  border-radius: 4px;
  outline: 1px dashed transparent;
  outline-offset: 5px;
  transition: outline-color .15s ease;
}
#lwstudio-dialog.lse-simple [data-lse-editable]:hover,
#editor.lse-simple [data-lse-editable]:hover,
#lwstudio-dialog.lse-simple .lse-editing,
#editor.lse-simple .lse-editing {
  outline: 2px dashed #86e3ad !important;
  outline-offset: 5px;
}
#lwstudio-dialog.lse-simple .lse-editing,
#editor.lse-simple .lse-editing { cursor: text; }
@media (max-width: 880px) {
  #lwstudio-dialog.lse-simple .lwstudio-main,
  #editor.lse-simple .editor-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #lwstudio-dialog.lse-simple .lwstudio-head,
  #editor.lse-simple .studio-topbar { gap: 9px; }
  #lwstudio-dialog.lse-simple .lwstudio-preview-side,
  #editor.lse-simple .preview-panel { order: 2; min-height: 40dvh; }
  #lwstudio-dialog.lse-simple .lse-panel,
  #editor.lse-simple .lse-panel { order: 1; max-height: min(47dvh, 475px); }
  #lwstudio-dialog.lse-simple .lwstudio-preview-area,
  #editor.lse-simple .preview-stage { min-height: 42dvh; }
}
@media (max-width: 380px) {
  .lse-panel { padding: 12px; border-radius: 14px; }
  .lse-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lwstudio-dialog .lse-mode-switch button,
  #editor .lse-mode-switch button { font-size: 11px; padding: 8px; }
  .lse-section-add { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #lwstudio-dialog.lse-simple [data-lse-editable],
  #editor.lse-simple [data-lse-editable] { transition: none; }
}

/* Shop's existing tile cockpit uses stronger layout rules. In simple mode
   use a real two-column editor; retain native tile layout when advanced. */
#editor.shop-tile-ui.lse-simple .studio-shop-cockpit > .editor-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, 342px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 15px !important;
  min-height: 0 !important;
  isolation: auto !important;
}
#editor.shop-tile-ui.lse-simple .editor-layout > .editor-panel {
  display: none !important;
}
#editor.shop-tile-ui.lse-simple .editor-layout > .preview-panel {
  display: block !important;
  min-height: min(65dvh, 740px) !important;
  border-radius: 14px !important;
}
#editor.shop-tile-ui.lse-simple .shop-tiles-toolbar .shop-tool,
#editor.shop-tile-ui.lse-simple .shop-tiles-toolbar .shop-tour-trigger {
  display: none !important;
}
#editor.shop-tile-ui.lse-simple .shop-tiles-toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: visible;
}
#editor.shop-tile-ui.lse-simple .shop-tiles-toolbar .lse-mode-switch { margin-right: auto; }
@media (max-width: 880px) {
  #editor.shop-tile-ui.lse-simple .studio-shop-cockpit > .editor-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  #editor.shop-tile-ui.lse-simple .editor-layout > .preview-panel { min-height: 42dvh !important; }
}

/* Override the legacy Web tile cockpit ONLY in the simple experience. */
#lwstudio-dialog.lse-simple .studio-tile-toolbar,
#lwstudio-dialog.lse-simple .studio-tile-sheet,
#lwstudio-dialog.lse-simple .studio-cockpit-sidebar,
#lwstudio-dialog.lse-simple .studio-cockpit-rail {
  display: none !important;
}
#lwstudio-dialog.lse-simple.studio-tile-ready .studio-tile-stage > .lwstudio-main {
  display: grid !important;
  grid-template-columns: minmax(280px, 342px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 15px !important;
  flex-direction: unset !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px !important;
}
#lwstudio-dialog.lse-simple.studio-tile-ready .studio-tile-stage .lwstudio-preview-side {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
#lwstudio-dialog.lse-simple.studio-tile-ready .studio-tile-stage .lse-panel {
  width: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
}
@media (max-width: 880px) {
  #lwstudio-dialog.lse-simple.studio-tile-ready .studio-tile-stage > .lwstudio-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-y: auto !important;
    padding: 8px !important;
  }
  #lwstudio-dialog.lse-simple.studio-tile-ready .studio-tile-stage .lse-panel {
    flex: 0 0 auto !important;
    max-height: 46dvh !important;
  }
  #lwstudio-dialog.lse-simple.studio-tile-ready .studio-tile-stage .lwstudio-preview-side {
    flex: 0 0 auto !important;
    min-height: 44dvh !important;
  }
}

/* Canvas/template tools belong to advanced mode, not the beginner flow. */
#lwstudio-dialog.lse-simple .fc-mode-bar { display: none !important; }
#lwstudio-dialog.lse-simple .fc-root { display: none !important; }
#editor.shop-tile-ui.lse-simple .shop-tiles-toolbar .shop-preview-trigger { margin-left: auto; }

/* V5 Shop tile cockpit has additional old specificity. Keep its DOM/state
   for advanced mode but never show two customer sidebars in simple mode. */
#editor.shop-tile-ui.lse-simple .shop-tiles-toolbar > .shop-tool,
#editor.shop-tile-ui.lse-simple .shop-tiles-toolbar > .shop-tour-trigger {
 display: none !important;
}
#editor.shop-tile-ui.lse-simple .studio-shop-cockpit {
 display: block !important;
 width: 100% !important;
 height: 100% !important;
 min-height: 0 !important;
 overflow: hidden !important;
}
#editor.shop-tile-ui.lse-simple .studio-shop-cockpit .editor-layout {
 display: grid !important;
 grid-template-columns: minmax(280px,342px) minmax(0,1fr) !important;
 grid-template-rows: minmax(0,1fr) !important;
 gap: 12px !important;
 min-height: 0 !important;
 height: 100% !important;
 width: 100% !important;
 position: static !important;
 overflow: hidden !important;
 padding: 10px !important;
}
#editor.shop-tile-ui.lse-simple.shop-sheet-open .editor-layout > .editor-panel,
#editor.shop-tile-ui.lse-simple .studio-shop-cockpit .editor-layout > .editor-panel {
 display: none !important;
 visibility: hidden !important;
}
#editor.shop-tile-ui.lse-simple .studio-shop-cockpit .editor-layout > .preview-panel {
 display: flex !important;
 flex-direction: column !important;
 grid-column: 2 !important;
 grid-row: 1 !important;
 position: static !important;
 width: 100% !important;
 min-width: 0 !important;
 max-width: none !important;
 min-height: 0 !important;
 height: 100% !important;
 border-radius: 13px !important;
 overflow: auto !important;
}
#editor.shop-tile-ui.lse-simple .studio-shop-cockpit .editor-layout > .lse-panel {
 display: flex !important;
 flex-direction: column !important;
 grid-column: 1 !important;
 grid-row: 1 !important;
 position: relative !important;
 width: 100% !important;
 min-width: 0 !important;
 max-width: none !important;
 min-height: 0 !important;
 max-height: 100% !important;
 overflow-y: auto !important;
}
#editor.shop-tile-ui.lse-simple .lse-panel .lse-field {
 display: flex !important;
 flex-direction: column !important;
 gap: 7px !important;
 width: 100% !important;
 margin: 0 !important;
}
#editor.shop-tile-ui.lse-simple .lse-panel :is(input,textarea,select) {
 display: block !important;
 width: 100% !important;
 min-width: 0 !important;
 box-sizing: border-box !important;
 color: #f0fff5 !important;
 background: #091a16 !important;
 border: 1px solid rgba(183,232,200,.26) !important;
 border-radius: 10px !important;
 padding: 10px 12px !important;
 font: 500 13px/1.5 Inter,system-ui,sans-serif !important;
}
#editor.shop-tile-ui.lse-simple .lse-panel .lse-tabs {
 display: grid !important;
 grid-template-columns: repeat(4,minmax(0,1fr)) !important;
 gap: 4px !important;
 padding: 4px !important;
}
#editor.shop-tile-ui.lse-simple .lse-panel .lse-tabs > button {
 display: block !important;
 min-height: 42px !important;
 min-width: 0 !important;
 border: 0 !important;
 background: transparent !important;
 color: #d0ecdb !important;
 padding: 8px 3px !important;
 border-radius: 9px !important;
 font: 750 11px Inter,system-ui,sans-serif !important;
}
#editor.shop-tile-ui.lse-simple .lse-panel .lse-tabs > button[aria-selected="true"] {
 background: #adf2c8 !important;
 color: #10271c !important;
}
#editor.shop-tile-ui.lse-simple .lse-panel .lse-body {
 display: flex !important;
 flex-direction: column !important;
 gap: 13px !important;
}
#editor.shop-tile-ui.lse-simple .lse-panel .lse-mode-switch {
 display: inline-flex !important;
}
@media(max-width:880px){
 #editor.shop-tile-ui.lse-simple .studio-shop-cockpit .editor-layout {
   display: flex !important;
   flex-direction: column !important;
   align-items: stretch !important;
   overflow-y: auto !important;
   padding: 8px !important;
 }
 #editor.shop-tile-ui.lse-simple .studio-shop-cockpit .editor-layout > .lse-panel {
   order: 1 !important;
   max-height: 48dvh !important;
   flex: 0 0 auto !important;
 }
 #editor.shop-tile-ui.lse-simple .studio-shop-cockpit .editor-layout > .preview-panel {
   order: 2 !important;
   min-height: 46dvh !important;
   flex: 0 0 auto !important;
 }
}
@media(max-width:380px){
 #editor.shop-tile-ui.lse-simple .lse-panel .lse-tabs {
   grid-template-columns: repeat(2,minmax(0,1fr)) !important;
 }
}

/* Final V5 Shop layout: legacy cockpit wrappers vary between deployments. */
#editor.shop-tile-ui.lse-simple .editor-layout {
  display: grid !important;
  grid-template-columns: minmax(275px,342px) minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px !important;
}
#editor.shop-tile-ui.lse-simple .editor-layout > .lse-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-height: 100% !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#editor.shop-tile-ui.lse-simple .editor-layout > .preview-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
}
@media(max-width:880px){
  #editor.shop-tile-ui.lse-simple .editor-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    height: 100% !important;
  }
  #editor.shop-tile-ui.lse-simple .editor-layout > .lse-panel {
    flex: 0 0 auto !important;
    order: 1 !important;
    max-height: 48dvh !important;
  }
  #editor.shop-tile-ui.lse-simple .editor-layout > .preview-panel {
    flex: 0 0 auto !important;
    order: 2 !important;
    min-height: 42dvh !important;
  }
}

/* Explicitly outscore the embedded-shop large-screen flex cockpit. */
html.studio-embedded-shop #editor.shop-tile-ui.shop-sheet-open.lse-simple .studio-shop-cockpit > .editor-layout,
html.studio-embedded-shop #editor.shop-tile-ui.lse-simple .studio-shop-cockpit > .editor-layout {
  display: grid !important;
  grid-template-columns: minmax(270px,342px) minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  gap: 14px !important;
  overflow: hidden !important;
}
@media (max-width:880px) {
  html.studio-embedded-shop #editor.shop-tile-ui.shop-sheet-open.lse-simple .studio-shop-cockpit > .editor-layout,
  html.studio-embedded-shop #editor.shop-tile-ui.lse-simple .studio-shop-cockpit > .editor-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
  }
}

/* Current V5 logo support, using the same IndexedDB media store as the wizard. */
.lse-logo-controls {margin-top: 8px;}
.lse-logo-controls .lse-logo-preview {
  display: block;
  width: auto;
  max-width: min(100%,180px);
  height: auto;
  max-height: 95px;
  object-fit: contain;
  margin: 7px auto 0;
  border-radius: 8px;
}

/* Direct text editing preserves the authored template; only the active text is outlined. */
#lwstudio-dialog.lse-simple.lse-preview-only .lse-panel,
#editor.lse-simple.lse-preview-only .lse-panel,
#editor.shop-tile-ui.lse-simple.lse-preview-only .studio-shop-cockpit .editor-layout > .lse-panel { display: none !important; }
#lwstudio-dialog.lse-simple.lse-preview-only .lwstudio-main,
#editor.lse-simple.lse-preview-only .editor-layout,
#editor.shop-tile-ui.lse-simple.lse-preview-only .studio-shop-cockpit > .editor-layout,
html.studio-embedded-shop #editor.shop-tile-ui.lse-simple.lse-preview-only .studio-shop-cockpit > .editor-layout,
html.studio-embedded-shop #editor.shop-tile-ui.shop-sheet-open.lse-simple.lse-preview-only .studio-shop-cockpit > .editor-layout { grid-template-columns: minmax(0, 1fr) !important; }
#lwstudio-dialog.lse-simple.lse-preview-only .lwstudio-preview-side,
#editor.shop-tile-ui.lse-simple.lse-preview-only .editor-layout > .preview-panel { grid-column: 1 / -1 !important; }
#lwstudio-dialog.lse-simple.lse-preview-only [data-lse-editable],
#editor.lse-simple.lse-preview-only [data-lse-editable] { outline: none !important; cursor: inherit; }
.lse-inline-dialog {
  position: fixed; z-index: 2147483000; box-sizing: border-box;
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 20px; border: 1px solid #507562; border-radius: 16px;
  background: #10251d; color: #f4fff7;
  box-shadow: 0 16px 60px #0006;
  font-family: Manrope, system-ui, sans-serif; text-align: left;
}
.lse-inline-dialog .lse-inline-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.lse-inline-dialog h3 { margin: 0; color: #f4fff7; font: 750 17px/1.35 Manrope, system-ui, sans-serif; letter-spacing: -.02em; }
.lse-inline-dialog :is(input,textarea) {
  display: block; box-sizing: border-box; width: 100%; min-height: 48px;
  padding: 12px 13px; border: 1px solid #6b8c77; border-radius: 8px;
  background: #f6faf7; color: #14251c; font: 500 16px/1.5 Manrope, system-ui, sans-serif;
  resize: vertical; letter-spacing: normal; text-transform: none;
}
.lse-inline-dialog button { min-height: 44px; border: 1px solid #547461; border-radius: 8px; padding: 10px 14px; cursor: pointer; font: 700 13px/1.3 Manrope,system-ui,sans-serif; }
.lse-inline-dialog .lse-inline-close { color: #f4fff7; background: transparent; padding: 4px; min-width: 44px; font-size: 24px; border-color: transparent; }
.lse-inline-dialog .lse-inline-hint { color: #c0d3c6; margin: 10px 0 0; font: 12px/1.5 Manrope,system-ui,sans-serif; }
.lse-inline-dialog .lse-inline-error { color: #ffd1c8; font: 13px/1.5 Manrope,system-ui,sans-serif; margin: 8px 0; }
.lse-inline-dialog .lse-inline-error:empty { display: none; }
.lse-inline-dialog .lse-inline-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.lse-inline-dialog .lse-inline-cancel { color: #edf8f0; background: transparent; }
.lse-inline-dialog .lse-inline-save { color: #10251d; background: #b5edc5; border-color: #b5edc5; }
.lse-inline-dialog :focus-visible { outline: 3px solid #82dfaa; outline-offset: 3px; }
@media (max-width: 600px) {
  .lse-inline-dialog { max-height: 65dvh; padding: 16px; }
  .lse-inline-dialog .lse-inline-actions button { flex: 1; }
}
@media (forced-colors: active) {
  .lse-inline-dialog { background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .lse-inline-dialog :is(h3,p,button,input,textarea) { forced-color-adjust: auto; }
}
/* Simple-editor controls: consistent surfaces, focus and touch-safe states. */
.lse-panel{--lse-ui-edge:#3a7156;--lse-ui-ring:#baffcf;--lse-ui-speed:160ms;box-shadow:inset 0 1px #d6ffe51a,0 20px 55px -28px #000c}
.lse-panel .lse-tabs{box-shadow:inset 0 1px #d2ffe00f,0 10px 22px -18px #000b}
.lse-panel :is(button,input,textarea,select){transition:border-color var(--lse-ui-speed) ease,box-shadow var(--lse-ui-speed) ease,background-color var(--lse-ui-speed) ease,transform var(--lse-ui-speed) ease}
.lse-panel :is(input,textarea,select){border-color:var(--lse-ui-edge);box-shadow:inset 0 1px 2px #0004}
.lse-panel :is(button,input,textarea,select):focus-visible{outline:3px solid var(--lse-ui-ring)!important;outline-offset:3px;border-color:var(--lse-ui-ring)!important}
.lse-panel :is(.lse-tabs button[aria-selected="true"],.lse-palette-item[aria-pressed="true"]){box-shadow:inset 0 1px #ffffff55,0 8px 18px -14px #8cffbca8}
.lse-panel button:disabled{opacity:.56;cursor:not-allowed;transform:none!important;filter:none!important}
.lse-panel button[aria-busy="true"]{cursor:progress}
.lse-panel button[aria-busy="true"]:after{content:"";display:inline-block;width:12px;height:12px;margin-inline-start:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:middle;animation:lse-ui-spin .8s linear infinite}
@keyframes lse-ui-spin{to{transform:rotate(1turn)}}
@media(hover:hover) and (pointer:fine){.lse-panel button:not(:disabled):hover{border-color:#9ce8b9;box-shadow:0 10px 22px -16px #a0ffbea0}}
.lse-panel button:not(:disabled):active{transform:translateY(1px)}
@media(hover:none),(pointer:coarse){.lse-panel button{min-height:44px}.lse-panel button:active{transform:none}}
@media(prefers-reduced-motion:reduce){.lse-panel :is(button,input,textarea,select){transition:none!important;transform:none!important}.lse-panel button[aria-busy="true"]:after{animation:none!important}}
.lse-panel .lse-palette-item[aria-pressed="true"]{border-color:#baffcf!important;background:rgba(158,244,190,.2)!important;color:#f3fff6!important;box-shadow:inset 0 0 0 1px #baffcf88,0 9px 22px -16px #baffcf}

/* Stale pre-V28 drafts are never silently rewritten. Explicit, reversible visual upgrade. */
.lse-panel .lse-legacy-upgrade{
 display:grid;gap:10px;margin:0 0 20px;padding:15px 16px;
 border:1px solid #aaf6af;border-radius:13px;
 background:linear-gradient(135deg,rgba(38,101,72,.2),rgba(18,62,41,.10));
 color:inherit;
}
.lse-panel .lse-legacy-upgrade strong{display:block;font-size:15px;line-height:1.4;}
.lse-panel .lse-legacy-upgrade p{margin:0;font-size:12px;line-height:1.6;}
.lse-panel .lse-legacy-upgrade button{
 width:100%;min-height:46px;box-sizing:border-box;padding:12px;
 border:1px solid #a5edb0;border-radius:10px;
 background:#27643e;color:#fff;font-weight:800;cursor:pointer;
}
.lse-panel .lse-legacy-upgrade button:focus-visible{outline:3px solid #b1ff81;outline-offset:2px;}

/* Inventory variants belong to the same V28 product data as the generated storefront. */
.lse-panel .lse-variants{
 margin:14px 0 0;padding:14px;border:1px solid #64977a;border-radius:12px;
 background:#102d20;color:#e9fff0;
}
.lse-panel .lse-variants>summary{font:750 14px/1.4 Manrope,system-ui,sans-serif;cursor:pointer;}
.lse-panel .lse-variants>.lse-hint{font:500 12px/1.5 Manrope,system-ui,sans-serif;margin:8px 0 12px;}
.lse-panel .lse-variant-row{
 display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.95fr);
 gap:10px;margin:12px 0;padding:12px;background:#163b2a;border-radius:8px;
}
.lse-panel .lse-variant-row .lse-field{min-width:0;margin:0;overflow-wrap:break-word;}
.lse-panel .lse-variant-row :is(input,select){
 box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;
 padding:8px;border:1px solid #69937a;border-radius:7px;
 font-size:14px;background:#f7fbf8;color:#11271c;
}
.lse-panel .lse-variant-row small{grid-column:1/-1;color:#bde3ca;}
.lse-panel .lse-variants>.lse-soft{min-height:44px;margin-top:8px;}
@media(max-width:640px){
 .lse-panel .lse-variant-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
 .lse-panel .lse-variant-row .lse-field:first-child{grid-column:1/-1;}
}


/* Explicit product visibility for the staged read-only shop catalogue. */
.lse-panel .lse-product-test-visibility{
  display:flex!important;align-items:center;gap:12px;
  padding:12px 14px;margin:14px 0;
  border:1px solid #658b73;border-radius:10px;
  background:#173c2a;color:#e7f9eb;
  font:700 12px/1.5 Manrope,system-ui,sans-serif;
  cursor:pointer;
}
.lse-panel .lse-product-test-visibility input[type="checkbox"]{
  flex:0 0 22px;width:22px!important;height:22px!important;min-width:22px;
  margin:0;accent-color:#a1f883;cursor:pointer;
}
.lse-panel .lse-product-test-visibility span{min-width:0;overflow-wrap:anywhere}