/* tokens carregados por shared/design-tokens.css — aqui apenas overrides locais */
:root{
  --topbar-clearance:0px;
}

*,
*::before,
*::after{box-sizing:border-box}

[hidden]{display:none!important}

html,body{height:100%;overflow:hidden}

body{
  margin:0;
  font-family:var(--ui-font);
  color:var(--text);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(var(--gold-rgb),.07) 0%,transparent 52%),
    radial-gradient(ellipse at 0% 40%,rgba(var(--accent-rgb),.03) 0%,transparent 38%),
    linear-gradient(160deg,var(--surface-1) 0%,var(--surface-0) 100%);
  display:flex;
  flex-direction:column;
}

button,
input,
textarea,
select{font:inherit}

button{
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
}

.lp-app{
  height:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0;
}

.lp-topbar{
  position:relative;
  z-index:50;
  display:block;
  flex:0 0 var(--topbar-offset);
  height:var(--topbar-offset);
  background:var(--surface-2);
  border-bottom:1px solid var(--border-mid);
}

.lp-topbar-shell{
  height:var(--topbar-offset);
  padding:0 14px 0 18px;
  display:flex;
  align-items:center;
  gap:0;
  overflow:visible;
  background:transparent;
  border:none;
  box-shadow:none;
}

.lp-brand-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:var(--brand-area-w);
  min-width:var(--brand-area-w);
  height:var(--topbar-offset);
  padding-right:18px;
  margin-right:14px;
  border-right:1px solid var(--border-mid);
  background:transparent;
  border-radius:0;
}

.lp-brand-logo-img{
  display:block;
  height:22px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

.lp-topbar-head{
  display:none;
}

.lp-brand-panel{
  position:relative;
  overflow:hidden;
  min-width:0;
}

.lp-brand-panel--compact{
  flex:1 1 320px;
  display:flex;
  align-items:center;
  padding:2px 0;
  min-height:auto;
}

.lp-brand-copy{
  position:relative;
  z-index:1;
  min-width:0;
}

.lp-brand-glow{
  position:absolute;
  inset:0 0 auto;
  height:120px;
  background:radial-gradient(circle at 50% 30%,rgba(var(--gold-rgb),.14),transparent 62%);
  pointer-events:none;
}

.lp-brand-panel h1{
  margin:0;
  font-family:var(--title-font);
  font-size:clamp(18px,1.3vw,24px);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--gold-2);
  white-space:nowrap;
}

.lp-brand-copy p{
  display:none;
}

.lp-top-menu-wrap{
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:0;
  width:100%;
}

.lp-top-menu-scroll{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 1px;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--gold-rgb),.36) transparent;
  flex:1;
  min-width:0;
}

.lp-top-menu-end{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  padding-left:10px;
  margin-left:8px;
  border-left:1px solid rgba(var(--gold-rgb),.25);
}

.lp-top-menu-scroll::-webkit-scrollbar{
  height:4px;
}

.lp-top-menu-scroll::-webkit-scrollbar-thumb{
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.6),rgba(var(--accent-rgb),.45));
}

.lp-top-menu-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-pill);
}

/* Tiles do menu do topo migrados para .tile (shared/ui-primitives.css).
   Separador legado mantido como elemento de layout local. */

.lp-top-menu-tools-sep{
  display:inline-block;
  width:1px;
  height:34px;
  background:rgba(var(--gold-rgb),.3);
  border-radius:1px;
  margin:0 4px;
  flex-shrink:0;
  align-self:center;
}

/* Garante que tiles dentro do scroll-container não encolham/quebrem. */
.lp-top-menu-scroll > .tile,
.lp-top-menu-end > .tile{
  flex:0 0 auto;
}

.lp-layout{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:stretch;
  overflow:hidden;
}

.lp-sidebar,
.lp-main,
.lp-workspace,
.lp-content-row{
  min-height:0;
}

.lp-panel,
.lp-toolbar,
.lp-sidebar-right,
.lp-card,
.lp-stage{
  border:1px solid var(--border-mid);
  background:
    linear-gradient(160deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.008) 100%),
    var(--panel);
  box-shadow:var(--shadow-md);
}

.lp-toolbar-shell{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--gold-rgb),.36) transparent;
}

.lp-toolbar-shell::-webkit-scrollbar{
  height:6px;
}

.lp-toolbar-shell::-webkit-scrollbar-thumb{
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.6),rgba(var(--accent-rgb),.45));
}

.lp-toolbar-shell::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-pill);
}

/* ═══════════════════════════════════════════════════════════════
   ART SETTINGS TOOLBAR (rebuilt v1.0)
   Barra contextual acima do canvas: Histórico · Face · Quantidade.
   Tudo alinhado, dividers consistentes, controles de 32px.
   ═══════════════════════════════════════════════════════════════ */

.lp-toolbar--art-settings{
  width:max-content;
  min-width:100%;
  display:flex;
  align-items:center;
  gap:0;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
}

/* Grupos: cada grupo é um "compartimento" da barra, separado por divider à direita.
   Especificidade reforçada (.lp-toolbar-group.art-tg) para vencer a regra global
   .lp-toolbar-group:not(:last-child) que vive mais adiante no arquivo. */
.lp-toolbar--art-settings .lp-toolbar-group.art-tg{
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:48px;
  padding:0 18px;
  flex:0 0 auto;
  border:none;
  border-right:1px solid var(--border-mid);
  border-radius:0;
  background:none;
  box-shadow:none;
  margin:0;
}

/* O primeiro grupo (histórico) não tem padding à esquerda. */
.lp-toolbar--art-settings .lp-toolbar-group.art-tg:first-child{
  padding-left:0;
}

/* O último grupo "real" (cards) não tem divider à direita.
   Cards é sempre o último visível na barra atual. */
.lp-toolbar--art-settings .lp-toolbar-group.art-tg#toolbarCardsGroup{
  border-right:none;
  padding-right:0;
}

/* Label inline do grupo: pequeno, uppercase, dourado discreto. */
.art-tg__label{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--gold-2);
  white-space:nowrap;
}

.art-tg__sublabel{
  font-size:var(--text-xs);
  font-weight:600;
  letter-spacing:0;
  color:var(--muted);
  white-space:nowrap;
}

.art-tg__inline{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.art-tg__stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.art-tg__stack-row{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.art-tg__extras{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.art-tg__extra-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* ── Segmento (Frente / Frente-Verso) ────────────────────────── */

.art-segment{
  display:inline-flex;
  align-items:stretch;
  height:32px;
  padding:3px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.04);
  gap:2px;
}

.art-segment__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  padding:0 16px;
  border:none;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--muted);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--ease-hover),color var(--ease-hover);
}

.art-segment__btn:hover:not(.is-active):not(.active){
  background:rgba(255,255,255,.05);
  color:var(--text);
}

.art-segment__btn.is-active,
.art-segment__btn.active{
  background:rgba(var(--accent-rgb),.16);
  color:var(--accent-hi);
}

.art-segment__btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

.art-segment--sm{ height:28px; padding:2px; }
.art-segment--sm .art-segment__btn{ min-width:64px; padding:0 12px; font-size:var(--text-2xs); }

/* ── Stepper (− N +) ──────────────────────────────────────────── */

.art-stepper{
  display:inline-flex;
  align-items:stretch;
  height:32px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.04);
  overflow:hidden;
}

.art-stepper__btn{
  width:32px;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--text);
  font-family:var(--ui-font);
  font-size:var(--text-md);
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background-color var(--ease-hover),color var(--ease-hover);
}

.art-stepper__btn:hover{
  background:rgba(var(--gold-rgb),.10);
  color:var(--gold-hi);
}

.art-stepper__btn:active{
  filter:brightness(.92);
}

.art-stepper__btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

.art-stepper__btn:disabled{
  opacity:.4;
  pointer-events:none;
}

.art-stepper__value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:0 8px;
  font-size:var(--text-md);
  font-weight:700;
  color:var(--gold-2);
  border-left:1px solid var(--border-mid);
  border-right:1px solid var(--border-mid);
  user-select:none;
}

.lp-sidebar-left{
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
  max-height:100%;
}

.lp-panel{
  border-radius:var(--radius-lg);
  padding:16px;
}

.lp-panel-tip p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
  font-size:12px;
}

.lp-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.lp-panel-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}

.lp-panel-badge::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:var(--radius-xs);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.24),rgba(var(--gold-rgb),.16));
  border:1px solid rgba(var(--accent-rgb),.34);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.18);
}

.lp-action-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lp-action-btn{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:9px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  color:var(--text);
  transition:border-color var(--ease-hover),background-color var(--ease-hover);
  font-size:12px;
  text-decoration:none;
}

.lp-action-btn-inline{
  width:auto;
  min-width:168px;
  justify-content:flex-start;
}

.lp-action-btn-muted{
  border-color:rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
  color:rgba(243,240,248,.78);
}

.lp-action-btn-muted:hover{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
}

.lp-action-btn-inline span:last-child{
  white-space:nowrap;
}

.lp-action-btn-icononly{
  width:44px;
  min-width:44px;
  justify-content:center;
  padding:8px;
  border-radius:var(--radius-md);
}

.lp-action-btn-download{
  margin-left:10px;
  min-width:240px;
  border-color:rgba(var(--accent-rgb),.34);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.06));
  box-shadow:0 12px 30px rgba(var(--accent-rgb),.16), inset 0 0 0 1px rgba(var(--accent-rgb),.08);
  color:#f2fffd;
}

.lp-action-btn-download .lp-action-icon{
  background:rgba(var(--accent-rgb),.14);
  border-color:rgba(var(--accent-rgb),.3);
  color:#9af6ed;
}

.lp-action-btn-download:hover{
  border-color:rgba(var(--accent-rgb),.55);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.26),rgba(var(--accent-rgb),.08));
}

.lp-action-btn:hover{
  border-color:rgba(var(--gold-rgb),.32);
  background:linear-gradient(180deg,rgba(var(--gold-rgb),.10),rgba(255,255,255,.015));
}

.lp-action-btn-accent{
  border-color:rgba(var(--accent-rgb),.18);
}

.lp-action-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--teal);
  flex-shrink:0;
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
}

.lp-action-icon-arrow{
  width:22px;
  height:22px;
  background:radial-gradient(circle at 50% 50%,rgba(100,201,255,.18),rgba(100,201,255,.04) 72%);
  border:1px solid rgba(111,209,255,.2);
  color:#7dd8ff;
  border-radius:var(--radius-pill);
  box-shadow:0 0 20px rgba(111,209,255,.12);
}

.lp-action-icon-arrow svg{
  display:block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lp-inline-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.lp-inline-actions--triple{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.lp-inline-actions--single{
  grid-template-columns:minmax(0,1fr);
  margin-top:8px;
}

.lp-inline-actions--photo-top{
  margin-top:0;
}

.lp-inline-actions--photo-pair{
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  margin-top:8px;
}

.lp-inline-actions--photo-stack{
  margin-top:8px;
}

.lp-product-chip{
  margin-top:12px;
  padding:12px 14px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(var(--gold-rgb),.18);
  background:linear-gradient(180deg,rgba(var(--gold-rgb),.08),rgba(255,255,255,.02));
}

.lp-product-chip-label{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.lp-product-chip strong{
  display:block;
  font-size:11px;
  line-height:1.55;
}

.lp-product-chip--top{
  margin-top:0;
  flex:0 1 420px;
  min-width:min(100%,320px);
}

.lp-product-chip--top strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lp-workspace{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}

.lp-art-settings-strip{
  width:100%;
  min-width:0;
  padding:8px 10px;
  display:block;
  min-height:auto;
  overflow:hidden;
}

.lp-art-settings-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.lp-art-settings-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--gold-rgb),.22);
  background:linear-gradient(180deg,rgba(var(--gold-rgb),.12),rgba(var(--gold-rgb),.04));
  color:var(--gold-2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}

.lp-art-settings-copy{
  min-width:0;
  font-size:11px;
  line-height:1.2;
  color:rgba(243,240,248,.7);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lp-art-settings-scroll{
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:1px;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--gold-rgb),.36) transparent;
}

.lp-art-settings-scroll::-webkit-scrollbar{
  height:5px;
}

.lp-art-settings-scroll::-webkit-scrollbar-thumb{
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.58),rgba(var(--accent-rgb),.42));
}

.lp-art-settings-scroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-pill);
}

.lp-content-row{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:var(--sidenav-w) var(--content-panel-w) minmax(0,1fr);
  gap:0;
  align-items:stretch;
}

.lp-main{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  gap:12px;
  padding-top:12px;
}

/* Mesma respiração de 12px abaixo da topbar para todos os módulos de
   "Ferramentas Exclusivas" (Nomes em Lote, Matriz Foto, Remover Fundo,
   Vetorização, Opções de Fontes). As views vivem como irmãs diretas
   abaixo de .lp-app/.lp-topbar e ocupam a tela inteira quando ativas. */
.nl2-view:not([hidden]),
.mf-view:not([hidden]),
.rf-view:not([hidden]),
.vt-view:not([hidden]),
.lp-grade-nomes:not([hidden]){
  padding-top:12px;
}

.lp-main.lp-main--with-template-menu{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
}

.lp-right-dock{
  min-height:0;
  display:flex;
  align-items:stretch;
  justify-self:end;
  gap:12px;
}

.lp-right-menu{
  width:94px;
  min-width:94px;
  padding:8px;
  border-radius:var(--radius-xl);
  border:1px solid var(--stroke);
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),
    var(--panel);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}

/* Botões do menu lateral migrados para .tile (shared/ui-primitives.css).
   Permanece apenas o divisor horizontal interno. */

.lp-right-menu-divider{
  display:block;
  width:100%;
  height:1px;
  margin:6px 0;
  background:var(--border-mid);
}

/* Estado ativo (aba selecionada): JS adiciona .active no .tile. */
.lp-right-menu .tile.active{
  background:rgba(var(--accent-rgb),.14);
  border-color:rgba(var(--accent-rgb),.42);
  color:var(--accent-hi);
}
.lp-right-menu .tile.active .tile__label{
  color:var(--accent-hi);
}

.lp-termicos-menu{
  min-height:auto;
}

.lp-termicos-menu-inner{
  height:auto;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow-x:auto;
  scrollbar-width:none;
}

.lp-termicos-menu-inner::-webkit-scrollbar{
  display:none;
}

.lp-termicos-menu-btn{
  appearance:none;
  width:auto;
  min-height:auto;
  min-width:0;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.72);
  font:700 9px/1.1 'DM Sans',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  writing-mode:horizontal-tb;
  transform:none;
  text-align:center;
  white-space:nowrap;
  transition:border-color var(--ease-hover),background-color var(--ease-hover),color var(--ease-hover);
}

.lp-termicos-menu-btn:hover{
  border-color:rgba(var(--gold-rgb),.26);
  background:rgba(255,255,255,.045);
  color:#f8f2e7;
}

.lp-termicos-menu-btn.active{
  border-color:rgba(var(--accent-rgb),.28);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.06));
  color:#edf9f7;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

.lp-toolbar{
  flex-shrink:0;
  display:grid;
  grid-template-columns:108px 284px minmax(240px,1fr) minmax(280px,1fr);
  gap:10px;
  align-items:start;
  padding:6px 10px;
  border-radius:var(--radius-lg);
  width:max-content;
  min-width:100%;
}

.lp-toolbar-group{
  min-width:0;
}

.lp-toolbar-group-cards{
  grid-column:3 / 5;
}

