.lcsam-wrap {
  width: 100%;
  max-width: 100em;
  display: flex;
  gap: 16px;
  align-items: start;
  flex-direction: column;
}
@media (max-width: 900px) {
  .lcsam-wrap {
    grid-template-columns: 1fr;
  }
}
.lcsam-panel {
  width: 100%;
  max-width: 50em;
  background: #fff;
  border: 0px solid #e5e5ea;
  border-radius: 8px;
  padding: 12px;
  position: sticky;
  top: 12px;
  z-index: 40;
}
.lcsam-file input {
  display: none;
}
.lcsam-file span {
  display: inline-block;
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.5rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
}
.lcsam-tools {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
	
}
.lcsam-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.lcsam-btn {
  background: #fff;
  border: 1px solid #cfcfd7;
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.lcsam-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.lcsam-primary {
  background: #0b5fff;
  color: #fff;
  border-color: #0b5fff;
}
.lcsam-slider {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lcsam-slider input {
  width: 160px;
}
.lcsam-stage{
  display: grid;                 /* oder: display:flex */
  place-items: center;           /* = align-items + justify-content */
  padding: 12px;                 /* etwas Luft um die Leinwand */
  box-sizing: border-box;
  min-width: 500px;
  min-height: 300px;
  overflow: auto;

  /* dein Checkerboard bleibt so */
  background-color: var(--stage-bg, #000);
  background-image: none;
}

/* Schachbrett nur wenn .bg-checker dran ist */
.lcsam-stage.bg-checker{
  --checker-a:#f2f3f5; 
  --checker-b:#d7d9de; 
  --checker-size:15px;
  background-image:
    linear-gradient(45deg, var(--checker-a) 25%, transparent 25%, transparent 75%, var(--checker-a) 75%, var(--checker-a)),
    linear-gradient(45deg, var(--checker-a) 25%, transparent 25%, transparent 75%, var(--checker-a) 75%, var(--checker-a));
  background-size: var(--checker-size) var(--checker-size);
  background-position: 0 0, calc(var(--checker-size)/2) calc(var(--checker-size)/2);
  background-color: var(--checker-b);
}

/* optional: diese Klassen setzen einfach die Variable */
.lcsam-stage.bg-white { --stage-bg:#fff !important; }
.lcsam-stage.bg-black { --stage-bg:#000 !important; }

.lcsam-canvas-wrap{
  position: relative;
  display: block;         /* statt inline-block */
  width: fit-content;     /* Breite = Inhalt (deine Canvas) */
  margin: 0 auto;         /* falls die Stage doch kein Grid/Flex hätte */
}

.lcsam-canvas {
  display: block;
  max-width: 100%;
}
.lcsam-mask {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  mix-blend-mode: multiply;
  opacity: 0.35;
  z-index: 2;
}
.lcsam-ui {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 3;
}

.lcsam-tool-active {
  outline: 2px solid #0b5fff;
}
#lcsam-status {
  font-size: 0.9rem;
  color: #666;
  margin: 0.5rem 0;
}
.lcsam-view {
  cursor: default;
}
.lcsam-mask {
  cursor: crosshair;
}

.lcsam-canvas,
.lcsam-mask,
.lcsam-ui{
  margin: 10px;
  display: block;
  max-width: 100%;        /* erlaubt verkleinern bei schmalen Screens */
}
.lcsam-mask{
  position: absolute; left:0; top:0;
  pointer-events:auto; mix-blend-mode:multiply; opacity:.35; z-index:2;
}
.lcsam-ui{
  position: absolute; left:0; top:0;
  pointer-events:none; z-index:3;
}