/* Generator bram: dodatki do wyglądu generatora paneli (panelcam/style.css + shop.css). */
[data-when][hidden] { display: none !important; }

.seg.layouts button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; }
.seg.layouts svg { width: 52px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.seg.layouts button.on svg { stroke: var(--accent); }

#elementSizes { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.elrow { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 8px; align-items: center; }
#elementSizes.two .elrow { grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr); }
.elrow input { margin: 0; }
.elrow .elname { font-size: 12.5px; color: var(--text); }
.elhead { color: var(--muted); font-size: 11.5px; }

/* ułożenie wzoru i lista elementów z ich wzorami */
.seg.spans button { font-size: 12px; padding: 6px 4px; }
.grouplist { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 6px; }
.grouplist button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%;
  padding: 6px 9px; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px;
}
.grouplist button b { font-weight: 600; }
.grouplist button span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grouplist button:hover { border-color: var(--accent2); }
.grouplist button.on { border-color: var(--accent2); background: rgba(63, 182, 255, 0.10); }
.grouplist button.on span { color: var(--text); }
.grouplist button[disabled] { opacity: 0.55; cursor: default; border-style: dashed; }
.grouplist button[disabled]:hover { border-color: var(--line); }