.lp-toolbar-group-face,
.lp-toolbar-group-cards,
.lp-toolbar-group-colors,
.lp-toolbar-group-stack{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.lp-toolbar--art-settings .lp-toolbar-group,
.lp-toolbar--art-settings .lp-toolbar-group-face,
.lp-toolbar--art-settings .lp-toolbar-group-cards{
  flex-direction:row;
  align-items:center;
}

.lp-toolbar-group-global{
  display:flex;
  flex-direction:column;
}

.lp-toolbar-group:not(:last-child){
  border-right:1px solid rgba(255,255,255,.08);
  padding-right:10px;
}

.lp-toolbar-label{
  display:block;
  margin-bottom:2px;
  color:var(--muted);
  font-size:8px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.lp-gcfg-stack{
  display:grid;
  gap:10px;
}

.lp-toolbar-group-cards .lp-gcfg{
  display:grid;
  grid-template-columns:max-content max-content;
  gap:8px;
  align-items:start;
  justify-content:start;
}

.lp-toolbar-group-cards .lp-gcfg-copy-stack{
  grid-column:2;
  display:grid;
  grid-auto-rows:minmax(24px,auto);
  gap:3px;
  justify-items:start;
  align-content:start;
}

.lp-toolbar-group-cards .lp-gcfg-row-cards{
  min-height:54px;
  padding:7px 10px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  align-content:space-between;
}

.lp-toolbar-group-cards .lp-gcfg-row-copy{
  min-height:24px;
}

.lp-toolbar-group-text{
  grid-column:1 / 3;
}

.lp-toolbar-group-icons{
  grid-column:3 / 5;
}

.lp-toolbar--sidebar{
  width:100%;
  min-width:0;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
}

.lp-toolbar--sidebar .lp-toolbar-group{
  min-width:0;
  width:100%;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);
  padding:14px;
  background:var(--surface-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.lp-toolbar--sidebar .lp-toolbar-group:not(:last-child){
  border-right:none;
  padding-right:14px;
}

.lp-toolbar--sidebar .lp-toolbar-group-colors,
.lp-toolbar--sidebar .lp-toolbar-group-face,
.lp-toolbar--sidebar .lp-toolbar-group-stack,
.lp-toolbar--sidebar .lp-toolbar-group-cards,
.lp-toolbar--sidebar .lp-toolbar-group-text,
.lp-toolbar--sidebar .lp-toolbar-group-icons{
  grid-column:auto;
}

.lp-toolbar--sidebar .lp-toolbar-label{
  margin-bottom:8px;
  font-size:9px;
}

.lp-toolbar--sidebar .lp-toolbar-group-cards .lp-gcfg{
  grid-template-columns:minmax(0,1fr);
}

.lp-toolbar--sidebar .lp-toolbar-group-cards .lp-gcfg-copy-stack{
  grid-column:auto;
  justify-items:stretch;
}

.lp-toolbar--sidebar .lp-toolbar-group-cards .lp-gcfg-row-copy{
  min-height:54px;
  padding:7px 10px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.lp-toolbar--sidebar .lp-toolbar-group-stack .lp-gcfg-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}

.lp-toolbar--sidebar .lp-toolbar-text-row{
  flex-direction:column;
  width:100%;
}

.lp-toolbar-color-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lp-toolbar--sidebar .lp-toolbar-text-actions{
  width:100%;
}

.lp-toolbar--sidebar .lp-toolbar-text-actions .lp-mini-btn{
  width:100%;
  min-width:0;
}

.lp-toolbar--sidebar .lp-toolbar-text-row textarea{
  width:100%;
  height:auto;
  min-height:44px;
}

.lp-toolbar--sidebar .lp-icon-slot{
  flex-wrap:wrap;
}

.lp-toolbar--sidebar .lp-icon-slot-add-row .lp-mini-btn{
  width:100%;
}

.lp-upload-hint{
  display:block;
  width:100%;
  font-size:10px;
  color:rgba(255,255,255,.38);
  margin-top:2px;
  line-height:1.3;
}

.lp-toolbar--inspector-only{
  grid-template-columns:168px 162px 252px 344px;
  gap:16px;
  align-items:start;
  justify-content:center;
}

.lp-toolbar--inspector-only .lp-toolbar-group-face,
.lp-toolbar--inspector-only .lp-toolbar-group-cards,
.lp-toolbar--inspector-only .lp-toolbar-group-colors,
.lp-toolbar--inspector-only .lp-toolbar-group-stack{
  gap:6px;
}

.lp-toolbar--inspector-only .lp-toolbar-group-face,
.lp-toolbar--inspector-only .lp-toolbar-group-cards,
.lp-toolbar--inspector-only .lp-toolbar-group-colors,
.lp-toolbar--inspector-only .lp-toolbar-group-stack{
  min-width:0;
}

.lp-toolbar--inspector-only .lp-toolbar-label{
  margin-bottom:5px;
  color:rgba(230,223,236,.72);
  font-size:8px;
  letter-spacing:.24em;
}

.lp-toolbar--inspector-only .lp-toolbar-group-stack .lp-gcfg{
  margin-top:0;
  padding-top:0;
  border-top:none;
  gap:5px;
}

.lp-toolbar--inspector-only .lp-gcfg-row{
  gap:5px;
}

.lp-toolbar--inspector-only .lp-gcfg-label{
  font-size:8px;
  letter-spacing:.12em;
  color:rgba(224,217,231,.58);
}

.lp-toolbar--inspector-only .lp-toolbar-group-colors{
  min-width:0;
}

.lp-toolbar--inspector-only .lp-toolbar-group-colors .lp-color-row{
  flex-wrap:nowrap;
  gap:7px;
  justify-content:center;
}

.lp-toolbar--inspector-only .lp-toolbar-group-colors .lp-color-chip{
  width:27px;
  height:27px;
}

.lp-toolbar--inspector-only .lp-toolbar-group-face .lp-gcfg{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

.lp-toolbar--inspector-only .lp-toolbar-group-face .lp-gcfg-row{
  display:block;
}

.lp-toolbar--inspector-only .lp-toolbar-group-face .lp-scope-seg-face{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  border:none;
  overflow:visible;
  background:none;
}

.lp-toolbar--inspector-only .lp-toolbar-group-face .lp-scope-btn{
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  padding:8px 10px;
  white-space:normal;
  line-height:1.2;
  text-align:center;
  background:rgba(255,255,255,.02);
}

.lp-toolbar--inspector-only .lp-toolbar-group-face .lp-scope-btn:first-child{
  border-right:1px solid rgba(255,255,255,.08);
}

.lp-toolbar--inspector-only .lp-toolbar-group-face .lp-scope-btn.active{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.08));
  border-color:rgba(var(--accent-rgb),.28);
}

.lp-toolbar--inspector-only .lp-toolbar-group-stack .lp-gcfg-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
}

.lp-toolbar--inspector-only .lp-toolbar-group-stack .lp-gcfg-label{
  white-space:normal;
  line-height:1.24;
  max-width:132px;
}

.lp-toolbar--inspector-only #textOrientationRow{
  align-items:start;
}

.lp-toolbar--inspector-only #textOrientationRow .lp-gcfg-label{
  padding-top:6px;
}

.lp-toolbar--inspector-only #textOrientationRow .lp-scope-seg{
  justify-self:end;
}

.lp-toolbar--inspector-only #hideIconsRow .lp-gcfg-label{
  max-width:none;
  white-space:nowrap;
  letter-spacing:.1em;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg{
  display:grid;
  grid-template-columns:134px minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-copy-stack{
  grid-column:2;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:4px;
  min-height:54px;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-row-cards,
.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-row-copy{
  min-height:54px;
  padding:7px 10px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-row-cards{
  gap:5px;
  align-content:space-between;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-row-copy{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  min-height:0;
  padding:2px 8px;
  border-radius:var(--radius-md);
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-row-copy[hidden]{
  display:none;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards #useInitialTextRow{
  min-height:0;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards #useInitialTextRow .lp-mini-btn-xs{
  min-width:46px;
  min-height:18px;
  padding:2px 6px;
  font-size:8px;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-label{
  line-height:1.22;
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-gcfg-label-copy{
  font-size:7px;
  letter-spacing:.06em;
  max-width:152px;
  color:rgba(224,217,231,.56);
}

.lp-toolbar--inspector-only .lp-toolbar-group-cards .lp-stepper{
  margin-top:auto;
}

.lp-gcfg-row-face{
  display:block;
}

.lp-scope-seg-face{
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
}

.lp-scope-seg-face .lp-scope-btn{
  flex:1 1 50%;
  min-width:0;
  padding-inline:5px;
  white-space:nowrap;
  font-size:8px;
  letter-spacing:.01em;
}

.lp-toolbar--art-settings .lp-scope-seg-face{
  width:max-content;
  min-width:224px;
  flex:0 0 auto;
}

.lp-toolbar--art-settings .lp-toolbar-group-face .lp-scope-btn:first-child{
  border-right:none;
}

.lp-color-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.lp-color-row--basics{
  margin-bottom:6px;
}

.lp-color-row--effects{
  margin-bottom:0;
}

.lp-color-chip{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(0,0,0,.32) inset;
  transition:border-color var(--ease-hover);
  flex:0 0 auto;
  background-size:cover;
  background-position:center;
}

.lp-color-chip:hover{
  border-color:rgba(255,255,255,.40);
}

.lp-color-chip.active{
  border-color:var(--gold-2);
  box-shadow:0 0 0 2px rgba(var(--gold-rgb),.18),0 0 14px rgba(var(--gold-rgb),.28);
}

/* Picker chip: <label> com <input type="color"> embutido. O input cobre
   o label (inset:0, opacity:0), então o click do usuário cai nele e o
   browser abre o color picker nativamente — sem .click() programático. */
.lp-color-chip--picker{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  overflow:hidden;
}
.lp-color-chip--picker > input[type="color"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:none;
  opacity:0;
  cursor:pointer;
  z-index:2;
  background:none;
}
.lp-color-chip--picker svg{
  position:relative;
  z-index:1;
  width:14px;
  height:14px;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}

/* Combo madeira: chip un pouco separado dos vizinhos da linha de efeitos
   por uma divisória sutil, sinalizando "isso aqui aplica cor + filtro". */
.lp-color-row-sep{
  display:inline-block;
  width:1px;
  height:18px;
  background:var(--border-mid);
  margin:0 4px 0 2px;
  flex:0 0 auto;
}

.lp-color-chip--combo{
  position:relative;
}
.lp-color-chip--combo::after{
  content:"";
  position:absolute;
  right:-1.5px;
  bottom:-1.5px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  border:1.5px solid var(--surface-2);
}

/* ── Color picker popover custom ──────────────────────────────────────── */
.lp-cp-popover{
  position:fixed;
  z-index:9999;
  width:240px;
  padding:12px;
  background:var(--surface-3);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);
  box-shadow:0 14px 38px rgba(0,0,0,.55);
  font-family:var(--ui-font);
}
.lp-cp-popover[hidden]{display:none}

.lp-cp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.lp-cp-title{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--text);
}
.lp-cp-close{
  width:24px;
  height:24px;
  padding:0;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover);
}
.lp-cp-close:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--border-mid);
  color:var(--text);
}

.lp-cp-body{
  display:grid;
  grid-template-columns:1fr 16px;
  gap:10px;
  margin-bottom:10px;
}

.lp-cp-sv{
  position:relative;
  height:150px;
  border-radius:var(--radius-sm);
  cursor:crosshair;
  touch-action:none;
  user-select:none;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(0,100%,50%);
}
.lp-cp-sv-cursor{
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid #fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
}

.lp-cp-hue{
  position:relative;
  width:16px;
  border-radius:var(--radius-pill);
  cursor:ns-resize;
  touch-action:none;
  user-select:none;
  background:linear-gradient(to bottom,
    hsl(0,100%,50%) 0%,
    hsl(60,100%,50%) 17%,
    hsl(120,100%,50%) 33%,
    hsl(180,100%,50%) 50%,
    hsl(240,100%,50%) 67%,
    hsl(300,100%,50%) 83%,
    hsl(360,100%,50%) 100%);
}
.lp-cp-hue-cursor{
  position:absolute;
  left:-2px;
  right:-2px;
  height:4px;
  border:1.5px solid #fff;
  border-radius:2px;
  transform:translateY(-50%);
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.6);
}

.lp-cp-foot{
  display:flex;
  align-items:center;
  gap:8px;
}
.lp-cp-preview{
  width:28px;
  height:28px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-mid);
  background:#888;
  flex:0 0 auto;
}
.lp-cp-hex{
  flex:1 1 auto;
  background:var(--surface-2);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-sm);
  color:var(--text);
  padding:6px 8px;
  font-family:var(--ui-font);
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  outline:none;
  transition:border-color var(--ease-hover);
}
.lp-cp-hex:focus{
  border-color:var(--accent);
}

/* Slider de intensidade — bem fino e discreto, ocupando pouco espaço. */
.lp-engraving-intensity-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.lp-engraving-intensity-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  flex-shrink:0;
}

.lp-engraving-intensity-slider{
  flex:1 1 auto;
  -webkit-appearance:none;
  appearance:none;
  height:2px;
  background:var(--border-mid);
  border-radius:var(--radius-pill);
  cursor:pointer;
}

.lp-engraving-intensity-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  border:1.5px solid var(--surface-2);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35);
}

.lp-engraving-intensity-slider::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  border:1.5px solid var(--surface-2);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35);
}

.lp-engraving-intensity-value{
  font-size:var(--text-2xs);
  font-weight:600;
  color:var(--muted);
  min-width:32px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.lp-toolbar-text-row{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.lp-text-layer-list{
  display:grid;
  gap:8px;
  width:100%;
  min-width:0;
}

.lp-text-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:8px;
  width:100%;
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  background:rgba(var(--accent-rgb),.07);
  transition:background-color var(--ease-hover),border-color var(--ease-hover);
}

.lp-text-card:has(.lp-text-card-remove){
  grid-template-columns:auto minmax(0,1fr) auto;
}

.lp-text-card:hover{
  border-color:rgba(var(--accent-rgb),.38);
  background:rgba(var(--accent-rgb),.10);
}

.lp-text-card.is-active,
.lp-text-card.is-active:hover{
  border-color:rgba(var(--accent-rgb),.60);
  background:rgba(var(--accent-rgb),.14);
}

.lp-text-card-badge{
  display:block;
  min-width:18px;
  padding-top:11px;
  color:var(--accent-hi);
  font-size:var(--text-md);
  font-weight:700;
  line-height:1;
  text-align:center;
}

.lp-text-card-remove{
  margin-top:1px;
}

.lp-add-layer-btn{
  width:100%;
  min-width:0;
}

.lp-toolbar-text-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0;
}

.lp-toolbar-text-actions .lp-mini-btn{
  min-width:138px;
  padding:10px 12px;
  font-size:10px;
}

.lp-toolbar-text-row textarea{
  flex:1 1 0;
  min-width:0;
  width:100%;
  height:72px;
  resize:none;
  padding:8px 0;
  color:var(--text);
  background:transparent;
  border:0;
  border-radius:0;
  outline:none;
  line-height:1.4;
  font-size:var(--text-md);
}

.lp-toolbar-text-row textarea:focus{
  outline:none;
  box-shadow:none;
}

.lp-toolbar-text-row textarea:focus-visible{
  outline:none;
}

.lp-mini-btn,
.lp-primary-btn,
.lp-secondary-btn{
  transition:border-color var(--ease-hover),background-color var(--ease-hover),color var(--ease-hover);
}

.lp-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:32px;
  min-height:32px;
  padding:0 14px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-mid);
  color:var(--text);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  flex-shrink:0;
}

/* ── Scoped overrides: contextos que pedem botões em 40px (height padrão
   da primitiva .btn). Garantem uniformidade dentro de cada toolbar/painel
   onde lp-mini-btn coexiste com outros controles 40px. */

.nl2-toolbar .lp-mini-btn,
.lp-confirm-actions .lp-mini-btn{
  height:40px;
  min-height:40px;
  padding:0 16px;
  font-size:var(--text-md);
  border-radius:var(--radius-md);
}

.lp-toolbar-text-row textarea.is-hidden{
  display:none;
}

.lp-mini-btn:hover,
.lp-secondary-btn:hover{
  border-color:rgba(var(--gold-rgb),.42);
  background:rgba(var(--gold-rgb),.10);
}

.lp-primary-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:40px;
  min-height:40px;
  padding:0 20px;
  border-radius:var(--radius-md);
  background:linear-gradient(160deg,var(--gold-2) 0%,var(--gold) 100%);
  color:#18100a;
  font-weight:700;
  font-size:var(--text-md);
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 28px rgba(var(--gold-rgb),.28),inset 0 1px 0 rgba(255,255,255,.22);
}

.lp-primary-btn:hover{
  background:linear-gradient(160deg,var(--gold-hi) 0%,var(--gold-2) 100%);
}

.lp-stage{
  flex:1;
  min-height:0;
  border-radius:var(--radius-xl);
  padding:16px;
  position:relative;
  overflow:auto;
}

.lp-stage::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:var(--radius-2xl);
  background:
    linear-gradient(180deg,rgba(255,255,255,.014),transparent),
    radial-gradient(circle at 50% 0%,rgba(var(--gold-rgb),.045),transparent 45%);
  pointer-events:none;
}

.lp-card-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.lp-card-grid[data-engine]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:980px;
  margin:0 auto;
}

.lp-card-grid[data-visible-count="1"]{
  grid-template-columns:minmax(0,var(--lp-single-card-width,min(100%,560px)));
  max-width:var(--lp-single-card-width,min(100%,560px));
  justify-content:center;
}

.lp-card-grid[data-visible-count="1"] .lp-card{
  width:100%;
}

.lp-card-grid[data-engine="brindes"] .lp-card--plate,
.lp-card-grid[data-engine="brindes"] .lp-card--round,
.lp-card-grid[data-engine="joias"] .lp-card--pendant{
  width:100%;
  max-width:none;
  justify-self:stretch;
}

.lp-card-grid[data-engine] .lp-card--wide,
.lp-card-grid[data-engine] .lp-card--slim{
  grid-column:1 / -1;
  width:100%;
  justify-self:stretch;
}

.lp-card-grid[data-engine] .lp-card{
  max-width:var(--card-max-w,none);
  justify-self:center;
}

.lp-card{
  /* Tokens locais que coordenam header + badge + título do card.
     Quando o card fica ativo, sobrescrevemos os três pra teal de uma vez. */
  --card-accent:      var(--gold);
  --card-accent-text: var(--gold-2);
  --card-accent-soft: rgba(var(--gold-rgb), .18);
  position:relative;
  border-radius:var(--radius-2xl);
  overflow:hidden;
  border:none;
  background:transparent;
  cursor:pointer;
  transition:box-shadow var(--ease-hover);
}

/* Hover: anel branco discreto, só pra dizer "clicável".
   Não aparece se o card já está ativo (active vence). */
.lp-card:hover:not(.active){
  box-shadow:0 0 0 1px rgba(255,255,255,.20);
}

/* SELECIONADO: anel teal sólido 3px + halo 8px + frame interno no body
   + header tintado. Quatro sinais coordenados pela mesma cor — claros,
   imediatos, sem caos. Zero movimento. */
.lp-card.active{
  --card-accent:      var(--accent);
  --card-accent-text: var(--accent-hi);
  --card-accent-soft: rgba(var(--accent-rgb), .30);
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 0 8px rgba(var(--accent-rgb), .22);
}

/* Frame interno no body do card ativo: linha teal de 1px abraçando o
   conteúdo branco, deixando inequívoco onde a edição vai cair. */
.lp-card.active .lp-card-body{
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb), .55);
}

.lp-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,var(--card-accent-soft),rgba(255,255,255,.015));
}

.lp-card-head-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.lp-card-title{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--card-accent-text);
  transition:color var(--ease-hover);
}

.lp-card-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  border:1px solid var(--card-accent-soft);
  background:var(--card-accent-soft);
  color:var(--card-accent);
  font-size:var(--text-2xs);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:color var(--ease-hover),border-color var(--ease-hover),background-color var(--ease-hover);
}

.lp-card-meta{
  color:var(--muted);
  font-size:var(--text-xs);
}

.lp-card-body{
  padding:0;
  background:#fff;
  position:relative;
  overflow:hidden;
  border-radius:inherit;
  box-shadow:none;
}

.lp-card-body::after{
  content:none;
}

.lp-card--mask .lp-card-body{
  background:#fff;
}

.lp-card--pendant .lp-card-body{
  background:#fff;
}

.lp-card--round .lp-card-body{
  background:#fff;
}

.lp-card--wide .lp-card-body,
.lp-card--slim .lp-card-body{
  background:#fff;
}

.lp-card-expand{
  position:absolute;
  top:6px;
  left:6px;
  z-index:20;
  width:28px;
  height:28px;
  border-radius:var(--radius-md);
  background:var(--overlay-soft);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:14px;
  display:grid;
  place-items:center;
  opacity:0;
  transition:opacity .15s,background .15s;
  cursor:pointer;
}

.lp-card:hover .lp-card-expand{
  opacity:1;
}

.lp-card-expand:hover{
  background:rgba(var(--gold-rgb),.22);
  border-color:rgba(var(--gold-rgb),.5);
}

.lp-preview{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--card-aspect, 240 / 370);
  background:#fff;
  cursor:default;
  position:relative;
  z-index:1;
}

.lp-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border-top:1px solid rgba(255,255,255,.05);
}

.lp-card-foot span{
  font-size:10px;
  font-weight:600;
  color:#f2edf8;
}

.lp-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:52px;
  padding:3px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.lp-toggle.active{
  background:rgba(var(--gold-rgb),.18);
  border-color:rgba(var(--gold-rgb),.28);
}

.lp-toggle-knob{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transform:translateX(0);
}

.lp-toggle.active .lp-toggle-knob{
  transform:translateX(24px);
}

.lp-sidebar-right{
  border-radius:var(--radius-xl);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  overflow:hidden;
  width:clamp(300px,23.5vw,340px);
  min-width:300px;
  max-width:340px;
  flex:0 0 clamp(300px,23.5vw,340px);
}

.lp-sidebar-right[hidden]{
  display:none !important;
}

.lp-sidebar-panel-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}

