/* Canvas host */
#gallery-swiper-started { display:block; }
#gallery-swiper-started #designer-canvas { margin: 0 auto; }

/* Panely */
.panel { padding: 14px; border: 1px solid #e5e7eb; border-radius: 10px; background:#fff; margin-bottom: 16px; }
.panel h3 { margin:0 0 8px; font-size:16px; }

/* Tlačítka */
.btn { cursor:pointer; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; line-height:1.2; }
.btn:hover { background:#f8f8f8; }

/* Progress */
.progress { width:100%; height:8px; background:#eee; border-radius:999px; overflow:hidden; margin-top:8px; }
.progress .bar { height:100%; width:0%; background:#22c55e; transition: width .2s; }

/* Galerie náhledů */
#links.thumbs {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(86px,1fr));
  gap:10px;
}
#linksai.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
}

@media (min-width: 600px) {
  #linksai.thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.thumb {
  position:relative;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}
.thumb.is-active {
	border-color:#FF0000;
}
#links .thumb img {
  display:block;
  width:100%;
  height:86px;
  object-fit:cover;
  cursor:pointer;
}


.thumb .del {
  position:absolute; right:6px; top:6px;
  width:26px; height:26px; border-radius:999px;
  background:#0008; color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; line-height:1;
}
.thumb .del:hover { background:#000c; }
.thumb .del svg { width:14px; height:14px; }

/* Hint */
.hint { color:#6b7280; font-size:12px; margin-top:6px; }

/* Vybraná barva (pokud používáš) */
.colorchoose { position:relative; display:inline-block; }
.colorchoose.checked::after{
  content:""; position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 2px #fff; z-index:2;
}
.colorchoose.checked::before{
  content:""; position:absolute; top:9px; right:9px; width:12px; height:12px;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="white" d="M4.5 9L1.5 6l1-1 2 2 5-5 1 1z"/></svg>');
  z-index:3; pointer-events:none;
}

/* Hezký kulatý koš pro tlačítko .thumb .del */
.thumb .trash{color:#fff;position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:#ef4444;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}
  .thumb .trash:hover{filter:brightness(1.05)}
  
  .thumb:hover img {
  transform: scale(1.05);
}

.thumb img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: transform .12s;
}

#linksai .thumb img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  cursor:pointer;
}

button { 
	text-transform:none;
}

#designer-canvas,
.konvajs-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}