body { user-select: none; }

#app-body {
  display: flex; flex-direction: column; gap: .6rem;
  width: 100%; max-width: 1400px; height: 100%;
}

/* ── toolbar ── */
.toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex-shrink: 0;
  padding: .5rem .65rem; border-radius: .6rem;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
}
.divider {
  width: 1px; height: 1.4rem; flex-shrink: 0;
  background: color-mix(in srgb, var(--fg) 15%, transparent);
}
.tool-group { display: flex; gap: .2rem; align-items: center; }

.tool-btn {
  background: transparent; border: none; color: var(--fg); cursor: pointer;
  padding: .3rem; border-radius: .35rem; display: flex; align-items: center;
  opacity: .5; transition: opacity .12s, background .12s;
}
.tool-btn:hover  { opacity: 1; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.tool-btn.active { opacity: 1; background: var(--accent); color: var(--bg); }

.preset-btn {
  background: transparent; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  color: var(--fg); padding: .2rem .45rem; border-radius: .3rem;
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: .5; transition: opacity .12s, background .12s, border-color .12s;
}
.preset-btn:hover  { opacity: 1; }
.preset-btn.active { opacity: 1; background: var(--accent); color: var(--bg); border-color: transparent; }

/* ── palette ── */
.palette { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; flex-shrink: 0; }
.pal-swatch {
  --size: 1.5rem;
  
  width  : var(--size); 
  height : var(--size); 
  border-radius: .25rem; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 15%, transparent);
  transition: transform .1s, box-shadow .1s; position: relative;
  
  &:hover  { border-radius: 50%; } 
  &.active { border-radius: 50%; --size: 2.5rem; }
}
.pal-add {
  width: 1.6rem; height: 1.6rem; border-radius: .3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--fg) 25%, transparent);
  opacity: .5; position: relative; transition: opacity .12s;
}
.pal-add:hover { opacity: 1; }

/* ── canvas ── */
.canvas-wrap {
  flex            : 0 1 0;
  flex            : 0 1 auto;
  min-height      : 200px; 
  overflow        : auto;
  display         : flex; 
  align-items     : flex-start; 
  justify-content : flex-start;
  padding         : 0.5rem; 
  border-radius   : 0.25rem;
  border          : 1px solid color-mix(in srgb, var(--fg) 5%, transparent);
  border          : 1px solid var(--pxl-active);
  width           : 100%;
  overflow        : auto;
}

.pixel-grid {
  display     : grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  cursor      : crosshair; 
  flex-shrink : 0;
  width       : calc(100% * var(--pxl-scale));
  /*
  width       : 100%;
  scale       : var(--pxl-scale);
  */
}
.pixel-cell {
  aspect-ratio: 1;
  /*
  width  : var(--sz); 
  height : var(--sz);
  */
}
.pixel-cell:hover {
  z-index: 1; position: relative;
}

[data-show-bg="true"] .canvas-wrap {
  background-image:
    linear-gradient( 45deg, #8882 25%, transparent 25%),
    linear-gradient(-45deg, #8882 25%, transparent 25%),
    linear-gradient( 45deg, transparent 75%, #8882 75%),
    linear-gradient(-45deg, transparent 75%, #8882 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
[data-show-grid="true"] .pixel-cell {
  --cc: color-mix(in srgb, var(--accent) 25%, transparent);
  outline: 1px solid var(--cc);
  &:hover { background: var(--cc); }
}
[data-show-gap="true"] .pixel-grid {
  gap: 1px;
}

/* ── used colors ── */
.used-colors {
  display: flex; gap: .3rem; flex-wrap: wrap; flex-shrink: 0;
}
.used-swatch {
  width: 1.4rem; height: 1.4rem; border-radius: .3rem; cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 15%, transparent);
  transition: transform .1s;
}
.used-swatch:hover { transform: scale(1.15); }

.used-swatch.transparent {
  background: transparent;
  cursor: pointer;
  /* gleiche checkerboard wie canvas-wrap */
  background-image:
    linear-gradient(45deg, #8882 25%, transparent 25%),
    linear-gradient(-45deg, #8882 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #8882 75%),
    linear-gradient(-45deg, transparent 75%, #8882 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}