.lp-inspector{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  min-height:0;
  overflow:visible;
  scrollbar-gutter:auto;
}

.lp-sidebar-left,
.lp-sidebar-right,
.lp-sidebar-panel-content,
.lp-stage,
.lp-inspector,
.lp-modal-side,
.lp-modal-content,
.lp-product-grid,
.lp-icon-grid,
.lp-expand-sidebar-inner{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
  scrollbar-gutter:stable;
}

.lp-sidebar-left::-webkit-scrollbar,
.lp-sidebar-right::-webkit-scrollbar,
.lp-sidebar-panel-content::-webkit-scrollbar,
.lp-stage::-webkit-scrollbar,
.lp-inspector::-webkit-scrollbar,
.lp-modal-side::-webkit-scrollbar,
.lp-modal-content::-webkit-scrollbar,
.lp-product-grid::-webkit-scrollbar,
.lp-icon-grid::-webkit-scrollbar,
.lp-expand-sidebar-inner::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.lp-sidebar-left::-webkit-scrollbar-thumb,
.lp-sidebar-right::-webkit-scrollbar-thumb,
.lp-sidebar-panel-content::-webkit-scrollbar-thumb,
.lp-stage::-webkit-scrollbar-thumb,
.lp-inspector::-webkit-scrollbar-thumb,
.lp-modal-side::-webkit-scrollbar-thumb,
.lp-modal-content::-webkit-scrollbar-thumb,
.lp-product-grid::-webkit-scrollbar-thumb,
.lp-icon-grid::-webkit-scrollbar-thumb,
.lp-expand-sidebar-inner::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:var(--radius-pill);
  border:2px solid transparent;
  background-clip:padding-box;
}

.lp-sidebar-left::-webkit-scrollbar-thumb:hover,
.lp-sidebar-panel-content::-webkit-scrollbar-thumb:hover,
.lp-stage::-webkit-scrollbar-thumb:hover,
.lp-inspector::-webkit-scrollbar-thumb:hover,
.lp-modal-side::-webkit-scrollbar-thumb:hover,
.lp-modal-content::-webkit-scrollbar-thumb:hover,
.lp-product-grid::-webkit-scrollbar-thumb:hover,
.lp-icon-grid::-webkit-scrollbar-thumb:hover,
.lp-expand-sidebar-inner::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.28);
}

.lp-sidebar-left::-webkit-scrollbar-track,
.lp-sidebar-panel-content::-webkit-scrollbar-track,
.lp-stage::-webkit-scrollbar-track,
.lp-inspector::-webkit-scrollbar-track,
.lp-modal-side::-webkit-scrollbar-track,
.lp-modal-content::-webkit-scrollbar-track,
.lp-product-grid::-webkit-scrollbar-track,
.lp-icon-grid::-webkit-scrollbar-track,
.lp-expand-sidebar-inner::-webkit-scrollbar-track{
  background:transparent;
}

.lp-accordion{
  width:100%;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  overflow:visible;
  position:relative;
}

.lp-accordion-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:11px 13px;
  text-align:left;
}

.lp-accordion-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.lp-accordion-toggle{
  color:var(--muted);
  font-size:14px;
  line-height:1;
}

.lp-accordion-chip{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  font-weight:700;
}

.lp-accordion-title{
  font-size:12px;
  font-weight:700;
}

.lp-accordion-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.lp-accordion-remove{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(220,90,90,.3);
  background:rgba(220,90,90,.1);
  color:#e07070;
  font-size:11px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:border-color var(--ease-hover),background-color var(--ease-hover),color var(--ease-hover);
}

.lp-accordion-remove:hover{
  border-color:rgba(220,90,90,.55);
  background:rgba(220,90,90,.18);
  color:#ed8a8a;
}

.lp-accordion-body{
  padding:0 13px 13px;
  display:grid;
  gap:9px;
}

.lp-accordion.collapsed .lp-accordion-body{
  display:none;
}

.lp-inspector-empty{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:22px 18px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.lp-inspector-empty strong{
  display:block;
  color:var(--gold-2);
  font-size:14px;
  margin-bottom:8px;
}

.lp-inspector-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
}

.lp-inspector-actions-title{
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.lp-inspector-actions-row{
  display:grid;
  gap:8px;
}

.lp-inspector-actions-row--main{
  grid-template-columns:minmax(0,1.45fr) repeat(2,minmax(0,1fr));
}

.lp-inspector-actions-row--align{
  grid-template-columns:1fr 1fr;
}

.lp-field{
  display:grid;
  gap:6px;
}

.lp-field label{
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.lp-input,
.lp-select{
  width:100%;
  height:40px;
  min-height:40px;
  padding:0 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.035);
  color:var(--text);
  outline:none;
  font-size:var(--text-md);
  line-height:1;
  transition:border-color var(--ease-ui),box-shadow var(--ease-ui);
}

textarea.lp-input{
  resize:none;
  min-height:88px;
  height:88px;
  line-height:1.5;
}

.lp-input:focus,
.lp-select:focus{
  border-color:rgba(var(--gold-rgb),.50);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.10);
}

.lp-input::placeholder{
  color:var(--muted-2);
}

#photoCropMode option{
  color:#122033;
  background:#f5f7fb;
}

.lp-tool-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}

.lp-tool-row--text-format{
  display:flex;
  align-items:center;
  gap:8px;
}

.lp-tool-group{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  min-width:0;
}

.lp-tool-group--align{
  grid-template-columns:repeat(3,minmax(0,1fr));
  flex:1;
}

.lp-tool-sep{
  flex:0 0 auto;
  margin:0 2px;
}

.lp-tool-btn{
  min-height:36px;
  padding:0 8px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color:#f8f5fb;
  font-size:12px;
}

.lp-tool-btn.active,
.lp-tool-btn:hover{
  border-color:rgba(var(--gold-rgb),.28);
  background:rgba(var(--gold-rgb),.08);
}

.lp-inline-grid{
  display:grid;
  grid-template-columns:1fr 84px;
  gap:8px;
  align-items:center;
}

.lp-number-box{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 8px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color:#f6f1fb;
  min-height:42px;
}

.lp-slider-wrap{
  display:grid;
  grid-template-columns:1fr 64px;
  gap:8px;
  align-items:center;
}

.lp-advanced-typography{
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  background:var(--surface-1);
  overflow:hidden;
}

.lp-advanced-typography summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:40px;
  padding:0 12px;
  color:var(--text);
  font-size:var(--text-sm);
  font-weight:700;
  cursor:pointer;
  list-style:none;
}

.lp-advanced-typography summary::-webkit-details-marker{
  display:none;
}

.lp-advanced-typography summary::after{
  content:'▸';
  color:var(--muted);
  font-size:var(--text-2xs);
}

.lp-advanced-typography[open] summary{
  border-bottom:1px solid var(--border-lo);
}

.lp-advanced-typography[open] summary::after{
  content:'▾';
}

.lp-advanced-typography-body{
  display:grid;
  gap:9px;
  padding:10px 12px 12px;
}

.lp-slider-value{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  font-weight:600;
  font-size:11px;
}

input[type="range"]{
  width:100%;
  margin:0;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.9),rgba(255,255,255,.12));
  outline:none;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--gold);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.lp-align-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.lp-align-btn{
  min-height:38px;
  padding:0 5px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.lp-align-btn:hover{
  color:var(--text);
  border-color:rgba(var(--gold-rgb),.26);
}

.lp-align-btn:disabled,
.lp-group-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.lp-export-bar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:auto;
}

.lp-secondary-btn{
  min-height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:10px 16px;
  border-radius:var(--radius-md);
  border:1px solid rgba(var(--gold-rgb),.38);
  background:linear-gradient(160deg,rgba(var(--gold-rgb),.10) 0%,rgba(var(--gold-rgb),.03) 100%);
  color:var(--gold-2);
  font-weight:700;
  font-size:var(--text-md);
  text-align:center;
  white-space:nowrap;
}

.lp-secondary-btn span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.lp-secondary-btn small{
  display:block;
  font-size:var(--text-2xs);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  white-space:nowrap;
}

.lp-secondary-btn-violet{
  border-color:rgba(var(--accent-rgb),.32);
  color:var(--accent-hi);
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.10) 0%,rgba(var(--accent-rgb),.02) 100%);
}

.lp-modal[hidden]{display:none}

.lp-modal{
  position:fixed;
  inset:0;
  z-index:50;
  padding:18px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

#iconModal{
  z-index:70;
}

#fileNameModal{
  z-index:80;
}

.lp-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,3,10,.66);
  backdrop-filter:blur(10px);
}

.lp-modal-dialog{
  position:relative;
  z-index:1;
  width:min(1180px,calc(100vw - 36px));
  max-height:calc(100dvh - 36px);
  margin:auto;
  border-radius:var(--radius-xl);
  border:1px solid var(--border-mid);
  background:var(--surface-3);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.lp-modal-dialog-narrow{
  width:min(760px,calc(100vw - 36px));
}

.lp-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--border-lo);
  /* sem gradient — limpo, profissional */
}

.lp-modal-head h2{
  margin:0 0 2px;
  font-family:var(--ui-font);
  font-size:var(--text-xl);
  font-weight:700;
  letter-spacing:0;
  color:var(--text);
}

.lp-modal-head p{
  margin:0;
  font-size:var(--text-sm);
  color:var(--muted);
  line-height:1.45;
}

/* Abas de categoria do modal de produtos (Etapa corretiva) */
.lp-modal-category-tabs{
  display:flex;
  gap:6px;
  margin-top:10px;
  flex-wrap:wrap;
}

.lp-modal-cat-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  min-height:32px;
  padding:0 14px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  cursor:pointer;
  transition:background-color var(--ease-ui),color var(--ease-ui),border-color var(--ease-ui);
  white-space:nowrap;
}

.lp-modal-cat-tab.active{
  background:rgba(var(--gold-rgb),.16);
  border-color:rgba(var(--gold-rgb),.48);
  color:var(--gold-2);
}

.lp-modal-cat-tab:hover:not(.active){
  background:rgba(255,255,255,.06);
  border-color:var(--border-hi);
  color:var(--text);
}

.lp-modal-close{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover);
}

.lp-modal-close:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--border-mid);
  color:var(--text);
}

.lp-modal-body{
  padding:22px 24px 24px;
  flex:1;
  min-height:0;
}

.lp-modal-body-products{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:20px;
  min-height:0;
  align-items:stretch;
}

.lp-modal-side{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  overflow:auto;
  padding-right:6px;
}

.lp-folder-item{
  display:flex;
  align-items:center;
  width:100%;
  min-height:40px;
  text-align:left;
  padding:8px 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.02);
  color:var(--text);
  line-height:1.35;
  white-space:normal;
  font-size:var(--text-md);
  transition:background-color var(--ease-hover),border-color var(--ease-hover);
}

.lp-folder-item.active,
.lp-folder-item:hover{
  border-color:rgba(var(--gold-rgb),.28);
  background:rgba(var(--gold-rgb),.08);
}

.lp-modal-content{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* ── PRODUCT MODAL — DRILL-DOWN NAVIGATION ── */
.lp-product-drillnav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 24px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}

.lp-product-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  min-height:40px;
  padding:0 14px 0 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:var(--text-md);
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  cursor:pointer;
  transition:background-color var(--ease-hover),color var(--ease-hover),border-color var(--ease-hover);
  white-space:nowrap;
  flex-shrink:0;
}

.lp-product-back-btn:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.2);
  color:var(--text);
}

.lp-product-breadcrumb{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
  overflow:hidden;
}

.lp-product-breadcrumb-item{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:240px;
}

.lp-product-breadcrumb-item.active{
  color:var(--gold-2);
  font-weight:600;
}

.lp-product-breadcrumb-sep{
  font-size:12px;
  color:rgba(255,255,255,.2);
  flex-shrink:0;
}

/* Body layout — drill-down */
.lp-modal-body-drilldown{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding:0;
  overflow:hidden;
}

.lp-product-search-wrap{
  padding:14px 24px 12px;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.lp-product-search-wrap input{
  width:100%;
  height:40px;
  min-height:40px;
  padding:0 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:var(--text-md);
  line-height:1;
  outline:none;
  transition:border-color var(--ease-hover),box-shadow var(--ease-hover);
}

.lp-product-search-wrap input:focus{
  border-color:rgba(var(--gold-rgb),.50);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.10);
}

.lp-product-search-wrap input::placeholder{
  color:var(--muted);
}

.lp-product-stage{
  flex:1;
  overflow-y:auto;
  padding:24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
  -webkit-overflow-scrolling:touch;
}

.lp-product-stage::-webkit-scrollbar{width:8px}
.lp-product-stage::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:var(--radius-pill);
  border:2px solid transparent;
  background-clip:padding-box;
}
.lp-product-stage::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
.lp-product-stage::-webkit-scrollbar-track{background:transparent}

/* ── LEVEL 1 — CATEGORY CARDS ── */
.lp-cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
  max-width:600px;
  margin:0 auto;
  padding:8px 0;
}

.lp-cat-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:96px;
  padding:24px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  cursor:pointer;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover),box-shadow var(--ease-hover);
  font-size:var(--text-lg);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text);
  text-transform:uppercase;
  text-align:center;
  line-height:1.3;
}

.lp-cat-card:hover{
  background:rgba(var(--accent-rgb),.08);
  border-color:rgba(var(--accent-rgb),.45);
  color:var(--accent-hi);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}

/* ── LEVEL 2 — FOLDER THUMBNAIL GRID ── */
.lp-folder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
  align-content:start;
}

.lp-folder-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  overflow:hidden;
  cursor:pointer;
  transition:border-color var(--ease-hover),background-color var(--ease-hover),box-shadow var(--ease-hover);
}

.lp-folder-card:hover{
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}

.lp-folder-card-media{
  background:#f3f4f7;
  height:140px;
  display:grid;
  place-items:center;
  padding:14px;
  flex-shrink:0;
  border-bottom:1px solid var(--border-lo);
}

.lp-folder-card-media img{
  max-width:100%;
  max-height:116px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.lp-folder-card-no-img{
  font-size:22px;
  color:rgba(0,0,0,.22);
}

.lp-folder-card-name{
  padding:12px 14px;
  font-size:var(--text-md);
  font-weight:600;
  color:var(--text);
  line-height:1.35;
  text-align:center;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* ═══════════════════════════════════════════════════════════════════
   RECORTAR IMAGEM — modal de edição de foto do produto
   Re-skin alinhado ao módulo shared/remover-fundo.css:
   - Layout 2 colunas (controles à esquerda, stage à direita) em cards
     surface-2.
   - Status `#photoCropStatus` virou overlay full-stage com spinner CSS
     (controlado por [hidden]/textContent/.is-error do JS).
   - Botões locais em família `.lp-photo-crop-btn` (primary/gold/ghost/
     danger-soft) com hover em background-color apenas — sem transform,
     sem box-shadow animado (manual de estilo do projeto).
   Todos os IDs/data-attrs preservados — JS intocado.
   ═══════════════════════════════════════════════════════════════════ */

.lp-modal-dialog-crop{
  width:min(1380px,calc(100vw - 28px));
}

/* Utilitários compartilhados: panel + kicker (campo rotulado em caixa
   alta). Apesar do prefixo histórico `lp-photo-crop-*`, estas duas
   classes são usadas também por outros modais (Salvar Arte Pronta,
   Salvar como Categoria). Não remover sem buscar consumidores. */
.lp-photo-crop-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.lp-photo-crop-kicker{
  color:var(--muted);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* Layout: controles à esquerda (340px), stage à direita (resto) */
.lp-photo-crop-layout{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:14px;
  padding:18px;
  min-height:0;
  flex:1;
}

/* ── Sidebar de controles ─────────────────────────────────── */
.lp-photo-crop-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  border-radius:var(--radius-2xl);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
}

.lp-photo-crop-sidebar::-webkit-scrollbar{width:6px;}
.lp-photo-crop-sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:var(--radius-pill);
}

.lp-photo-crop-group{
  display:grid;
  gap:10px;
}

.lp-photo-crop-group-label{
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:var(--text-xs);
  font-weight:700;
  color:var(--muted);
}

.lp-photo-crop-group-divider{
  height:1px;
  background:var(--border-lo);
  border:0;
  margin:2px 0;
}

/* Linha de ações de ajuste: rotate × 2, flip × 2, reset (5 cols) */
.lp-photo-crop-controls{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}

.lp-photo-crop-zoom{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.lp-photo-crop-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  min-height:40px;
  padding:0;
  border-radius:var(--radius-md);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font:inherit;
  font-size:18px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover);
}

.lp-photo-crop-icon-btn:hover{
  background-color:rgba(255,255,255,.08);
  border-color:var(--border-hi);
}

.lp-photo-crop-icon-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.lp-photo-crop-icon-btn:active{
  filter:brightness(.92);
}

.lp-photo-crop-icon-btn--reset{
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.10em;
}

/* Resultado: dimensões em pílula sutil */
.lp-photo-crop-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-lo);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:var(--text-md);
  font-weight:700;
  letter-spacing:.02em;
}

/* Bloco de ações no rodapé da sidebar */
.lp-photo-crop-actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ── Família de botões locais (mimics rf-btn) ─────────────── */
.lp-photo-crop-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  height:44px;
  min-height:44px;
  padding:0 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font:inherit;
  font-size:var(--text-md);
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  cursor:pointer;
  white-space:normal;
  text-align:center;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover);
}

.lp-photo-crop-btn:hover{
  background-color:rgba(255,255,255,.08);
  border-color:var(--border-hi);
}

.lp-photo-crop-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.lp-photo-crop-btn:active{
  filter:brightness(.92);
}

.lp-photo-crop-btn:disabled,
.lp-photo-crop-btn[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
}

.lp-photo-crop-btn--compact{
  height:40px;
  min-height:40px;
}

.lp-photo-crop-btn--primary{
  background-color:var(--accent);
  color:#0a141a;
  border-color:rgba(var(--accent-rgb),.6);
  font-weight:700;
  height:48px;
  min-height:48px;
}

.lp-photo-crop-btn--primary:hover{
  background-color:var(--accent-hi);
  border-color:var(--accent-hi);
  color:#0a141a;
}

.lp-photo-crop-btn--gold{
  background-color:rgba(var(--gold-rgb),.14);
  color:var(--gold-hi);
  border-color:rgba(var(--gold-rgb),.42);
  font-weight:700;
}

.lp-photo-crop-btn--gold:hover{
  background-color:rgba(var(--gold-rgb),.24);
  border-color:rgba(var(--gold-rgb),.6);
  color:var(--gold-hi);
}

.lp-photo-crop-btn--ghost{
  background:transparent;
  border-color:var(--border-mid);
  color:var(--muted);
}

.lp-photo-crop-btn--ghost:hover{
  color:var(--text);
  background-color:rgba(255,255,255,.04);
  border-color:var(--border-hi);
}

