.logo-grid{ display:flex; }
.logo-grid{ flex-direction:column; gap:12px; }
.logo-grid > .field-wrap{ flex:0 0 auto; width:100%; }
.logo-grid > .field-wrap.hidden{ display:none; }
.logo-grid-cells{ flex:1 1 auto; min-height:0; }
.logo-grid-title{
  font-family:var(--font-regular); font-weight:var(--font-weight-regular);
  font-size:var(--md-typography-font-size-500); line-height:28px;
  color:var(--md-brand-foreground-1-rest); outline:none; width:fit-content; max-width:100%;
}
.logo-grid-title[data-placeholder]:empty:before{ content:attr(data-placeholder); color:var(--ui-muted); }
.logo-grid[data-style="accent"] .logo-grid-title{ color:var(--md-color-grey-white); }

.logo-grid[data-style="solid"]{ background:var(--md-neutral-background-2-rest); border-radius:var(--radius); padding:24px; }
.logo-grid[data-style="accent"]{ background:var(--md-brand-background-inverted-rest); border-radius:var(--radius); padding:24px; }
#framesContainer .logo-grid[data-style="accent"] .logo-grid-cell.is-empty{ border-color:rgba(255,255,255,0.4); color:rgba(255,255,255,0.7); }
.logo-grid-cells{
  display:grid; gap:16px; width:100%;
  grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr;
}
.deck-component[data-cols="1"] .logo-grid-cells{ grid-template-columns:repeat(1, 1fr); }
.deck-component[data-cols="2"] .logo-grid-cells{ grid-template-columns:repeat(2, 1fr); }
.deck-component[data-cols="3"] .logo-grid-cells{ grid-template-columns:repeat(3, 1fr); }
.deck-component[data-cols="4"] .logo-grid-cells{ grid-template-columns:repeat(4, 1fr); }
.deck-component[data-cols="5"] .logo-grid-cells{ grid-template-columns:repeat(5, 1fr); }
.deck-component[data-cols="6"] .logo-grid-cells{ grid-template-columns:repeat(6, 1fr); }
.deck-component[data-cols="7"] .logo-grid-cells{ grid-template-columns:repeat(7, 1fr); }
.deck-component[data-cols="8"] .logo-grid-cells{ grid-template-columns:repeat(8, 1fr); }
.deck-component[data-cols="9"] .logo-grid-cells{ grid-template-columns:repeat(9, 1fr); }
.deck-component[data-cols="10"] .logo-grid-cells{ grid-template-columns:repeat(10, 1fr); }

.logo-grid-cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:0; border-radius:8px; cursor:pointer;
}
.logo-grid-img{ height:70%; width:auto; max-width:100%; object-fit:contain; }
.logo-grid-plus{ display:none; }
#framesContainer .logo-grid-cell.is-empty{ border:1px dashed var(--ui-border); color:var(--ui-muted); }
#framesContainer .logo-grid-cell.is-empty .logo-grid-plus{ display:block; font-size:var(--text-lg); opacity:.6; }
#framesContainer .logo-grid-cell.is-empty:hover{ border-color:var(--ui-accent); color:var(--ui-accent); }
body.deck-readonly .logo-grid-cell.is-empty{ border-color:transparent; }
body.deck-readonly .logo-grid-cell.is-empty .logo-grid-plus{ display:none; }

.logo-grid-thumb{ display:grid; gap:3px; width:100%; grid-template-columns:repeat(3, 1fr); }
.logo-grid-thumb[data-cols="2"]{ grid-template-columns:repeat(2, 1fr); }
.logo-grid-thumb[data-cols="4"]{ grid-template-columns:repeat(4, 1fr); }
.logo-grid-thumb span{ height:10px; border-radius:2px; background:var(--ui-border); }

.logo-grid-picker{ display:grid; gap:6px; grid-template-columns:repeat(3, 1fr); }
.logo-grid-picker[data-cols="1"]{ grid-template-columns:repeat(1, 1fr); }
.logo-grid-picker[data-cols="2"]{ grid-template-columns:repeat(2, 1fr); }
.logo-grid-picker[data-cols="4"]{ grid-template-columns:repeat(4, 1fr); }
.logo-grid-picker[data-cols="5"]{ grid-template-columns:repeat(5, 1fr); }
.logo-grid-picker[data-cols="6"]{ grid-template-columns:repeat(6, 1fr); }
.logo-grid-picker[data-cols="7"]{ grid-template-columns:repeat(7, 1fr); }
.logo-grid-picker[data-cols="8"]{ grid-template-columns:repeat(8, 1fr); }
.logo-grid-picker[data-cols="9"]{ grid-template-columns:repeat(9, 1fr); }
.logo-grid-picker[data-cols="10"]{ grid-template-columns:repeat(10, 1fr); }
.logo-grid-pick-cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; padding:4px; border:1px solid var(--ui-border); border-radius:8px;
  background:var(--ui-surface); cursor:pointer; color:var(--ui-muted);
}
.logo-grid-pick-cell:hover{ border-color:var(--ui-accent); color:var(--ui-accent); }
.logo-grid-pick-cell img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-grid-pick-cell.is-empty{ border-style:dashed; }
.logo-grid-pick-clear{
  position:absolute; top:-6px; right:-6px; width:18px; height:18px; padding:0;
  display:none; align-items:center; justify-content:center;
  border:1px solid var(--ui-border); border-radius:50%;
  background:var(--ui-surface); color:var(--ui-muted); font-size:12px; line-height:1; cursor:pointer;
}
.logo-grid-pick-cell:hover .logo-grid-pick-clear{ display:flex; }
.logo-grid-pick-clear:hover{ color:var(--ui-text); border-color:var(--ui-muted); }