.lp-photo-crop-btn--danger-soft{
  background:transparent;
  border-color:rgba(212,85,85,.30);
  color:#ed8a8a;
}

.lp-photo-crop-btn--danger-soft:hover{
  background-color:rgba(212,85,85,.10);
  border-color:rgba(212,85,85,.50);
  color:#ed8a8a;
}

/* ── Stage de preview (direita) ───────────────────────────── */
.lp-photo-crop-stage-wrap{
  min-width:0;
  min-height:0;
  display:flex;
  padding:16px;
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  border-radius:var(--radius-2xl);
}

.lp-photo-crop-stage{
  position:relative;
  flex:1;
  width:100%;
  height:clamp(360px,62dvh,760px);
  min-height:0;
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--border-lo);
  /* Xadrez claro idêntico ao .rf-preview-stage para evidenciar
     transparência — base #f3f6fb, quadrados em tom mais escuro. */
  background-color:#f3f6fb;
  background-image:
    linear-gradient(45deg,rgba(20,29,43,.08) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(20,29,43,.08) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(20,29,43,.08) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(20,29,43,.08) 75%);
  background-size:24px 24px;
  background-position:0 0, 0 12px, 12px -12px, -12px 0;
}

#photoCropImage{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:center center;
  user-select:none;
  pointer-events:none;
  max-width:none;
  max-height:none;
  will-change:transform,width,height;
}

.lp-photo-crop-selection{
  position:absolute;
  border:2px solid var(--accent);
  background:rgba(var(--accent-rgb),.06);
  box-shadow:0 0 0 9999px rgba(7,10,16,.48);
  cursor:move;
  touch-action:none;
}

.lp-photo-crop-selection[hidden]{
  display:none;
}

.lp-photo-crop-selection.is-circle{
  border-radius:50%;
}

.lp-photo-crop-handle{
  position:absolute;
  width:14px;
  height:14px;
  padding:0;
  border-radius:var(--radius-xs);
  border:2px solid #fff;
  background:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  touch-action:none;
}

.lp-photo-crop-handle--nw{top:-8px;left:-8px;cursor:nwse-resize}
.lp-photo-crop-handle--ne{top:-8px;right:-8px;cursor:nesw-resize}
.lp-photo-crop-handle--sw{bottom:-8px;left:-8px;cursor:nesw-resize}
.lp-photo-crop-handle--se{bottom:-8px;right:-8px;cursor:nwse-resize}

/* ── Overlay de status (aguardando remoção de fundo) ──────────
   #photoCropStatus se torna o overlay full-stage com spinner.
   JS controla via [hidden], textContent e .is-error.            */
.lp-photo-proc-status{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px;
  text-align:center;
  background:rgba(4,8,14,.74);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--text);
  font-size:var(--text-md);
  font-weight:600;
  line-height:1.45;
}

.lp-photo-proc-status[hidden]{
  display:none;
}

.lp-photo-proc-status::before{
  content:'';
  width:56px;
  height:56px;
  border-radius:var(--radius-pill);
  border:4px solid rgba(255,255,255,.12);
  border-top-color:var(--accent-hi);
  animation:lp-photo-crop-spin .8s linear infinite;
}

.lp-photo-proc-status.is-error{
  color:#ed8a8a;
}

.lp-photo-proc-status.is-error::before{
  border-top-color:#ed8a8a;
  animation:none;
}

@keyframes lp-photo-crop-spin{
  to{transform:rotate(360deg);}
}

/* ── Botões danger (.lp-mini-btn-danger / -x) — usados também no
      botão "Remover Imagem" do card (app.js). Mantidos fora do bloco
      do modal pra não acoplar visualmente. ────────────────────── */
.lp-mini-btn-danger{
  border-color:rgba(220,90,90,.3);
}

.lp-mini-btn-danger:hover{
  border-color:rgba(220,90,90,.45);
  background:rgba(220,90,90,.12);
}

.lp-mini-btn-danger-x{
  color:var(--danger);
  border-color:rgba(220,90,90,.35);
}

.lp-mini-btn-danger-x:hover{
  background:rgba(220,90,90,.14);
  border-color:var(--danger);
}

.lp-modal-dialog-confirm{
  width:min(560px,calc(100vw - 36px));
}

.lp-modal-body-confirm{
  padding:26px 24px 28px;
}

.lp-confirm-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ── Padronização estética dos modais de confirmação ────────────
   Inspirado em shared/remover-fundo.css (.rf-btn--primary/--ghost):
   botão "Sim/Confirmar" em teal (accent), botão "Não/Cancelar" em
   ghost neutro. Aplica a TODOS os usos de .lp-confirm-actions
   (confirmActionModal, saveArteProntaModal, photoBgDownloadConfirmModal,
   fileNameModal). Override escopado — não afeta os botões fora desses
   contextos. */
.lp-confirm-actions .lp-primary-btn{
  height:44px;
  min-height:44px;
  padding:0 18px;
  border-radius:var(--radius-md);
  background:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.6);
  color:#0a141a;
  box-shadow:none;
  font-weight:700;
  letter-spacing:0;
  transition:background-color var(--ease-hover),border-color var(--ease-hover);
}

.lp-confirm-actions .lp-primary-btn:hover{
  background:var(--accent-hi);
  border-color:var(--accent-hi);
  color:#0a141a;
}

.lp-confirm-actions .lp-primary-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.lp-confirm-actions .lp-primary-btn:active{
  filter:brightness(.92);
}

.lp-confirm-actions .lp-mini-btn-ghost{
  height:44px;
  min-height:44px;
  padding:0 18px;
  border-radius:var(--radius-md);
  background:transparent;
  border:1px solid var(--border-mid);
  color:var(--muted);
  font-size:var(--text-md);
  font-weight:600;
  letter-spacing:0;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover);
}

.lp-confirm-actions .lp-mini-btn-ghost:hover{
  color:var(--text);
  background-color:rgba(255,255,255,.04);
  border-color:var(--border-hi);
}

.lp-confirm-actions .lp-mini-btn-ghost:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.lp-file-name-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}

.lp-file-name-ext{
  min-width:64px;
  padding:11px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:var(--gold-2);
  font-weight:800;
  text-align:center;
}

.lp-modal-search{
  margin-bottom:16px;
}

.lp-modal-search input{
  width:100%;
  height:40px;
  min-height:40px;
  padding:0 14px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font-size:var(--text-md);
  line-height:1;
  outline:none;
  transition:border-color var(--ease-hover),box-shadow var(--ease-hover);
}
.lp-modal-search input:focus{
  border-color:rgba(var(--gold-rgb),.50);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.10);
}
.lp-modal-search input::placeholder{
  color:var(--muted-2);
}

.lp-product-grid,
.lp-icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  align-content:start;
  gap:14px;
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:6px;
}

.lp-product-grid{
  grid-auto-rows:minmax(228px,auto);
}

.lp-grid-loading{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 0;
}
.lp-grid-loading::after{
  content:'';
  width:32px;
  height:32px;
  border:3px solid rgba(255,255,255,.1);
  border-top-color:var(--gold-2);
  border-radius:50%;
  animation:lp-spin .7s linear infinite;
}
@keyframes lp-spin{to{transform:rotate(360deg)}}

.lp-arte-pronta-item{
  position:relative;
  display:contents;
}
.lp-arte-pronta-item .lp-icon-tile{
  width:100%;
}

.lp-icon-tile-pack{
  border-color:rgba(var(--accent-rgb),.22);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.09),rgba(255,255,255,.025));
}

.lp-arte-pronta-kind{
  display:block;
  margin-top:5px;
  color:var(--teal);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lp-arte-pronta-delete{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:none;
  background:rgba(200,50,50,.82);
  color:#fff;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2;
  padding:0;
  transition:background .15s;
}
.lp-arte-pronta-item:hover .lp-arte-pronta-delete{
  display:flex;
}
.lp-arte-pronta-delete:hover{
  background:rgba(200,50,50,1);
}

/* wrapper para posicionamento relativo do botao excluir */
#arteProntaGrid .lp-arte-pronta-item{
  display:block;
  position:relative;
}

.lp-product-thumb,
.lp-icon-tile{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  overflow:clip;
  cursor:pointer;
  transition:border-color var(--ease-hover),background-color var(--ease-hover),box-shadow var(--ease-hover);
}

.lp-product-thumb{
  height:100%;
  min-height:228px;
}

.lp-product-thumb:hover,
.lp-icon-tile:hover{
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}

.lp-product-thumb img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:124px;
}

.lp-product-thumb-media,
.lp-icon-tile-media{
  display:grid;
  place-items:center;
  padding:16px;
  min-height:138px;
  border-bottom:1px solid var(--border-lo);
}

.lp-product-thumb-media{
  background:#f3f4f7;
  flex:0 0 152px;
}

.lp-icon-tile-media{
  background:#f3f4f7;
}

.lp-product-thumb span,
.lp-icon-tile span{
  display:block;
  padding:12px 14px;
  font-size:var(--text-md);
  font-weight:600;
  color:var(--text);
  line-height:1.35;
}

.lp-product-thumb-copy{
  padding:10px 11px 12px;
  min-height:56px;
}

.lp-product-thumb-copy span{
  padding:0;
  font-weight:600;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.lp-grid-empty{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px;
  border-radius:var(--radius-lg);
  border:1px dashed rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.lp-grid-empty strong{
  font-size:12px;
}

.lp-grid-empty span{
  padding:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}


/* ── FIELD HEAD (label + reset button row) ── */
.lp-field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.lp-reset-btn{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  font-size:var(--text-md);
  font-weight:700;
  color:var(--muted);
  letter-spacing:0;
  padding:0;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,.03);
  transition:color var(--ease-hover),border-color var(--ease-hover),background-color var(--ease-hover);
}

.lp-reset-btn:hover{
  color:var(--gold-2);
  border-color:rgba(var(--gold-rgb),.28);
}

/* ── ICON DISABLE ROW ── */
.lp-icon-disable-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  transition:border-color .14s,background .14s;
  cursor:pointer;
  text-align:left;
}

.lp-icon-disable-row.active{
  border-color:rgba(241,172,216,.22);
  background:rgba(241,172,216,.06);
}

.lp-icon-disable-icon{
  font-size:15px;
  flex-shrink:0;
  opacity:.7;
}

.lp-icon-disable-label{
  flex:1;
  font-size:12px;
  font-weight:600;
  color:var(--text);
}

/* ── FONT PICKER (exact port from termicos) ── */
.font-picker{
  position:relative;
  width:100%;
}

.font-picker-trigger{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:border-color .14s;
}

.font-picker-trigger:hover{
  border-color:rgba(var(--gold-rgb),.3);
}

.font-picker-cur{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  text-align:left;
}

.font-picker-arrow{
  color:var(--muted);
  font-size:12px;
  flex-shrink:0;
}

.font-picker-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  display:none;
  z-index:30;
  max-height:280px;
  overflow-y:auto;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,#1e1927,#120f17);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}

.font-picker-dropdown.open{
  display:block;
}

.font-picker-option{
  display:block;
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:16px;
  line-height:1.3;
  cursor:pointer;
  color:var(--text);
  background:none;
  border-top:none;
  border-left:none;
  border-right:none;
}

.font-picker-option:last-child{
  border-bottom:none;
}

.font-picker-option:hover,
.font-picker-option.active{
  background:rgba(var(--gold-rgb),.08);
  color:var(--gold-2);
}

/* ── CTRL PAIR (size + rotation side by side blocks) ── */
.lp-ctrl-pair{
  display:flex;
  gap:8px;
}

.lp-ctrl-block{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:center;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-md);
  padding:9px 6px 8px;
  background:rgba(255,255,255,.02);
}

.lp-ctrl-block label{
  margin:0;
  color:var(--muted);
  font-size:8px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
}

/* ── ALIGN ROW VARIANTS ── */
.lp-align-row-2{
  grid-template-columns:repeat(2,1fr);
}

/* ── SIZE/ROT ROW ── */
.lp-size-rot-row{
  display:flex;
  align-items:center;
  gap:6px;
}

.lp-sz-btn{
  width:32px;
  height:32px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:16px;
  font-weight:700;
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:border-color .14s ease,background .14s ease;
}

.lp-sz-btn:hover{
  border-color:rgba(var(--gold-rgb),.32);
  background:rgba(var(--gold-rgb),.1);
}

.lp-sz-val{
  min-width:32px;
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}

.lp-rot-btn{
  padding:0 9px;
  height:32px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:var(--teal);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  flex-shrink:0;
  transition:border-color .14s ease,background .14s ease;
}

.lp-rot-btn:hover{
  border-color:rgba(var(--accent-rgb),.32);
  background:rgba(var(--accent-rgb),.08);
}

.lp-rot-val{
  margin-left:4px;
  font-size:11px;
  color:var(--muted);
}

.lp-modal-dialog-expand{
  width:min(1620px,calc(100vw - 16px));
  height:calc(100vh - 16px);
  max-height:calc(100vh - 16px);
  margin:8px auto;
  display:flex;
  flex-direction:column;
}

.lp-expand-body{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  grid-template-rows:minmax(0,1fr);
  gap:0;
  padding:0;
  overflow:hidden;
  border-radius:0 0 var(--radius-2xl) var(--radius-2xl);
}

.lp-expand-canvas-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  height:100%;
  overflow:hidden;
  background:var(--overlay-strong);
}

#expandCanvas{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:0 20px 80px rgba(0,0,0,.7);
  cursor:default;
  touch-action:none;
}

.lp-expand-sidebar{
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-left:1px solid rgba(255,255,255,.07);
  background:var(--panel);
}

.lp-expand-sidebar-inner{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:10px 10px 40px;
}

#expandInspectorPanels{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.lp-tool-icon,
.lp-align-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
}

.lp-tool-icon svg,
.lp-align-icon svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lp-tool-icon--letter{
  font-weight:700;
  font-size:13px;
  line-height:1;
}

.lp-inspector .lp-accordion:first-child,
#expandInspectorPanels .lp-accordion:first-child{
  margin-top:0;
}

.lp-icon-tile{
  padding:14px;
  display:grid;
  justify-items:center;
  gap:10px;
}

.lp-icon-tile img{
  width:88px;
  height:88px;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));
}

/* ── SWASH TOGGLE ROW ── */
.lp-swash-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 12px;
  margin:4px 0 6px;
  background:rgba(var(--gold-rgb),.07);
  border:1px solid rgba(var(--gold-rgb),.20);
  border-radius:var(--radius-md);
  color:var(--gold-2);
  font-size:var(--text-sm);
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:background-color var(--ease-hover),border-color var(--ease-hover);
}
.lp-swash-row:hover{background:rgba(var(--gold-rgb),.12);border-color:rgba(var(--gold-rgb),.36)}
.lp-swash-row.active{background:rgba(var(--gold-rgb),.14);border-color:rgba(var(--gold-rgb),.38)}
.lp-swash-icon{font-size:14px;line-height:1}
.lp-swash-label{flex:1}

/* ── GROUP / UNGROUP BUTTONS ── */
.lp-group-row{
  display:flex;
  gap:8px;
  margin:6px 0 4px;
}
.lp-group-btn{
  flex:1;
  padding:7px 8px;
  background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.22);
  border-radius:var(--radius-sm);
  color:var(--teal);
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
  transition:background .15s,border-color .15s;
  white-space:nowrap;
}
.lp-group-btn:hover{background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.38)}
.lp-group-btn.active{
  background:rgba(var(--accent-rgb),.2);
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.18) inset;
}
.lp-group-btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.1);
  color:var(--muted);
}
.lp-group-btn--ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:var(--text)}
.lp-group-btn--ghost.active{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.24);
  color:var(--text);
}

/* ── INSPECTOR HINT TEXT ── */
.lp-inspector-hint{
  font-size:9px;
  color:var(--muted-2);
  line-height:1.5;
  text-align:center;
  margin:4px 0 2px;
  padding:0 4px;
}

/* ── COLLAPSE PANEL (Remover Fundo) ── */
.lp-collapse-panel{
  border:1px solid var(--stroke);
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin:6px 0;
}

.lp-collapse-trigger{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  padding:9px 12px;
  background:var(--panel-3);
  border:none;
  color:var(--text);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
  text-align:left;
  transition:background .15s;
}
.lp-collapse-trigger:hover{background:rgba(255,255,255,.05)}
.lp-collapse-trigger.open{background:rgba(var(--gold-rgb),.08)}

.lp-collapse-label{flex:1;text-align:left}

.lp-collapse-badge{
  font-size:9px;
  font-weight:500;
  padding:2px 7px;
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.07);
  color:var(--muted);
  letter-spacing:.03em;
  white-space:nowrap;
}
.lp-collapse-badge.done{
  background:rgba(76,175,80,.18);
  color:var(--success);
}
.lp-collapse-badge.svg{
  background:rgba(var(--accent-rgb),.14);
  color:var(--teal);
}

.lp-collapse-arrow{
  font-size:9px;
  color:var(--muted-2);
  transition:transform .2s;
}
.lp-collapse-trigger.open .lp-collapse-arrow{transform:rotate(180deg)}

.lp-collapse-body{
  display:none;
  padding:10px 12px 12px;
  background:rgba(0,0,0,.18);
  border-top:1px solid var(--stroke);
}
.lp-collapse-body.open{display:block}

.lp-collapse-desc{
  font-size:10px;
  color:var(--muted);
  line-height:1.55;
  margin:0 0 10px;
}
.lp-collapse-desc strong{color:var(--text)}

.lp-collapse-hint{
  font-size:9px;
  color:var(--muted-2);
  margin:4px 0 0;
  line-height:1.4;
}

/* ── Vetorização compacta do inspector de Elementos ───────────
   Substitui o painel antigo com várias settings por um controle
   simples: toggle "Threshold Automático" + slider manual + botão
   "Melhorar Imagem com IA" + stats. Estética alinhada ao módulo
   Vetorização (shared/vetorizacao.{css,js}) com proporções
   compactas para caber na sidebar de 320px. */
.lp-icon-vec-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-lo);
  background:rgba(255,255,255,.03);
  margin-bottom:10px;
}

.lp-icon-vec-toggle-label{
  display:grid;
  gap:2px;
  flex:1;
  min-width:0;
  cursor:pointer;
}

.lp-icon-vec-toggle-label strong{
  color:var(--text);
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:0;
}

.lp-icon-vec-toggle-label span{
  color:var(--muted);
  font-size:var(--text-xs);
  line-height:1.35;
}

.lp-icon-vec-switch{
  position:relative;
  display:inline-block;
  width:36px;
  height:20px;
  flex:0 0 auto;
}

.lp-icon-vec-switch input{
  opacity:0;
  width:0;
  height:0;
}

.lp-icon-vec-switch-slider{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:background-color var(--ease-hover),border-color var(--ease-hover);
}

.lp-icon-vec-switch-slider::before{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  background:var(--text);
  border-radius:var(--radius-pill);
  transition:left var(--ease-hover);
}

.lp-icon-vec-switch input:checked + .lp-icon-vec-switch-slider{
  background:rgba(var(--accent-rgb),.34);
  border-color:rgba(var(--accent-rgb),.6);
}

.lp-icon-vec-switch input:checked + .lp-icon-vec-switch-slider::before{
  left:18px;
}

.lp-icon-vec-switch input:focus-visible + .lp-icon-vec-switch-slider{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.lp-icon-vec-slider-row{
  display:grid;
  gap:6px;
  margin-bottom:10px;
}

.lp-icon-vec-slider-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.lp-icon-vec-slider-value{
  color:var(--accent-hi);
  font-size:var(--text-sm);
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  font-variant-numeric:tabular-nums;
}

.lp-icon-vec-range{
  width:100%;
  height:4px;
  appearance:none;
  background:rgba(255,255,255,.10);
  border-radius:var(--radius-pill);
  outline:none;
}

.lp-icon-vec-range::-webkit-slider-thumb{
  appearance:none;
  width:16px;
  height:16px;
  border-radius:var(--radius-pill);
  background:var(--accent);
  border:2px solid #0a141a;
  cursor:pointer;
}

.lp-icon-vec-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:var(--radius-pill);
  background:var(--accent);
  border:2px solid #0a141a;
  cursor:pointer;
}

.lp-icon-vec-range:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.lp-icon-vec-enhance-btn{
  margin-top:4px;
  height:38px;
  min-height:38px;
}

.lp-icon-vec-enhance-hint{
  margin:6px 0 0;
  color:var(--muted);
  font-size:var(--text-xs);
  line-height:1.4;
  text-align:center;
}

.lp-icon-vec-stats{
  margin:10px 0 0;
  color:var(--muted);
  font-size:var(--text-xs);
  line-height:1.4;
  text-align:center;
}

.lp-icon-vec-spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:var(--radius-pill);
  border:2px solid rgba(255,255,255,.16);
  border-top-color:var(--accent-hi);
  animation:lp-photo-crop-spin .8s linear infinite;
}

/* ── VECTORIZE BUTTON ── */
.lp-btn-vectorize{
  display:block;
  width:100%;
  padding:9px 14px;
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.22),rgba(var(--gold-rgb),.1));
  border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:var(--radius-sm);
  color:var(--gold-2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  text-align:center;
  transition:background .2s,border-color .2s,opacity .2s;
  margin-bottom:6px;
}
.lp-btn-vectorize:hover{
  background:linear-gradient(135deg,rgba(var(--gold-rgb),.35),rgba(var(--gold-rgb),.18));
  border-color:rgba(var(--gold-rgb),.55);
}
.lp-btn-vectorize:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ── PROCESS STATUS ── */
.lp-icon-proc-status{
  display:block;
  font-size:9px;
  text-align:center;
  color:var(--muted);
  line-height:1.4;
  margin-top:2px;
}

/* ── REMOVE ICON BUTTON ── */
.lp-remove-icon-btn{
  display:block;
  width:100%;
  padding:7px 12px;
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  text-align:center;
  margin:4px 0 8px;
  transition:border-color .15s,color .15s;
}
.lp-remove-icon-btn:hover{
  border-color:rgba(220,100,100,.45);
  color:#e07070;
}

/* ── Toolbar text group: column layout ── */
.lp-toolbar-group-text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

/* ── Icon section: standalone column block ── */
.lp-icon-section{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.lp-icon-section-head{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:14px;
  flex-wrap:nowrap;
}

.lp-icon-section-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
  flex-shrink:0;
}

.lp-icon-section-sep{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.07);
}

.lp-icon-section-scope-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--muted-2);
  text-transform:uppercase;
  flex-shrink:0;
}

/* iOS-style pill toggle for "Mostrar em Todos" */
.lp-toggle-btn{
  position:relative;
  width:34px;
  height:18px;
  padding:0;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.lp-toggle-btn::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:transform .2s,background .2s;
}
.lp-toggle-btn.active{
  background:rgba(var(--accent-rgb),.35);
  border-color:rgba(var(--accent-rgb),.55);
}
.lp-toggle-btn.active::after{
  transform:translateX(16px);
  background:var(--teal);
}

/* ÍCONE 2 head row */
.lp-icon-section-head--two{
  margin-top:2px;
  padding-top:3px;
  border-top:1px solid rgba(255,255,255,.07);
}

/* XS ghost button for "× Excluir" */
.lp-mini-btn-xs{
  font-size:9px;
  padding:4px 8px;
  line-height:1;
}

/* ── Ícones toolbar group ── */
.lp-toolbar-group-icons{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  overflow:hidden;
}

/* Botões compactos dentro da coluna de ícones */
.lp-toolbar-group-icons .lp-mini-btn{
  padding:6px 10px;
}
.lp-toolbar-group-icons .lp-mini-btn-sm{
  padding:5px 5px;
}

.lp-icon-slot{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}

.lp-icon-slot-add-row{
  display:flex;
  align-items:center;
}

.lp-icon-slot-secondary{
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.07);
}

.lp-icon-slot-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(var(--accent-rgb),.15);
  border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--teal);
  font-size:9px;
  font-weight:700;
  flex-shrink:0;
}

.lp-tb-icon-prev{
  width:28px;
  height:28px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.lp-tb-icon-prev img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.lp-tb-icon-prev--empty{
  background:rgba(255,255,255,.03);
}

.lp-icon-slot-footer{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
  padding-top:2px;
}

/* "Escolher Ícone" accent color */
.lp-mini-btn-teal{
  background:rgba(var(--accent-rgb),.10);
  border-color:rgba(var(--accent-rgb),.32);
  color:var(--accent-hi);
}
.lp-mini-btn-teal:hover{
  background:rgba(var(--accent-rgb),.20);
  border-color:rgba(var(--accent-rgb),.52);
}

.lp-mini-btn-gold{
  background:rgba(var(--gold-rgb),.10);
  border-color:rgba(var(--gold-rgb),.32);
  color:var(--gold-2);
}
.lp-mini-btn-gold:hover{
  background:rgba(var(--gold-rgb),.20);
  border-color:rgba(var(--gold-rgb),.52);
}

/* "Mostrar em Todos" toggle */
.lp-scope-toggle{
  padding:7px 11px;
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md);
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.lp-scope-toggle.active{
  background:rgba(var(--accent-rgb),.14);
  border-color:rgba(var(--accent-rgb),.35);
  color:var(--teal);
}
.lp-scope-toggle:hover:not(.active){
  background:rgba(255,255,255,.05);
  color:var(--fg);
}

.lp-icon-action-row{
  display:flex;
  gap:5px;
  margin-bottom:7px;
  flex-wrap:wrap;
}

.lp-icon-action-row--inspector{
  margin-bottom:8px;
  flex-direction:column;
}
.lp-icon-action-row--inspector .lp-mini-btn-teal{
  width:100%;
  justify-content:center;
}
.lp-icon-slot .lp-mini-btn-teal{
  flex:1 1 100%;
  width:100%;
}

.lp-icon-action-row--single{
  width:100%;
}

.lp-icon-local-preview{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.03);
}

.lp-icon-local-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.lp-icon-local-meta strong{
  font-size:11px;
  color:var(--text);
  line-height:1.3;
  word-break:break-word;
}

.lp-icon-local-meta span{
  font-size:9px;
  color:var(--muted);
  line-height:1.4;
}

.lp-mini-btn-sm{
  flex:1;
  height:28px;
  min-height:28px;
  padding:0 10px;
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:0;
  border-radius:var(--radius-xs);
  white-space:nowrap;
}

.lp-mini-btn-ghost{
  background:transparent;
  border-color:var(--border-mid);
  color:var(--muted);
}
.lp-mini-btn-ghost:hover{
  background:rgba(212,85,85,.10);
  border-color:rgba(212,85,85,.32);
  color:#e07070;
}

.lp-mini-btn-block{
  width:100%;
  justify-content:center;
  flex:1 1 100%;
}

.lp-icon-delete-x{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  flex-shrink:0;
  background:transparent;
  border:1px solid rgba(220,90,90,.3);
  border-radius:var(--radius-md);
  color:rgba(220,90,90,.7);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.lp-icon-delete-x:hover{
  background:rgba(220,90,90,.12);
  border-color:rgba(220,90,90,.6);
  color:#e07070;
}

.lp-scope-seg{
  display:flex;
  gap:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

.lp-scope-btn{
  flex:1;
  padding:7px 8px;
  background:transparent;
  border:none;
  border-radius:0;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  transition:background .15s,color .15s;
  text-align:center;
}
.lp-scope-btn:first-child{border-right:1px solid rgba(255,255,255,.08)}
.lp-scope-btn.active{
  background:rgba(var(--accent-rgb),.14);
  color:var(--teal);
}
.lp-scope-btn:hover:not(.active){
  background:rgba(255,255,255,.05);
  color:var(--fg);
}

.lp-toolbar--art-settings #faceModeLabel{
  order:-1;
  margin-right:10px;
}

/* ── Global config rows (Cor column) ── */
.lp-gcfg{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}

.lp-gcfg-global{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

.lp-gcfg-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.lp-gcfg-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
  flex:1;
  min-width:0;
  white-space:nowrap;
}

.lp-gcfg-row-cards{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:flex-start;
  gap:4px;
}

.lp-gcfg-row-cards .lp-gcfg-label{
  white-space:nowrap;
  line-height:1;
}

.lp-gcfg-row-copy{
  display:grid;
  grid-template-columns:max-content auto;
  align-items:center;
  justify-content:start;
  justify-items:start;
  gap:5px;
  width:fit-content;
  max-width:100%;
  min-height:24px;
  padding:2px 6px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
}

.lp-gcfg-copy-stack{
  display:grid;
  gap:3px;
  justify-items:start;
  align-content:start;
}

#applyInitialContentRow .lp-toggle-btn,
#useInitialTextRow .lp-mini-btn{
  justify-self:start;
  margin-left:0;
}

.lp-gcfg-label-copy{
  flex:1;
  min-width:max-content;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  line-height:1.05;
  font-size:8px;
  letter-spacing:.02em;
}

.lp-stepper{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  flex-shrink:0;
  justify-self:start;
}

.lp-stepper-btn{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:15px;
  font-weight:700;
  transition:border-color var(--ease-hover),background-color var(--ease-hover),opacity var(--ease-hover);
}

.lp-stepper-btn:hover:not(:disabled){
  border-color:rgba(var(--gold-rgb),.32);
  background:rgba(var(--gold-rgb),.10);
}

.lp-stepper-btn:disabled{
  opacity:.38;
  cursor:default;
}

.lp-stepper-value{
  min-width:28px;
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--gold-2);
}

/* ── Remove Text 2 button ── */
.lp-mini-btn-remove-text{
  background:transparent;
  border-color:rgba(220,90,90,.25);
  color:rgba(220,120,120,.85);
  font-size:10px;
  padding:8px 10px;
}
.lp-mini-btn-remove-text:hover{
  background:rgba(220,90,90,.14);
  border-color:rgba(220,90,90,.55);
  color:#e07070;
}

.lp-engine-switch{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.lp-engine-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.72);
  border-radius:var(--radius-md);
  padding:10px 12px;
  font:600 11px/1 'DM Sans',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .18s ease;
  text-align:center;
}

.lp-engine-btn:hover{
  border-color:rgba(var(--accent-rgb),.42);
  background:rgba(var(--accent-rgb),.08);
  color:var(--text);
}

.lp-engine-btn.active{
  border-color:rgba(var(--accent-rgb),.42);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(109,160,255,.12));
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  color:#ffffff;
}

@media(max-width:1500px){
  .lp-content-row{
    grid-template-columns:var(--sidenav-w) var(--content-panel-w) minmax(0,1fr);
  }
}

@media(max-width:1180px){
  .lp-art-settings-head{
    flex-wrap:wrap;
  }

  .lp-art-settings-copy{
    white-space:normal;
  }

  .lp-toolbar--art-settings .lp-toolbar-group-face{
    padding-right:18px;
    margin-right:18px;
  }

  .lp-art-face-control{
    min-width:198px;
  }

  .lp-art-face-btn{
    min-width:98px;
    padding:9px 14px;
  }

  .lp-art-settings-count{
    padding-right:18px;
    margin-right:0;
  }

  .lp-art-settings-copy-stack{
    gap:12px;
    padding-right:18px;
    flex:1 1 320px;
  }

  .lp-art-settings-copy-row{
    gap:10px;
  }

  .lp-modal{
    padding:12px;
  }

  .lp-modal-dialog{
    width:min(1100px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    border-radius:var(--radius-2xl);
  }

  .lp-modal-body-products{
    grid-template-columns:220px minmax(0,1fr);
    gap:16px;
  }

  .lp-photo-crop-layout{
    grid-template-columns:300px minmax(0,1fr);
  }

  .lp-photo-crop-stage{
    height:clamp(340px,56dvh,640px);
  }
}

@media(max-height:900px){
  .lp-modal{
    padding:12px;
  }

  .lp-modal-dialog{
    max-height:calc(100dvh - 24px);
    border-radius:var(--radius-2xl);
  }

  .lp-modal-side{
    max-height:none;
  }

  .lp-product-grid,
  .lp-icon-grid{
    max-height:none;
  }

  .lp-photo-crop-layout{
    grid-template-columns:280px minmax(0,1fr);
  }

  .lp-photo-crop-stage{
    height:clamp(300px,46dvh,520px);
  }

  .lp-photo-crop-sidebar{
    padding:18px;
  }
}

@media(max-height:760px){
  .lp-modal-head{
    padding:16px 18px 14px;
  }

  .lp-modal-head h2{
    font-size:21px;
  }

  .lp-modal-body{
    padding:18px;
  }

  .lp-modal-body-products{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }

  .lp-modal-side{
    flex-direction:row;
    gap:8px;
    overflow:auto;
    padding-right:0;
    padding-bottom:4px;
  }

  .lp-modal-side > div{
    display:flex;
    gap:8px;
  }

  .lp-folder-item{
    flex:0 0 auto;
    min-width:max-content;
    white-space:nowrap;
  }

  .lp-product-grid,
  .lp-icon-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    padding-right:0;
  }

  .lp-photo-crop-layout{
    grid-template-columns:220px minmax(0,1fr);
  }

  .lp-photo-crop-stage-wrap{
    padding:14px;
  }

  .lp-photo-crop-stage{
    height:clamp(260px,42dvh,460px);
  }

  .lp-photo-crop-sidebar{
    padding:14px 16px 16px;
  }

  .lp-photo-crop-controls{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:1280px){
  .lp-topbar-shell{
    padding:0 8px;
  }

  .lp-content-row{
    grid-template-columns:var(--sidenav-w) var(--content-panel-w) minmax(0,1fr);
  }

  .lp-right-dock{
    width:100%;
    justify-self:stretch;
    display:grid;
    grid-template-columns:minmax(0,1fr) 94px;
    align-items:start;
  }

  .lp-right-menu{
    width:94px;
    min-width:94px;
  }

  .lp-sidebar-right{
    width:auto;
    min-width:0;
  }

  .lp-top-menu-scroll{
    gap:6px;
  }

  .lp-toolbar{
    width:max-content;
    min-width:max-content;
  }

  .lp-toolbar--sidebar{
    width:100%;
    min-width:0;
  }

  .lp-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lp-main,
  .lp-main.lp-main--with-template-menu{
    grid-template-columns:1fr;
  }

  .lp-termicos-menu-inner{
    height:auto;
    flex-direction:row;
    align-items:center;
    padding:0;
  }

  .lp-termicos-menu-btn{
    min-height:auto;
    writing-mode:horizontal-tb;
    transform:none;
    padding:8px 12px;
    font-size:9px;
  }

  .lp-expand-body{
    grid-template-columns:1fr;
  }

  .lp-photo-crop-layout{
    grid-template-columns:220px minmax(0,1fr);
  }

  .lp-photo-crop-stage{
    min-height:380px;
    height:clamp(300px,52dvh,600px);
  }

  .lp-photo-crop-sidebar{
    padding:16px;
  }

  .lp-photo-crop-controls{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:1024px){
  .lp-toolbar--inspector-only{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .lp-sidebar-right{
    width:auto;
    min-width:0;
  }
}

@media(max-width:880px){
  .lp-app{padding:0}
  .lp-art-settings-strip{
    padding:10px;
    gap:8px;
  }
  .lp-art-settings-kicker{
    font-size:8px;
    letter-spacing:.14em;
  }
  .lp-art-settings-copy{
    font-size:10px;
  }
  .lp-toolbar--art-settings{
    gap:0;
  }
  .lp-toolbar--art-settings .lp-toolbar-group{
    padding:4px 0;
    gap:8px;
  }
  .lp-toolbar--art-settings .lp-scope-seg-face{
    min-width:0;
  }
  .lp-toolbar--art-settings .lp-toolbar-group-face{
    padding-right:14px;
    margin-right:14px;
  }
  .lp-art-face-control{
    min-width:168px;
  }

  .lp-art-face-btn{
    min-width:84px;
    padding:8px 12px;
  }

  .lp-toolbar--art-settings .lp-toolbar-group-cards{
    gap:14px;
  }

  .lp-art-settings-count{
    padding-right:14px;
  }

  .lp-art-settings-copy-stack{
    gap:10px;
    padding-right:14px;
  }

  .lp-art-settings-copy-row{
    gap:8px;
  }

  .lp-toolbar--art-settings .lp-gcfg-label-copy{
    letter-spacing:.05em;
  }
  .lp-topbar-shell{
    padding:5px 6px;
  }
  .lp-top-menu-scroll{
    gap:5px;
    padding-bottom:2px;
  }
  .lp-card-grid{grid-template-columns:1fr}
  .lp-inline-actions--triple{grid-template-columns:1fr}
  .lp-photo-crop-stage{min-height:340px}
  .lp-modal-body-products{grid-template-columns:1fr}
  .lp-toolbar--inspector-only{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Export progress modal ── */
.lp-export-progress-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,3,10,.70);backdrop-filter:blur(14px);
}
.lp-export-progress-dialog{
  background:var(--surface-4);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-xl);
  padding:32px 40px;
  min-width:300px;max-width:380px;width:90%;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06);
}
.lp-export-progress-title{
  font-family:var(--title-font);
  font-size:var(--text-xl);
  font-weight:600;
  color:var(--gold-hi);
  text-align:center;
  letter-spacing:.06em;
}
.lp-export-progress-bar-track{
  height:6px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);overflow:hidden;
}
.lp-export-progress-bar-fill{
  height:100%;width:0%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-hi) 100%);
  transition:width .25s ease;
}
.lp-export-progress-label{
  font-size:var(--text-sm);
  color:var(--muted);
  text-align:center;
  min-height:16px;
}

/* ── Toast notifications ── */
.lp-toast-container{
  position:fixed;bottom:24px;right:24px;z-index:10000;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  pointer-events:none;
}
.lp-toast{
  padding:12px 18px;
  border-radius:var(--radius-md);
  font-size:var(--text-md);
  font-weight:500;
  color:#fff;
  max-width:340px;
  word-break:break-word;
  line-height:1.45;
  opacity:0;
  transform:translateY(8px) scale(.97);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-md);
}
.lp-toast--visible{opacity:1;transform:translateY(0) scale(1);}
.lp-toast--error{background:rgba(180,60,60,.92);border-color:rgba(220,90,90,.3);}
.lp-toast--success{background:rgba(50,140,80,.92);border-color:rgba(76,175,80,.3);}
.lp-toast--info{background:rgba(30,100,200,.92);border-color:rgba(56,167,255,.3);}

@media (hover:none), (pointer:coarse){
  .lp-card-expand{
    opacity:1;
    background:var(--overlay-medium);
  }

  .lp-arte-pronta-delete{
    display:flex;
  }

  .lp-stepper-btn{
    min-width:44px;
    min-height:44px;
  }

  .lp-icon-delete-x,
  .lp-tb-icon-prev{
    min-width:44px;
    min-height:44px;
  }
}

@media(max-width:768px){
  html,
  body{
    height:auto;
    min-height:100%;
    overflow:auto;
    overflow-x:hidden;
  }

  body{
    overscroll-behavior-y:contain;
  }

  :root{
    --topbar-offset:0px;
  }

  .lp-app{
    height:auto;
    min-height:100dvh;
    overflow:visible;
    padding:
      calc(env(safe-area-inset-top,0px) + 10px)
      calc(env(safe-area-inset-right,0px) + 10px)
      calc(env(safe-area-inset-bottom,0px) + 14px)
      calc(env(safe-area-inset-left,0px) + 10px);
  }

  .lp-topbar{
    position:static;
    left:auto;
    right:auto;
    top:auto;
  }

  .lp-topbar-shell,
  .lp-brand-panel,
  .lp-panel,
  .lp-toolbar,
  .lp-stage,
  .lp-sidebar-right{
    border-radius:var(--radius-xl);
  }

  .lp-brand-panel{
    min-height:auto;
    padding:0;
  }

  .lp-brand-panel h1{
    white-space:normal;
    font-size:18px;
    line-height:1.15;
  }

  .lp-brand-copy p{
    font-size:11px;
  }

  .lp-topbar-shell{
    gap:8px;
    padding:5px 6px;
  }

  .lp-top-menu-scroll{
    gap:6px;
    padding:0 0 2px;
  }

  .lp-layout,
  .lp-content-row,
  .lp-main,
  .lp-main.lp-main--with-template-menu,
  .lp-expand-body{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    overflow:visible;
  }

  .lp-sidebar-left,
  .lp-workspace,
  .lp-content-row,
  .lp-main,
  .lp-stage,
  .lp-right-dock,
  .lp-sidebar-right,
  .lp-inspector{
    min-height:auto;
    max-height:none;
    overflow:visible;
  }

  .lp-sidebar-left,
  .lp-workspace{
    gap:10px;
  }

  .lp-art-settings-head{
    align-items:flex-start;
  }

  .lp-art-settings-copy{
    display:none;
  }

  .lp-right-dock{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }

  .lp-right-menu{
    width:100%;
    min-width:0;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    padding:10px;
    position:sticky;
    bottom:0;
    z-index:10;
  }

  /* No layout horizontal (mobile), os tiles do menu lateral viram blocos fixos
     de 76px em vez de preencher a largura. */
  .lp-right-menu .tile.tile--full{
    width:76px;
    min-width:76px;
    min-height:56px;
    flex:0 0 auto;
  }

  .lp-right-menu-divider{
    width:100%;
  }

  .lp-panel{
    padding:14px;
  }

  .lp-action-list .lp-action-btn{
    min-height:48px;
  }

  .lp-product-chip strong{
    overflow-wrap:anywhere;
  }

  .lp-toolbar-shell{
    overflow-x:auto;
    overflow-y:hidden;
  }

  .lp-toolbar{
    width:max-content;
    min-width:100%;
  }

  .lp-toolbar--sidebar{
    width:100%;
    min-width:0;
  }

  .lp-toolbar--inspector-only{
    grid-template-columns:minmax(0,1fr);
  }

  .lp-color-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }

  .lp-color-row::-webkit-scrollbar{
    display:none;
  }

  .lp-stepper{
    width:100%;
    justify-content:space-between;
  }

  .lp-icon-slot{
    gap:8px;
  }

  .lp-gcfg-row-cards .lp-stepper{
    justify-self:stretch;
  }

  .lp-icon-section-head{
    flex-wrap:wrap;
    row-gap:6px;
  }

  .lp-icon-section-sep{
    display:none;
  }

  .lp-icon-slot .lp-mini-btn{
    flex:1 1 140px;
    min-height:42px;
  }

  .lp-icon-slot .lp-icon-delete-x,
  .lp-icon-slot .lp-tb-icon-prev{
    width:34px;
    height:34px;
  }

  .lp-icon-slot-add-row .lp-mini-btn{
    width:100%;
    min-height:42px;
  }

  .lp-mini-btn,
  .lp-action-btn,
  .lp-secondary-btn,
  .lp-folder-item,
  .lp-stepper-btn,
  .lp-scope-btn,
  .lp-modal-close{
    touch-action:manipulation;
  }

  .lp-stage{
    padding:12px;
  }

  .lp-stage::before{
    inset:12px;
    border-radius:var(--radius-lg);
  }

  .lp-card-grid,
  .lp-card-grid[data-engine]{
    grid-template-columns:minmax(0,1fr);
    max-width:none;
    gap:12px;
  }

  .lp-card-grid[data-engine] .lp-card--wide,
  .lp-card-grid[data-engine] .lp-card--slim{
    grid-column:auto;
  }

  .lp-card{
    border-radius:var(--radius-xl);
  }

  .lp-card-head,
  .lp-card-foot{
    padding-inline:10px;
  }

  .lp-card-expand{
    top:8px;
    left:8px;
    width:34px;
    height:34px;
    border-radius:var(--radius-md);
    opacity:1;
  }

  .lp-sidebar-right{
    padding:12px;
  }

  .lp-inspector-actions-row--main,
  .lp-inspector-actions-row--align,
  .lp-tool-row,
  .lp-align-row,
  .lp-photo-crop-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lp-inline-grid,
  .lp-file-name-row{
    grid-template-columns:minmax(0,1fr);
  }

  .lp-export-bar{
    grid-template-columns:minmax(0,1fr);
  }

  .lp-secondary-btn span,
  .lp-secondary-btn small{
    white-space:normal;
  }

  .lp-modal{
    overflow:auto;
    padding:6px;
    -webkit-overflow-scrolling:touch;
  }

  .lp-modal-dialog,
  .lp-modal-dialog-narrow,
  .lp-modal-dialog-crop,
  .lp-modal-dialog-confirm{
    width:100%;
    min-height:calc(100dvh - 12px);
    margin:0 auto;
    border-radius:var(--radius-xl);
    display:flex;
    flex-direction:column;
  }

  .lp-modal-dialog-expand{
    width:100%;
    height:calc(100dvh - 12px);
    max-height:calc(100dvh - 12px);
    margin:0 auto;
    border-radius:var(--radius-xl);
  }

  .lp-modal-head{
    align-items:flex-start;
    gap:12px;
    padding:16px 16px 14px;
    position:sticky;
    top:0;
    z-index:2;
    background:linear-gradient(180deg,rgba(24,20,31,.98),rgba(20,16,27,.96));
    backdrop-filter:blur(10px);
  }

  .lp-modal-head h2{
    font-size:20px;
  }

  .lp-modal-close{
    align-self:flex-end;
  }

  .lp-modal-body,
  .lp-modal-body-confirm,
  .lp-expand-sidebar-inner{
    padding:16px;
  }

  .lp-modal-body{
    flex:1;
    min-height:0;
  }

  .lp-modal-content{
    overflow:visible;
  }

  .lp-modal-body-products{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }

  .lp-modal-side{
    flex-direction:row;
    gap:8px;
    max-height:none;
    overflow:auto;
    padding-right:0;
    padding-bottom:4px;
  }

  .lp-modal-side > div{
    display:flex;
    gap:8px;
  }

  .lp-folder-item{
    flex:0 0 auto;
    min-width:max-content;
    white-space:nowrap;
    padding:11px 13px;
  }

  .lp-product-grid,
  .lp-icon-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:none;
    padding-right:0;
  }

  .lp-product-stage{
    padding:16px;
  }

  .lp-product-drillnav{
    padding:8px 16px;
  }

  .lp-cat-grid{
    grid-template-columns:repeat(2,1fr);
    max-width:none;
    gap:12px;
  }

  .lp-cat-card{
    padding:32px 18px;
    font-size:14px;
  }

  .lp-folder-grid{
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:12px;
  }

  .lp-photo-crop-layout{
    grid-template-columns:minmax(0,1fr);
    min-height:auto;
  }

  .lp-photo-crop-stage-wrap{
    padding:12px;
  }

  .lp-photo-crop-stage{
    min-height:300px;
    height:min(52dvh,420px);
  }

  .lp-photo-crop-sidebar{
    padding:16px;
    gap:14px;
  }

  .lp-photo-crop-handle{
    width:18px;
    height:18px;
  }

  .lp-photo-crop-handle--nw{top:-10px;left:-10px}
  .lp-photo-crop-handle--ne{top:-10px;right:-10px}
  .lp-photo-crop-handle--sw{bottom:-10px;left:-10px}
  .lp-photo-crop-handle--se{bottom:-10px;right:-10px}

  .lp-expand-canvas-wrap{
    min-height:44dvh;
  }

  .lp-expand-sidebar{
    border-left:none;
    border-top:1px solid rgba(255,255,255,.07);
  }

  .lp-toast-container{
    left:10px;
    right:10px;
    bottom:10px;
    align-items:stretch;
  }

  .lp-toast{
    max-width:none;
  }

  /* Sidebar: bottom sheet overlay */
  .lp-sidebar-right:not([hidden]){
    position:fixed;
    bottom:0;
    left:10px;
    right:10px;
    max-height:70vh;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:30;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow:0 -4px 32px rgba(0,0,0,.6);
    padding:16px;
  }

  body:has(.lp-sidebar-right:not([hidden]))::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(8,6,14,.5);
    z-index:29;
    pointer-events:none;
  }
}

@media(max-width:520px){
  .lp-product-grid,
  .lp-icon-grid,
  .lp-inspector-actions-row--main,
  .lp-inspector-actions-row--align,
  .lp-tool-row,
  .lp-align-row{
    grid-template-columns:minmax(0,1fr);
  }

  .lp-photo-crop-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .lp-cat-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .lp-cat-card{
    padding:26px 12px;
    font-size:13px;
    border-radius:var(--radius-lg);
  }

  .lp-folder-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .lp-folder-card-media{
    height:110px;
  }

  .lp-product-search-wrap{
    padding:12px 14px 10px;
  }

  .lp-card-title,
  .lp-card-meta,
  .lp-card-badge{
    letter-spacing:.12em;
  }

  .lp-modal-head,
  .lp-modal-body,
  .lp-modal-body-confirm,
  .lp-photo-crop-sidebar,
  .lp-expand-sidebar-inner{
    padding-inline:14px;
  }

  .lp-photo-crop-stage{
    min-height:260px;
    height:min(48dvh,340px);
  }
}

/* ── ART SETTINGS BAR: layout isolation ────────────────────────────────────
   Remove lp-toolbar da marcacao eliminou o grid de 4 colunas, mas usamos
   IDs para garantir vitoria sobre qualquer regra de classe remanescente.   */
#artSettingsToolbar{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  width:100%;
  min-width:0;
}
/* lp-toolbar-group:not(:last-child) (linha 1010) sobrescreve a regra de
   classe com mesma especificidade — o ID aqui ganha de volta os valores
   corretos de padding e cor do separador.                                  */
#faceModeGroup{
  padding-right:22px;
  border-right:1px solid rgba(255,255,255,.12);
}
@media(max-width:1180px){#faceModeGroup{padding-right:18px}}
@media(max-width:880px){#faceModeGroup{padding-right:14px}}

/* Copy stack: ocupa só a largura do conteúdo, aparece colado ao separador
   de Quantidade de Cards em vez de se expandir para a borda direita.      */
#toolbarCardsGroup .lp-art-settings-copy-stack{
  flex:0 0 auto;
  gap:6px;
}
/* Linhas dentro do stack: alinha label+botão a partir da esquerda. */
#toolbarCardsGroup .lp-art-settings-copy-row{
  justify-content:flex-start;
}
/* Botões "Aplicar": remove o min-height:36px que inflava a barra.
   Mantém o texto no tamanho original; só reduz o espaço interno vertical. */
#toolbarCardsGroup .lp-art-settings-copy-row .lp-mini-btn{
  min-height:auto;
  padding-top:5px;
  padding-bottom:5px;
  line-height:1;
}

/* ══ GRADE NOMES ══════════════════════════════════════════════════════════ */
.lp-grade-nomes{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  /* container-type permite que media queries @container reajam ao
     espaco DISPONIVEL do modulo (que pode mudar de tamanho conforme
     sidebars sao abertas/fechadas), nao ao viewport global. Resultado:
     toolbar agrupa/quebra de forma previsivel mesmo se o layout
     externo mudar. */
  container-type:inline-size;
  container-name:gradeNomes;
}
/* Toolbar unificada (mesmo template que .mf-toolbar e .nl2-toolbar). */
.lp-gn-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 16px;
  padding:14px 18px;
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  border-radius:var(--radius-lg);
  flex-shrink:0;
}
/* Grupos semânticos: cada um eh um "bloco" que quebra/empilha
   junto. Sem o agrupamento, o flex-wrap externo quebrava por botao
   individual (zigzag). Com .lp-gn-tb-group nowrap, cada grupo se
   mantem integro; o wrap acontece ENTRE grupos. */
.lp-gn-tb-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.lp-gn-tb-group--inputs{gap:14px}
.lp-gn-tb-group--utility{gap:6px}
.lp-gn-tb-group--export{gap:6px}
.lp-gn-field{
  display:flex;
  align-items:center;
  gap:6px;
}
.lp-gn-field-label{
  font-size:var(--text-xs);
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.lp-gn-text-input{
  width:180px;
  padding:4px 9px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-xs);
  color:var(--text);
  font-size:var(--text-md);
  outline:none;
  resize:none;
  line-height:1.35;
  font-family:inherit;
}
.lp-gn-text-input:focus{
  border-color:rgba(var(--accent-rgb),.65);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
}
.lp-gn-color-input{
  width:36px;
  height:34px;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-xs);
  background:none;
  cursor:pointer;
  padding:2px 3px;
}
/* Orient group empilhado verticalmente: ocupa 40px de altura total
   (mesma altura dos outros controles da toolbar), com 2 botoes de
   ~19px cada. Acessibilidade: a area clicavel fica abaixo do minimo
   recomendado (32px) — decisao consciente para reduzir pegada
   horizontal na toolbar. Label visivel mantida via SVG + texto em
   tamanho reduzido. */
.lp-gn-orient-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:2px;
  padding:0;
  height:40px;
}
.lp-gn-orient-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  /* Altura ~19px para somar ~40px com 2 botoes + gap 2px.
     Padding minimo, mantem cliveis no desktop ainda que abaixo da
     diretriz de 32px do CLAUDE.md (excecao consciente). */
  height:19px;
  min-height:19px;
  padding:0 10px;
  font-size:var(--text-2xs);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-xs);
  color:var(--muted);
  font-size:var(--text-sm);
  cursor:pointer;
  transition:background-color var(--ease-hover),color var(--ease-hover),border-color var(--ease-hover);
  white-space:nowrap;
}
.lp-gn-orient-btn:hover{
  background:rgba(255,255,255,.08);
  color:var(--text);
  border-color:var(--border-hi);
}
.lp-gn-orient-btn--active{
  background:rgba(var(--accent-rgb),.16);
  border-color:rgba(var(--accent-rgb),.55);
  color:var(--accent-hi);
}
/* Icone reduzido (proporcional ao botao mais baixo) */
.lp-gn-orient-btn svg{
  width:11px;
  height:11px;
}
.lp-gn-select-btn--active{
  background:rgba(var(--gold-rgb),.20) !important;
  border-color:rgba(var(--gold-rgb),.55) !important;
  color:var(--gold) !important;
}
.lp-gn-close-btn{
  margin-left:auto;
}
.lp-mini-btn-download{
  background:rgba(var(--gold-rgb),.16);
  color:var(--gold-hi);
  border-color:rgba(var(--gold-rgb),.45);
}
.lp-mini-btn-download:hover{
  background:rgba(var(--gold-rgb),.24);
  border-color:rgba(var(--gold-rgb),.65);
}
.lp-gn-grid{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  grid-auto-rows:max-content;
  column-gap:14px;
  row-gap:16px;
  align-content:start;
}
.lp-gn-grid--vertical{
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  row-gap:20px;
}
.lp-gn-card{
  position:relative;
  background:var(--surface-2);
  border:2px solid var(--border-mid);
  border-radius:var(--radius-sm);
  overflow:hidden;
  cursor:pointer;
  transition:border-color var(--ease-hover),background-color var(--ease-hover);
  user-select:none;
  align-self:start;
}
.lp-gn-card:hover{
  border-color:var(--border-hi);
}
.lp-gn-card--svgsel{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.27);
}
.lp-gn-card--excluded{
  opacity:.3;
}
.lp-gn-card--insel{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.27);
}
.lp-gn-card--notsel{
  opacity:.35;
}
.lp-gn-canvas{
  display:block;
  width:100%;
  height:auto;
  background:#fff;
}
.lp-gn-card-label{
  font-size:var(--text-xs);
  color:var(--muted);
  text-align:center;
  padding:4px 8px;
  background:var(--surface-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-top:1px solid var(--border-lo);
}
.lp-gn-card--svgsel .lp-gn-card-label{
  color:var(--accent-hi);
}
.lp-gn-card--insel .lp-gn-card-label{
  color:var(--gold);
}
.lp-gn-card-x{
  position:absolute;
  top:5px;
  right:5px;
  width:22px;
  height:22px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:var(--text);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  z-index:2;
  transition:background-color var(--ease-hover),color var(--ease-hover),border-color var(--ease-hover);
}
.lp-gn-card-x:hover{
  background:rgba(212,85,85,.85);
  color:#fff;
  border-color:rgba(212,85,85,.55);
}
.lp-gn-card--excluded .lp-gn-card-x{
  background:rgba(76,175,80,.32);
  color:var(--success);
}
.lp-gn-card--excluded .lp-gn-card-x:hover{
  background:rgba(76,175,80,.50);
  color:#fff;
}
.lp-gn-card-circle{
  position:absolute;
  top:7px;
  right:7px;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  padding:0;
  margin:0;
  flex:0 0 22px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.45);
  cursor:pointer;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  appearance:none;
  -webkit-appearance:none;
  transform:none;
  box-shadow:none;
  line-height:1;
  transition:border-color .12s, background .12s;
}
.lp-gn-card-circle:hover{
  border-color:var(--gold);
  background:rgba(0,0,0,.65);
}
.lp-gn-card-circle--checked{
  border-color:var(--gold);
  background:rgba(var(--gold-rgb),.55);
}
.lp-gn-card-circle--checked::after{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
}
.lp-gn-card-num{
  position:absolute;
  top:5px;
  left:5px;
  background:rgba(0,0,0,.48);
  color:var(--text);
  font-size:var(--text-xs);
  font-weight:700;
  font-family:var(--ui-font);
  line-height:1;
  padding:3px 5px;
  border-radius:var(--radius-xs);
  pointer-events:none;
  z-index:3;
  letter-spacing:.4px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFORMIZAÇÃO lp-gn-* v1.1 — Abordagem A
   Toolbar a 40px (mesma altura que Matriz Foto e Nomes em Lote)
   para consistência visual entre todas as ferramentas.
   ═══════════════════════════════════════════════════════════════ */

.lp-gn-toolbar .lp-mini-btn,
.lp-gn-select-btn,
.lp-gn-close-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  min-height:40px;
  padding:0 16px;
  font-size:var(--text-md);
  font-weight:600;
  letter-spacing:0;
  line-height:1;
  border-radius:var(--radius-md);
  white-space:nowrap;
}

.lp-gn-text-input{
  height:40px;
  min-height:40px;
  padding:0 12px;
  font-size:var(--text-md);
  line-height:1.35;
  border-radius:var(--radius-md);
}

.lp-gn-color-input{
  width:48px;
  height:40px;
  padding:2px 3px;
  border-radius:var(--radius-md);
}

/* Popover ancorado abaixo do botão Salvar SVG */
.lp-svg-popover{
  position:fixed;
  z-index:10002;
  background:var(--gold);
  color:#1a130a;
  font-size:var(--text-sm);
  font-weight:600;
  font-family:var(--ui-font);
  padding:8px 14px;
  border-radius:var(--radius-sm);
  max-width:210px;
  text-align:center;
  line-height:1.45;
  pointer-events:none;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(var(--gold-rgb),.55);
}
.lp-svg-popover::before{
  content:'';
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-bottom-color:var(--gold);
}
.lp-svg-popover--visible{opacity:1;transform:translateY(0);}

/* ── Responsividade da toolbar via container queries ─────────────
   3 breakpoints discretos baseados na LARGURA DISPONIVEL do
   modulo (#gradeNomesView), nao do viewport global. Permite que a
   toolbar reaja a sidebars abertas/fechadas que comem espaco.
   Cada breakpoint promove um grupo a uma "linha" propria, mantendo
   a integridade dos grupos semanticos (botoes relacionados juntos).
   ─────────────────────────────────────────────────────────── */
@container gradeNomes (max-width: 1100px) {
  /* Export quebra para a proxima linha ja alinhado ao final */
  .lp-gn-tb-group--export{order:5}
  .lp-gn-close-btn{order:6}
}
@container gradeNomes (max-width: 880px) {
  /* Utility tambem desce; close volta pra direita da linha de baixo */
  .lp-gn-tb-group--utility{order:4}
  .lp-gn-text-input{width:160px}
}
@container gradeNomes (max-width: 640px) {
  /* Empilha tudo em coluna. close perde margin-left:auto e fica
     no fluxo natural (largura cheia, alinhado ao final). */
  .lp-gn-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .lp-gn-tb-group{justify-content:flex-start;flex-wrap:wrap}
  .lp-gn-tb-group--export{justify-content:flex-start}
  .lp-gn-close-btn{margin-left:0;align-self:flex-end}
  .lp-gn-text-input{width:100%;flex:1}
  .lp-gn-field:first-of-type{flex:1}
  .lp-gn-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));padding:10px;column-gap:8px;row-gap:12px}
  .lp-gn-grid--vertical{row-gap:14px}
}
/* Fallback para browsers sem container queries (Safari < 16, etc.):
   degrada para @media usando viewport aproximado. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .lp-gn-tb-group--export{order:5}
    .lp-gn-close-btn{order:6}
  }
  @media (max-width: 880px) {
    .lp-gn-tb-group--utility{order:4}
    .lp-gn-text-input{width:160px}
  }
  @media (max-width: 640px) {
    .lp-gn-toolbar{flex-direction:column;align-items:stretch;gap:10px}
    .lp-gn-tb-group{justify-content:flex-start;flex-wrap:wrap}
    .lp-gn-close-btn{margin-left:0;align-self:flex-end}
    .lp-gn-text-input{width:100%;flex:1}
    .lp-gn-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));padding:10px}
  }
}

/* ═══════════════════════════════════════════════════════════════
   NAV REDESIGN — Top menu bar (texto + dropdowns) + Left sidenav
   ═══════════════════════════════════════════════════════════════ */

/* ── Top menu bar ───────────────────────────────────────────── */
.tb-menus{
  display:flex;
  align-items:stretch;
  height:var(--topbar-offset);
  gap:0;
}
.tb-dd{
  position:relative;
  display:flex;
}
.tb-dd-btn{
  height:var(--topbar-offset);
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:5px;
  font-family:var(--ui-font);
  font-size:var(--text-md);
  font-weight:600;
  letter-spacing:0;
  color:var(--muted);
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--ease-hover),border-color var(--ease-hover);
}
.tb-dd-btn:hover,
.tb-dd:hover .tb-dd-btn,
.tb-dd.open .tb-dd-btn{
  color:var(--text);
  border-bottom-color:var(--border-hi);
}
.tb-dd-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.tb-dd-btn--gold{
  color:var(--gold);
  border-bottom-color:rgba(var(--gold-rgb),.3);
}
.tb-dd-btn--gold:hover,
.tb-dd:hover .tb-dd-btn--gold,
.tb-dd.open .tb-dd-btn--gold{
  color:var(--gold-hi);
  border-bottom-color:rgba(var(--gold-rgb),.6);
}
.tb-dd-btn .tb-caret{
  opacity:.5;
  transition:opacity var(--ease-hover);
}
.tb-dd:hover .tb-caret,
.tb-dd.open .tb-caret{
  opacity:.9;
}

.tb-sep-v{
  width:1px;
  height:18px;
  background:var(--border-mid);
  margin:0 4px;
  align-self:center;
  flex-shrink:0;
}

.tb-dd-panel{
  position:absolute;
  top:100%;
  left:0;
  background:var(--surface-3);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  min-width:210px;
  padding:5px;
  display:none;
  z-index:500;
}
.tb-dd:hover .tb-dd-panel,
.tb-dd.open .tb-dd-panel{
  display:block;
}

.tb-dd-item{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:7px 9px;
  border-radius:var(--radius-sm);
  border:none;
  background:transparent;
  color:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--ease-hover),color var(--ease-hover);
}
.tb-dd-item:hover,
.tb-dd-item:focus-visible{
  background:rgba(255,255,255,.06);
  outline:none;
}
.tb-dd-item__icon{
  width:26px;
  height:26px;
  flex-shrink:0;
  border-radius:var(--radius-xs);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:background-color var(--ease-hover),color var(--ease-hover);
}
.tb-dd-item:hover .tb-dd-item__icon{
  background:rgba(var(--gold-rgb),.1);
  color:var(--gold);
}
.tb-dd-item__text{
  min-width:0;
}
.tb-dd-item__text strong{
  display:block;
  font-size:var(--text-md);
  font-weight:600;
  color:var(--text);
  letter-spacing:0;
}
.tb-dd-item__text span{
  display:block;
  font-size:var(--text-xs);
  color:var(--muted-2);
  margin-top:1px;
}
.tb-dd-item--tool .tb-dd-item__icon{
  background:rgba(var(--accent-rgb),.08);
  color:var(--accent);
}
.tb-dd-item--tool:hover .tb-dd-item__icon{
  background:rgba(var(--accent-rgb),.18);
}
.tb-dd-item--tool:hover .tb-dd-item__text strong{
  color:var(--accent);
}
.tb-dd-item--tool.is-active{
  background:rgba(var(--accent-rgb),.12);
}
.tb-dd-item--tool.is-active .tb-dd-item__icon{
  background:rgba(var(--accent-rgb),.22);
  color:var(--accent-hi);
}
.tb-dd-item--tool.is-active .tb-dd-item__text strong{
  color:var(--accent-hi);
}
.tb-dd-sep{
  height:1px;
  background:var(--border-lo);
  margin:4px 0;
}

.tb-spacer{flex:1;}

.tb-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  padding-left:6px;
}

.tb-iconbtn{
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background-color var(--ease-hover),color var(--ease-hover),border-color var(--ease-hover);
}
.tb-iconbtn:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-color:var(--border-mid);
}
.tb-iconbtn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.tb-iconbtn:disabled,
.tb-iconbtn[aria-disabled="true"]{
  opacity:.4;
  pointer-events:none;
}

.tb-divider{
  width:1px;
  height:20px;
  background:var(--border-mid);
  margin:0 4px;
  align-self:center;
}

.tb-btn{
  height:30px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color var(--ease-hover),color var(--ease-hover),border-color var(--ease-hover);
}
.tb-btn--gold{
  background:rgba(var(--gold-rgb),.14);
  border:1px solid rgba(var(--gold-rgb),.35);
  color:var(--gold);
}
.tb-btn--gold:hover{
  background:rgba(var(--gold-rgb),.24);
  color:var(--gold-hi);
}
.tb-btn--ghost{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-mid);
  color:var(--muted);
}
.tb-btn--ghost:hover{
  background:rgba(255,255,255,.09);
  color:var(--text);
}
.tb-btn--danger{
  background:rgba(220,38,38,.10);
  border:1px solid rgba(220,38,38,.42);
  color:#f87171;
}
.tb-btn--danger:hover{
  background:rgba(220,38,38,.20);
  color:#fca5a5;
  border-color:rgba(220,38,38,.62);
}

/* ── Sidenav esquerda (ícones, 64px) ─────────────────────────── */
.lp-sidenav{
  width:var(--sidenav-w);
  flex-shrink:0;
  background:var(--surface-1);
  border-right:1px solid var(--border-mid);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0 10px;
  min-height:0;
  overflow:hidden;
}

.lp-sidenav-items{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  width:100%;
  padding:0 8px;
}

.lp-sidenav-item{
  width:100%;
  min-height:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 4px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  background:transparent;
  color:var(--muted-2);
  cursor:pointer;
  text-align:center;
  transition:background-color var(--ease-hover),color var(--ease-hover),border-color var(--ease-hover);
}
.lp-sidenav-item:hover{
  background:rgba(255,255,255,.05);
  color:var(--muted);
}
.lp-sidenav-item.active{
  background:rgba(var(--accent-rgb),.10);
  color:var(--accent);
  border-color:rgba(var(--accent-rgb),.24);
}
.lp-sidenav-item--gold{
  color:var(--gold);
  background:rgba(var(--gold-rgb),.08);
  border-color:rgba(var(--gold-rgb),.18);
}
.lp-sidenav-item--gold:hover{
  background:rgba(var(--gold-rgb),.14);
  color:var(--gold-hi);
  border-color:rgba(var(--gold-rgb),.3);
}
.lp-sidenav-item:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-sidenav-item img{
  width:22px;
  height:22px;
  flex-shrink:0;
  filter:invert(1) opacity(.5);
  transition:filter var(--ease-hover);
}
.lp-sidenav-item:hover img{filter:invert(1) opacity(.8);}
.lp-sidenav-item.active img{filter:invert(1) brightness(1.4);}
.lp-sidenav-item--gold img{
  filter:invert(67%) sepia(38%) saturate(420%) hue-rotate(2deg) brightness(.95);
}
.lp-sidenav-item--gold:hover img{
  filter:invert(78%) sepia(45%) saturate(420%) hue-rotate(2deg) brightness(1.05);
}
.lp-sidenav-lbl{
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.15;
  color:inherit;
  white-space:normal;
  word-break:keep-all;
}

.lp-sidenav-sep{
  width:48px;
  height:1px;
  background:var(--border-mid);
  margin:8px 0;
}

.lp-sidenav-exports{
  margin-top:auto;
  width:100%;
  padding:0 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lp-sidenav-exports .lp-sidenav-sep{
  width:48px;
  margin:0 auto 10px;
}

.lp-sidenav-export-btn{
  width:100%;
  min-height:60px;
  border-radius:var(--radius-md);
  padding:9px 4px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  border:1px solid transparent;
  background:transparent;
  transition:background-color var(--ease-hover),border-color var(--ease-hover);
}
.lp-sidenav-export-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-sidenav-export-btn--gold{
  background:rgba(var(--gold-rgb),.08);
  border-color:rgba(var(--gold-rgb),.2);
  color:var(--gold);
}
.lp-sidenav-export-btn--gold:hover{
  background:rgba(var(--gold-rgb),.16);
  border-color:rgba(var(--gold-rgb),.36);
}
.lp-sidenav-export-btn--teal{
  background:rgba(var(--accent-rgb),.08);
  border-color:rgba(var(--accent-rgb),.2);
  color:var(--accent);
}
.lp-sidenav-export-btn--teal:hover{
  background:rgba(var(--accent-rgb),.16);
  border-color:rgba(var(--accent-rgb),.34);
}
.lp-sidenav-export-lbl{
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.1;
  color:inherit;
  white-space:normal;
}
.lp-sidenav-export-sub{
  font-size:var(--text-2xs);
  color:var(--muted-2);
  line-height:1.2;
  letter-spacing:.02em;
}

.lp-sidenav-admin{
  margin-top:10px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--muted-2);
  text-decoration:none;
  transition:background-color var(--ease-hover),color var(--ease-hover);
}
.lp-sidenav-admin:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
}

/* ── Reordenamento dos slots de .lp-content-row ──────────────── */
/* lp-right-dock antes envolvia rightSidebar + lp-right-menu à direita.
   Agora ele é transparente (display:contents) e seus filhos viram
   filhos diretos do grid. A ordem visual é forçada pelo `order:`. */
.lp-right-dock{
  display:contents;
}
.lp-sidenav{order:1;}
#rightSidebar.lp-content-panel{order:2;}
.lp-main{order:3;}
/* Esconde o antigo menu lateral direito — substituído pela nova sidenav. */
.lp-right-menu{
  display:none!important;
}

/* ── Painel de conteúdo (--content-panel-w, hoje 320px) ──────────
   Coluna fixa entre a sidenav esquerda e o canvas. Empilha grupos
   verticalmente, sem cards internos (pattern Figma/VS Code). */

/* Shell ------------------------------------------------------- */
#rightSidebar.lp-content-panel{
  width:var(--content-panel-w);
  min-width:var(--content-panel-w);
  max-width:var(--content-panel-w);
  background:var(--surface-1);
  border:none;
  border-right:1px solid var(--border-mid);
  border-radius:0;
  box-shadow:none;
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

/* Scroll container ------------------------------------------- */
#rightSidebar.lp-content-panel > .lp-sidebar-panel-content{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:12px 0 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}
#rightSidebar.lp-content-panel > .lp-sidebar-panel-content::-webkit-scrollbar{width:6px;}
#rightSidebar.lp-content-panel > .lp-sidebar-panel-content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:var(--radius-pill);
}

/* Grupos / seções -------------------------------------------- */
#rightSidebar.lp-content-panel .lp-toolbar--sidebar{
  display:flex;
  flex-direction:column;
  gap:0;
}
#rightSidebar.lp-content-panel .lp-toolbar-group{
  padding:16px 18px 18px;
  margin:0;
  border:none;
  border-bottom:1px solid var(--border-lo);
  border-radius:0;
  background:transparent;
}
#rightSidebar.lp-content-panel .lp-toolbar-group:last-child{
  border-bottom:none;
}
/* Cancela o border-right inserido por .lp-toolbar-group:not(:last-child)
   global — irrelevante em layout vertical empilhado. */
#rightSidebar.lp-content-panel .lp-toolbar-group:not(:last-child){
  border-right:none;
  padding-right:18px;
}

/* Inspector containers --------------------------------------- */
/* Painel inspector (quando nenhum group está visível) também ganha
   padding interno consistente. NÃO usar padding-top aqui porque o
   .lp-sidebar-panel-content já aplica os 12px abaixo da topbar — se
   o inspector adicionar mais 16px no topo, o primeiro accordion fica
   visualmente mais baixo que os outros painéis (Texto/Elementos). */
#rightSidebar.lp-content-panel #inspectorPanels{
  padding:0 18px 18px;
}
#rightSidebar.lp-content-panel .lp-inspector-empty{
  padding:0;
}

/* Labels e cabeçalhos de seção ------------------------------- */
#rightSidebar.lp-content-panel .lp-toolbar-label{
  margin-bottom:10px;
  font-size:9px;
  letter-spacing:.14em;
  color:var(--muted);
}
#rightSidebar.lp-content-panel .lp-toolbar-group-colors .lp-toolbar-label{
  margin-bottom:8px;
}
#rightSidebar.lp-content-panel .lp-icon-section-head{
  margin-bottom:10px;
  flex-wrap:wrap;
  row-gap:8px;
}
#rightSidebar.lp-content-panel .lp-icon-section-sep{
  display:none;
}
#rightSidebar.lp-content-panel .lp-icon-section-label{
  font-size:9px;
  letter-spacing:.14em;
}

/* Icon slots -------------------------------------------------- */
#rightSidebar.lp-content-panel .lp-icon-slot{
  gap:8px;
}
#rightSidebar.lp-content-panel .lp-icon-slot + .lp-icon-slot-add-row,
#rightSidebar.lp-content-panel .lp-icon-slot-add-row{
  margin-top:8px;
}

/* Color row — wraps quando ultrapassa o painel estreito */
#rightSidebar.lp-content-panel .lp-color-row{
  gap:8px;
  flex-wrap:wrap;
}
#rightSidebar.lp-content-panel .lp-color-row + .lp-color-row{
  margin-top:8px;
}

/* Engraving intensity ---------------------------------------- */
#rightSidebar.lp-content-panel .lp-engraving-intensity-row{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
#rightSidebar.lp-content-panel .lp-engraving-intensity-slider{
  flex:1;
}

/* Texto: cards, badge, lista, textarea ----------------------- */
#rightSidebar.lp-content-panel .lp-text-card{
  padding:12px;
  gap:10px;
  border-radius:var(--radius-md);
  background:rgba(var(--accent-rgb),.05);
}
#rightSidebar.lp-content-panel .lp-text-card:hover{
  background:rgba(var(--accent-rgb),.08);
}
#rightSidebar.lp-content-panel .lp-text-card.is-active{
  background:rgba(var(--accent-rgb),.12);
}
#rightSidebar.lp-content-panel .lp-text-card-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  margin-top:0;
  border-radius:var(--radius-xs);
  background:rgba(var(--accent-rgb),.18);
  color:var(--accent-hi);
  font-size:11px;
  font-weight:700;
  line-height:1;
}
#rightSidebar.lp-content-panel .lp-text-layer-list{
  gap:8px;
}
#rightSidebar.lp-content-panel .lp-toolbar-text-row textarea{
  height:auto;
  min-height:48px;
  padding:2px 0;
  font-size:var(--text-md);
  line-height:1.4;
}
#rightSidebar.lp-content-panel .lp-add-layer-btn{
  margin-top:10px;
  height:44px;
  min-height:44px;
  padding:0 18px;
  font-size:var(--text-md);
  font-weight:700;
}

/* ── Botão de "Biblioteca de Vetores" — CTA primário do painel de
   Vetor (Elementos). Posicionado como PRIMEIRA opção do bloco, em
   destaque teal — o usuário deve abrir o catálogo antes de partir
   pro upload manual. ──────────────────────────────────────────── */
.lp-icon-library-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:52px;
  min-height:52px;
  padding:0 18px;
  margin-bottom:12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(var(--accent-rgb),.60);
  background:rgba(var(--accent-rgb),.18);
  color:var(--accent-hi);
  font-family:var(--ui-font);
  font-size:var(--text-md);
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover);
}

.lp-icon-library-btn:hover{
  background:rgba(var(--accent-rgb),.28);
  border-color:rgba(var(--accent-rgb),.85);
}

.lp-icon-library-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.lp-icon-library-btn:active{
  filter:brightness(.92);
}

.lp-icon-library-btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

/* Accordion: força conteúdo a respeitar a largura do painel
   (var(--content-panel-w)) em vez da largura natural do conteúdo. */
#rightSidebar.lp-content-panel .lp-accordion,
#rightSidebar.lp-content-panel .lp-accordion-body,
#rightSidebar.lp-content-panel .lp-accordion-head{
  min-width:0;
  max-width:100%;
}
#rightSidebar.lp-content-panel .lp-accordion{
  width:100%;
}
#rightSidebar.lp-content-panel .lp-accordion-body{
  grid-template-columns:minmax(0,1fr);
}
#rightSidebar.lp-content-panel .lp-accordion-body > *{
  min-width:0;
  max-width:100%;
}

/* Tamanho/Rotação: 2 colunas iguais, botões compactos para caber
   "- 100% +" numa única linha em cada bloco. */
#rightSidebar.lp-content-panel .lp-ctrl-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  width:100%;
}
#rightSidebar.lp-content-panel .lp-ctrl-block{
  min-width:0;
  width:auto;
  padding:8px 4px;
  gap:6px;
}
#rightSidebar.lp-content-panel .lp-ctrl-block .lp-size-rot-row{
  gap:3px;
  flex-wrap:nowrap;
  justify-content:center;
  width:100%;
}
#rightSidebar.lp-content-panel .lp-ctrl-block .lp-sz-btn{
  width:26px;
  height:26px;
  flex-shrink:0;
}
#rightSidebar.lp-content-panel .lp-ctrl-block .lp-sz-val{
  font-size:var(--text-sm);
  min-width:0;
}
#rightSidebar.lp-content-panel .lp-size-rot-row{
  justify-content:center;
  flex-wrap:wrap;
  row-gap:6px;
}

/* Inspector action rows full-width sem overflow.
   .lp-icon-action-row--inspector usa flex-direction:column — não
   setar flex:1 1 100% nos filhos (em column o basis 100% vira
   altura). Usar width:100% + flex:0 0 auto. */
#rightSidebar.lp-content-panel .lp-icon-action-row,
#rightSidebar.lp-content-panel .lp-icon-action-row--single{
  width:100%;
  min-width:0;
}
#rightSidebar.lp-content-panel .lp-icon-action-row .lp-mini-btn,
#rightSidebar.lp-content-panel .lp-icon-action-row--single .lp-mini-btn{
  width:100%;
  min-width:0;
  flex:0 0 auto;
}
#rightSidebar.lp-content-panel .lp-icon-action-row .lp-upload-hint{
  width:100%;
  min-width:0;
  white-space:normal;
}
#rightSidebar.lp-content-panel .lp-mini-btn-block{
  width:100%;
  min-width:0;
}

/* Inspector local preview (Vazio/Nenhum ícone) cabe sem overflow */
#rightSidebar.lp-content-panel .lp-icon-local-preview{
  min-width:0;
  max-width:100%;
}
#rightSidebar.lp-content-panel .lp-icon-local-meta{
  min-width:0;
  flex:1 1 0;
}
#rightSidebar.lp-content-panel .lp-icon-local-meta strong,
#rightSidebar.lp-content-panel .lp-icon-local-meta span{
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* ── Texto inline editável no card ───────────────────────────── */
.card-text-main.editing,
.lp-card-text-main.editing,
.editing-text-inline{
  border-bottom:1.5px solid rgba(var(--accent-rgb),.55);
  outline:none;
}

/* ── Bloco de Thumbnails Multi-foto ─────────────────────────────
   Aparece ao fim da secao "Upload" do inspector lateral. Lista photo
   layers com src. Click seleciona; X remove (com promptConfirm).
   Borda teal na thumb ativa — mesmo padrao da selecao de card no canvas.
   Tudo via tokens do design system. */
.lp-photo-thumbs-section{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  border-radius:var(--radius-lg);
}
.lp-photo-thumbs-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-family:var(--ui-font);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--muted);
}
.lp-photo-thumbs-section__count{
  padding:2px 7px;
  background:var(--surface-1);
  color:var(--text);
  border-radius:var(--radius-pill);
  font-size:var(--text-2xs);
}
.lp-photo-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
  gap:8px;
}
.lp-photo-thumb{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--surface-1);
  cursor:pointer;
  transition:border-color var(--ease-hover), background-color var(--ease-hover);
}
.lp-photo-thumb:hover{
  border-color:var(--border-hi);
  background:var(--border-lo);
}
.lp-photo-thumb:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-photo-thumb.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}
.lp-photo-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.lp-photo-thumb__remove{
  position:absolute;
  top:4px;
  right:4px;
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--overlay-soft);
  color:var(--text);
  border:1px solid var(--border-hi);
  border-radius:var(--radius-pill);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:background-color var(--ease-hover), border-color var(--ease-hover);
}
.lp-photo-thumb__remove:hover{
  background:var(--danger);
  border-color:var(--danger);
}
.lp-photo-thumb__remove:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ── Section solta no inspector (estilo nav-redesign "Conteudo do Texto")
   Substitui o .lp-accordion fechado de "Upload Imagem" por um layout
   sem moldura externa: label discreto + corpo solto + divisores sutis
   entre sub-grupos. Mantem padding interno coerente com o resto do
   inspector. */
.lp-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px 2px 12px;
  border:none;
  background:none;
  border-radius:0;
}
.lp-section + .lp-section{
  border-top:1px solid var(--border-lo);
  padding-top:12px;
}
.lp-section-label{
  display:block;
  margin:0 0 4px;
  color:var(--muted);
  font-family:var(--ui-font);
  font-size:var(--text-2xs);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
/* Variante com botao X inline pro caso de layers removiveis
   (icon2/icon3, text2/text3). Mantem a estetica do label discreto
   e adiciona um remove tipo "pill" sutil a direita. */
.lp-section-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 4px;
}
.lp-section-label-row .lp-section-label{
  margin:0;
}
.lp-section-remove{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-pill);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:background-color var(--ease-hover),border-color var(--ease-hover),color var(--ease-hover);
}
.lp-section-remove:hover{
  background:var(--danger);
  border-color:var(--danger);
  color:var(--text);
}
.lp-section-remove:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-section-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lp-section-divider{
  height:1px;
  background:var(--border-lo);
  margin:2px 0;
}

/* ── Multi-vetor: strip "Vetores no card" + biblioteca inline ────
   Espelha o bloco de thumbnails de foto (.lp-photo-thumbs-section)
   em estrutura e tokens. Aparece como suffix abaixo da section solta
   de Elementos. Mesmo padrao "card sem moldura" pro grid de tiles. */
.lp-icon-card-strip{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  border-radius:var(--radius-lg);
}
.lp-icon-card-strip__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-family:var(--ui-font);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--muted);
}
.lp-icon-card-strip__count{
  padding:2px 7px;
  background:var(--surface-1);
  color:var(--text);
  border-radius:var(--radius-pill);
  font-size:var(--text-2xs);
  letter-spacing:0;
}
.lp-icon-card-strip__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(56px, 1fr));
  gap:8px;
}
.lp-icon-card-thumb{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--surface-1);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  transition:border-color var(--ease-hover), background-color var(--ease-hover);
}
.lp-icon-card-thumb:hover{
  border-color:var(--border-hi);
  background:var(--border-lo);
}
.lp-icon-card-thumb:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-icon-card-thumb.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}
.lp-icon-card-thumb img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.lp-icon-card-thumb__remove{
  position:absolute;
  top:3px;
  right:3px;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--overlay-soft);
  color:var(--text);
  border:1px solid var(--border-hi);
  border-radius:var(--radius-pill);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:background-color var(--ease-hover), border-color var(--ease-hover);
}
.lp-icon-card-thumb__remove:hover{
  background:var(--danger);
  border-color:var(--danger);
}
.lp-icon-card-thumb__remove:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ── Biblioteca de Vetores inline (substitui modal) ──────────────
   Layout para sidebar estreita: busca fixa, chips de categoria,
   corpo com modo Todos/Pasta/Busca. Classes proprias, NAO reutiliza
   .lp-icon-tile-media (que tem min-height: 138px do modal antigo). */
.lp-icon-lib{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--border-mid);
  background:var(--surface-2);
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}
.lp-icon-lib__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.lp-icon-lib__head .lp-section-label{
  margin:0;
}
.lp-icon-lib__cap{
  padding:2px 8px;
  background:rgba(var(--accent-rgb), 0.14);
  border:1px solid rgba(var(--accent-rgb), 0.42);
  color:var(--accent-hi);
  border-radius:var(--radius-pill);
  font-size:var(--text-2xs);
  font-weight:700;
  letter-spacing:0;
}
.lp-icon-lib__search{
  position:relative;
}
.lp-icon-lib__input{
  width:100%;
  height:32px;
  padding:0 10px;
  background:var(--surface-1);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  color:var(--text);
  font-family:var(--ui-font);
  font-size:var(--text-md);
  outline:none;
  transition:border-color var(--ease-hover), background-color var(--ease-hover);
}
.lp-icon-lib__input::placeholder{
  color:var(--muted-2);
}
.lp-icon-lib__input:hover{
  border-color:var(--border-hi);
}
.lp-icon-lib__input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Nav compacta: "Todos" + "Categorias N ▾". Substitui a fileira de chips
   (que nao escala em catalogo com dezenas/centenas de pastas — vira muro
   vertical com wrap ou scroll horizontal ilegivel). Navegacao por pasta
   vive no popover de Categorias. */
.lp-icon-lib__nav{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:30px;
}
.lp-icon-lib__nav-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  background:transparent;
  border:1px solid var(--border-mid);
  border-radius:var(--radius-pill);
  color:var(--text);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color var(--ease-hover), border-color var(--ease-hover), color var(--ease-hover);
}
.lp-icon-lib__nav-btn:hover{
  background:rgba(255,255,255,0.04);
  border-color:var(--border-hi);
}
.lp-icon-lib__nav-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-icon-lib__nav-btn.is-active{
  background:rgba(var(--accent-rgb), 0.14);
  border-color:rgba(var(--accent-rgb), 0.42);
  color:var(--accent-hi);
}
.lp-icon-lib__nav-btn--menu{
  flex:1 1 auto;
  justify-content:flex-start;
  min-width:0;
}
.lp-icon-lib__nav-btn-label{
  flex:1 1 auto;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lp-icon-lib__nav-btn-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  padding:0 6px;
  height:18px;
  background:var(--surface-1);
  border-radius:var(--radius-pill);
  font-size:var(--text-2xs);
  font-weight:700;
  letter-spacing:0;
  color:var(--muted);
}
.lp-icon-lib__nav-btn.is-active .lp-icon-lib__nav-btn-count{
  background:rgba(var(--accent-rgb), 0.18);
  color:var(--accent-hi);
}
.lp-icon-lib__nav-btn-caret{
  font-size:10px;
  opacity:0.7;
}

/* Popover de Categorias: lista escalavel com busca interna. */
.popover.popover--icon-lib-cats{
  min-width:240px;
  max-width:300px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lp-icon-lib-cats__head{
  display:flex;
  align-items:center;
}
.lp-icon-lib-cats__search{
  width:100%;
  height:30px;
  padding:0 10px;
  background:var(--surface-1);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  color:var(--text);
  font-family:var(--ui-font);
  font-size:var(--text-md);
  outline:none;
  transition:border-color var(--ease-hover);
}
.lp-icon-lib-cats__search::placeholder{
  color:var(--muted-2);
}
.lp-icon-lib-cats__search:hover{
  border-color:var(--border-hi);
}
.lp-icon-lib-cats__search:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-icon-lib-cats__list{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:320px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.lp-icon-lib-cats__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:8px 10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  color:var(--text);
  font-family:var(--ui-font);
  font-size:var(--text-md);
  font-weight:600;
  cursor:pointer;
  text-align:left;
  transition:background-color var(--ease-hover), border-color var(--ease-hover), color var(--ease-hover);
}
.lp-icon-lib-cats__item:hover{
  background:rgba(255,255,255,0.04);
  border-color:var(--border-mid);
}
.lp-icon-lib-cats__item:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.lp-icon-lib-cats__item.is-active{
  background:rgba(var(--accent-rgb), 0.14);
  border-color:rgba(var(--accent-rgb), 0.42);
  color:var(--accent-hi);
}
.lp-icon-lib-cats__item-name{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lp-icon-lib-cats__item-count{
  flex:0 0 auto;
  min-width:24px;
  padding:1px 7px;
  background:var(--surface-1);
  color:var(--muted);
  border-radius:var(--radius-pill);
  font-size:var(--text-2xs);
  font-weight:700;
  text-align:center;
}
.lp-icon-lib-cats__item.is-active .lp-icon-lib-cats__item-count{
  background:rgba(var(--accent-rgb), 0.18);
  color:var(--accent-hi);
}
.lp-icon-lib-cats__empty{
  padding:14px 8px;
  text-align:center;
  color:var(--muted);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
}

/* "Ver todas as categorias" no fim do modo Todos quando ha mais pastas
   do que ICON_LIB_TODOS_MAX_SECTIONS. */
.lp-icon-lib__see-all{
  margin-top:4px;
  padding:10px 12px;
  background:transparent;
  border:1px dashed var(--border-mid);
  border-radius:var(--radius-md);
  color:var(--accent);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:700;
  text-align:center;
  cursor:pointer;
  transition:background-color var(--ease-hover), border-color var(--ease-hover), color var(--ease-hover);
}
.lp-icon-lib__see-all:hover{
  background:rgba(var(--accent-rgb), 0.06);
  border-color:rgba(var(--accent-rgb), 0.42);
  color:var(--accent-hi);
}
.lp-icon-lib__see-all:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Corpo: container scrollavel que segura modos Todos/Pasta/Busca. */
.lp-icon-lib__body{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:380px;
  overflow-y:auto;
  padding-right:2px;
  scrollbar-width:thin;
}

/* Modo Todos: cada categoria vira uma section editorial com sample. */
.lp-icon-lib__section{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lp-icon-lib__section + .lp-icon-lib__section{
  padding-top:12px;
  border-top:1px solid var(--border-lo);
}
.lp-icon-lib__section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.lp-icon-lib__section-title{
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--text);
  letter-spacing:0;
}
.lp-icon-lib__section-count{
  padding:1px 8px;
  background:var(--surface-1);
  color:var(--muted);
  border-radius:var(--radius-pill);
  font-size:var(--text-2xs);
  font-weight:700;
}
.lp-icon-lib__see-folder{
  align-self:flex-start;
  padding:4px 0;
  background:transparent;
  border:none;
  color:var(--accent);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:600;
  cursor:pointer;
  transition:color var(--ease-hover);
}
.lp-icon-lib__see-folder:hover{
  color:var(--accent-hi);
}
.lp-icon-lib__see-folder:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Modo Pasta: cabecalho com voltar + titulo + contador. */
.lp-icon-lib__folder-head{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:4px;
  border-bottom:1px solid var(--border-lo);
}
.lp-icon-lib__back{
  align-self:flex-start;
  padding:2px 0;
  background:transparent;
  border:none;
  color:var(--muted);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:600;
  cursor:pointer;
  transition:color var(--ease-hover);
}
.lp-icon-lib__back:hover{
  color:var(--text);
}
.lp-icon-lib__back:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
.lp-icon-lib__folder-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.lp-icon-lib__folder-title{
  font-family:var(--ui-font);
  font-size:var(--text-md);
  font-weight:700;
  color:var(--text);
}
.lp-icon-lib__folder-count{
  color:var(--muted);
  font-size:var(--text-sm);
  font-weight:600;
}

/* Modo Busca: cabecalho com resumo + contador. */
.lp-icon-lib__results-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding-bottom:4px;
  border-bottom:1px solid var(--border-lo);
}
.lp-icon-lib__results-title{
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--text);
}
.lp-icon-lib__results-count{
  padding:1px 8px;
  background:var(--surface-1);
  color:var(--muted);
  border-radius:var(--radius-pill);
  font-size:var(--text-2xs);
  font-weight:700;
}

/* Grid de tiles — usado em Todos (sample), Pasta (completo) e Busca. */
.lp-icon-lib__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

/* Tile: dimensoes estaveis (aspect-ratio + min-height:0 + overflow).
   Classes proprias — NAO reutiliza .lp-icon-tile-media (min-height 138). */
.lp-icon-lib-tile{
  position:relative;
  aspect-ratio:1/1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background:var(--surface-1);
  border:1px solid var(--border-mid);
  border-radius:var(--radius-md);
  cursor:pointer;
  overflow:hidden;
  transition:background-color var(--ease-hover), border-color var(--ease-hover);
}
.lp-icon-lib-tile:hover{
  background:var(--surface-3);
  border-color:var(--border-hi);
}
.lp-icon-lib-tile:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.lp-icon-lib-tile:disabled,
.lp-icon-lib-tile[aria-disabled="true"]{
  opacity:0.5;
  cursor:not-allowed;
}
.lp-icon-lib-tile__img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}

.lp-icon-lib-empty{
  padding:18px 8px;
  text-align:center;
  color:var(--muted);
  font-family:var(--ui-font);
  font-size:var(--text-sm);
  border:1px dashed var(--border-mid);
  border-radius:var(--radius-md);
  background:var(--surface-1);
}