.pixiepimp {
  --pp-accent: #68b5ff;
  --pp-border: #cfd5db;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 1.25rem 0;
  padding: 0;
  border: 1px solid var(--pp-border);
  border-radius: 8px;
  overflow: hidden;
  background: #e9edf0;
  color: #20242a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pixiepimp *, .pixiepimp *::before, .pixiepimp *::after { box-sizing: border-box; }
.pixiepimp__workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; min-width: 0; }
.pixiepimp__main { min-width: 0; padding: .75rem; background: #f3f5f6; }
.pixiepimp__header { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .75rem; min-height: 42px; margin-bottom: .65rem; }
.pixiepimp__file-button, .pixiepimp__toolbar button {
  border: 1px solid #aeb6bf;
  border-radius: 6px;
  background: #fff;
  color: #1e252c;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  padding: .6rem .85rem;
}
.pixiepimp__file-button { display: inline-flex; flex: 0 0 auto; font-weight: 600; }
.pixiepimp__file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.pixiepimp__file-button:hover, .pixiepimp__toolbar button:hover:not(:disabled) { border-color: #64717e; background: #f2f5f7; }
.pixiepimp__file-button:focus-within, .pixiepimp__toolbar button:focus-visible, .pixiepimp__viewport:focus-visible { outline: 3px solid rgba(55, 143, 228, .4); outline-offset: 2px; }
.pixiepimp__info { min-width: 0; flex: 0 1 auto; overflow-wrap: anywhere; color: #4d5863; }
.pixiepimp__metadata { display: flex; flex: 1 1 420px; flex-wrap: wrap; gap: .3rem .75rem; min-width: 0; color: #37424c; font-size: .82rem; line-height: 1.35; }
.pixiepimp__metadata[hidden] { display: none; }
.pixiepimp__metadata-item { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.pixiepimp__metadata.is-empty { color: #717b84; font-style: italic; }
.pixiepimp__error { margin: 0 0 .65rem; padding: .6rem .75rem; border-left: 4px solid #b42318; background: #fff0ee; color: #7a1912; }
.pixiepimp__viewport {
  position: relative;
  width: 100%;
  height: clamp(360px, 64vh, 720px);
  overflow: hidden;
  border-radius: 6px;
  background-color: #1b1e22;
  background-image: linear-gradient(45deg, #22262b 25%, transparent 25%), linear-gradient(-45deg, #22262b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #22262b 75%), linear-gradient(-45deg, transparent 75%, #22262b 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pixiepimp__viewport.is-dragging { cursor: grabbing; }
.pixiepimp__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: #b9c0c8; text-align: center; }
.pixiepimp__empty[hidden] { display: none; }
.pixiepimp__image { position: absolute; top: 0; left: 0; max-width: none !important; max-height: none !important; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.pixiepimp__panel { min-width: 0; border-left: 1px solid #c8ced4; background: #e2e6e9; }
.pixiepimp__tool-section { margin: 0; padding: 0; }
.pixiepimp__tool-section h2 { margin: 0; padding: .8rem 1rem; border-bottom: 1px solid #c8ced4; color: #29323a; font-size: .95rem; font-weight: 650; line-height: 1.2; }

/* ── Ansicht: kompakte Icon-Werkzeugleiste ──────────────────────────────── */
.pixiepimp__toolbar { padding: .6rem .75rem .5rem; }

/* Icon-Leiste: alle 5 Buttons in einer Reihe */
.pixiepimp__view-iconbar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .55rem;
}

/* Basis-Icon-Button */
.pixiepimp__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #aeb6bf;
  border-radius: 6px;
  background: #fff;
  color: #2c343c;
  cursor: pointer;
  line-height: 1;
  transition: border-color .12s, background .12s, color .12s;
  touch-action: manipulation;
}
.pixiepimp__icon-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.pixiepimp__icon-btn:hover:not(:disabled) {
  border-color: #5a6673;
  background: #eef1f4;
  color: #16202a;
}
.pixiepimp__icon-btn:focus-visible {
  outline: 3px solid rgba(55, 143, 228, .45);
  outline-offset: 2px;
}
.pixiepimp__icon-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}
/* 100 %-Beschriftungs-Button etwas breiter */
.pixiepimp__icon-btn--label {
  width: auto;
  min-width: 46px;
  padding: 0 .5rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
/* Vollbild-Button: optisch hervorgehoben */
.pixiepimp__icon-btn--fullscreen {
  margin-left: auto;
}
.pixiepimp__icon-btn--fullscreen[aria-pressed="true"] {
  border-color: #2b84c2;
  background: #e3effa;
  color: #184c78;
}
/* Mini-Buttons neben dem Zoom-Regler */
.pixiepimp__icon-btn--xs {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pixiepimp__icon-btn--xs svg {
  width: 12px;
  height: 12px;
}

/* Zoom-Regler-Zeile */
.pixiepimp__zoom-slider-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .35rem;
}
.pixiepimp__zoom-range {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  cursor: pointer;
  accent-color: #3b82d4;
}
.pixiepimp__zoom-range:disabled { cursor: not-allowed; opacity: .45; }

.pixiepimp__zoom {
  flex: 0 0 auto;
  min-width: 4.2rem;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: right;
  color: #37424c;
}
.pixiepimp__fullscreen-hint { margin: 0; color: #69737d; font-size: .74rem; text-align: center; }

/* Touch-Vergrößerung für Icon-Buttons auf Mobilgeräten */
@media (pointer: coarse) {
  .pixiepimp__icon-btn {
    min-width: 44px;
    min-height: 44px;
    width: auto;
    padding: 0 .55rem;
  }
  .pixiepimp__icon-btn--label {
    min-width: 52px;
  }
  .pixiepimp__icon-btn--xs {
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
  }
}
.pixiepimp__tool-details { border-top: 1px solid #c8ced4; }
.pixiepimp__tool-summary { padding: .8rem 1rem; color: #29323a; font-size: .95rem; font-weight: 650; cursor: pointer; user-select: none; line-height: 1.2; }
.pixiepimp__tool-summary:hover { background: #dce1e6; }
.pixiepimp__tool-summary:focus-visible { outline: 3px solid rgba(55, 143, 228, .4); outline-offset: -2px; }

.pixiepimp__exposure { padding: 0 1rem 1rem; }
.pixiepimp__exposure-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .4rem; color: #4a555f; font-size: .9rem; }
.pixiepimp__exposure-value { min-width: 4.5rem; font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.pixiepimp__exposure-slider { width: 100%; margin: .25rem 0 .6rem; }
.pixiepimp__exposure-controls { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .4rem; }
.pixiepimp__exposure-reset { width: 100%; }
.pixiepimp__toggle { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #4f5963; }
.pixiepimp__toggle-input { margin: 0; }
.pixiepimp__toggle-label { cursor: pointer; }
.pixiepimp__exposure-hint { margin: 0; color: #69737d; font-size: .78rem; line-height: 1.4; }

.pixiepimp__levels { padding: 0 1rem 1rem; }
.pixiepimp__histogram-container { margin-bottom: .75rem; padding: .4rem .4rem 0; background: #1b1e22; border-radius: 4px; border: 1px solid #2d3339; }
.pixiepimp__histogram { display: block; width: 100%; height: auto; border-radius: 2px; }
.pixiepimp__histogram-label { margin-top: .35rem; padding-bottom: .35rem; font-size: .7rem; color: #8e98a3; text-align: center; }

/* Marker-Track */
.pixiepimp__levels-track {
  position: relative;
  height: 14px;
  margin: 0 0 0;
  background: #2d3339;
  border-top: 1px solid #3d4750;
  user-select: none;
}

/* Dreiecks-Marker */
.pixiepimp__levels-marker {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #888;
  transform: translateX(-50%);
  cursor: ew-resize;
  outline: none;
  transition: filter .1s;
}
.pixiepimp__levels-marker:focus-visible { filter: drop-shadow(0 0 3px rgba(55,143,228,.9)); }
.pixiepimp__levels-marker--black { border-bottom-color: #111; filter: drop-shadow(0 0 1px #aaa); }
.pixiepimp__levels-marker--gamma { border-bottom-color: #999; }
.pixiepimp__levels-marker--white { border-bottom-color: #fff; filter: drop-shadow(0 0 1px #444); }
.pixiepimp__levels-marker[disabled] { cursor: not-allowed; opacity: .4; pointer-events: none; }

.pixiepimp__levels-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .2rem; font-size: .85rem; color: #4a555f; }
.pixiepimp__levels-row--spaced { margin-top: .5rem; }
.pixiepimp__levels-num { width: 4.8rem; padding: .2rem .35rem; border: 1px solid #aeb6bf; border-radius: 4px; background: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; text-align: right; }
.pixiepimp__levels-num:focus-visible { outline: 2px solid rgba(55, 143, 228, .6); }
.pixiepimp__tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .75rem 0 .5rem; }
.pixiepimp__tool-actions button {
  width: 100%;
  padding: .5rem .4rem;
  border: 1px solid #aeb6bf;
  border-radius: 6px;
  background: #fff;
  color: #1e252c;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
}
.pixiepimp__tool-actions button:hover:not(:disabled) { border-color: #64717e; background: #f2f5f7; }
.pixiepimp__tool-actions button:disabled { cursor: not-allowed; opacity: .5; }
.pixiepimp__levels-status { margin: .3rem 0; padding: .4rem .5rem; border-radius: 4px; background: #e3effa; color: #184c78; font-size: .75rem; line-height: 1.3; }
.pixiepimp__levels-status[hidden] { display: none; }

/* ── White Balance ─────────────────────────────────────────────────────── */
.pixiepimp__wb { padding: 0 1rem 1rem; }
.pixiepimp__wb-group { margin-bottom: .65rem; }
.pixiepimp__wb-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .15rem; font-size: .85rem; color: #4a555f; }
.pixiepimp__wb-num {
  width: 4.8rem;
  padding: .2rem .35rem;
  border: 1px solid #aeb6bf;
  border-radius: 4px;
  background: #fff;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #1e252c;
}
.pixiepimp__wb-num:focus-visible { outline: 2px solid rgba(55, 143, 228, .6); }
.pixiepimp__wb-num:disabled { opacity: .5; cursor: not-allowed; }

/* Colour gradient bar above each slider */
.pixiepimp__wb-gradient {
  height: 6px;
  border-radius: 3px;
  margin: .1rem 0 0;
}
.pixiepimp__wb-gradient--temp {
  background: linear-gradient(to right, #6ea8e8, #e8c84a);
}
.pixiepimp__wb-gradient--tint {
  background: linear-gradient(to right, #5dba6a, #c060b8);
}
.pixiepimp__wb-slider { width: 100%; margin: .1rem 0 .15rem; }
.pixiepimp__wb-labels {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: #69737d;
  margin-bottom: .2rem;
}

/* Eyedropper active state */
.pixiepimp__wb-eyedropper.is-active {
  background: #e3effa;
  border-color: #2b84c2;
  color: #184c78;
  font-weight: 650;
}

.pixiepimp__hs { padding: 0 1rem 1rem; }
.pixiepimp__hs-group { margin-bottom: .6rem; }
.pixiepimp__hs-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .2rem; font-size: .85rem; color: #4a555f; }
.pixiepimp__hs-num { width: 4.8rem; padding: .2rem .35rem; border: 1px solid #aeb6bf; border-radius: 4px; background: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; text-align: right; }
.pixiepimp__hs-num:focus-visible { outline: 2px solid rgba(55, 143, 228, .6); }
.pixiepimp__hs-slider { width: 100%; margin: .15rem 0 .25rem; }

/* ── Contrast slider (within levels block) ────────────────────────────── */
.pixiepimp__levels-contrast-slider { width: 100%; margin: .0rem 0 .25rem; }

/* ── Black-and-white tool ────────────────────────────────────────────────── */
.pixiepimp__bw { padding: 0 1rem 1rem; }
.pixiepimp__bw-toggle-row { margin-bottom: .6rem; }
.pixiepimp__bw-color-group { margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 1px solid #e5e7eb; }
.pixiepimp__bw-color-slider { width: 100%; margin: .15rem 0 .1rem; }
.pixiepimp__bw-color-slider:disabled { opacity: .5; cursor: not-allowed; }
.pixiepimp__bw-color-labels { display: flex; justify-content: space-between; font-size: .75rem; color: #717b84; margin-bottom: .3rem; }
.pixiepimp__bw-channels { }
.pixiepimp__bw-group { margin-bottom: .6rem; }
.pixiepimp__bw-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .2rem; font-size: .85rem; color: #4a555f; }
.pixiepimp__bw-num { width: 4.8rem; padding: .2rem .35rem; border: 1px solid #aeb6bf; border-radius: 4px; background: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; text-align: right; }
.pixiepimp__bw-num:focus-visible { outline: 2px solid rgba(55, 143, 228, .6); }
.pixiepimp__bw-num:disabled { opacity: .5; cursor: not-allowed; }
.pixiepimp__bw-slider { width: 100%; margin: .15rem 0 .25rem; }
.pixiepimp__bw-slider:disabled { opacity: .5; cursor: not-allowed; }
.pixiepimp__bw-warning { margin: .3rem 0; padding: .35rem .5rem; border-radius: 4px; background: #fff5d6; color: #7a5700; border-left: 3px solid #e6a800; font-size: .78rem; line-height: 1.35; }
.pixiepimp__bw-warning[hidden] { display: none; }

/* ── Crop tool ─────────────────────────────────────────────────────────── */
.pixiepimp__crop { padding: 0 1rem 1rem; }
.pixiepimp__crop-preset-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .85rem; color: #4a555f; }
.pixiepimp__crop-preset-label { flex: 0 0 auto; }
.pixiepimp__crop-preset {
  flex: 1 1 auto;
  padding: .3rem .4rem;
  border: 1px solid #aeb6bf;
  border-radius: 4px;
  background: #fff;
  color: #1e252c;
  font: inherit;
  font-size: .85rem;
}
.pixiepimp__crop-preset:disabled { opacity: .5; cursor: not-allowed; }
.pixiepimp__crop-actions-swap { margin-bottom: .4rem; grid-template-columns: 1fr; }
.pixiepimp__crop-actions-swap button { grid-column: 1 / -1; }
.pixiepimp__crop-dimensions-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .5rem; font-size: .82rem; color: #4a555f; }
.pixiepimp__crop-dim-label { flex: 0 0 auto; }
.pixiepimp__crop-dim-value { font-variant-numeric: tabular-nums; font-weight: 650; }
.pixiepimp__crop-actions-main { margin-top: 0; }
.pixiepimp__crop-actions-editing { }
.pixiepimp__crop-status { margin: .35rem 0; padding: .4rem .5rem; border-radius: 4px; background: #fff5d6; color: #7a5700; border-left: 3px solid #e6a800; font-size: .78rem; line-height: 1.35; }
.pixiepimp__crop-status[hidden] { display: none; }

/* Precise numeric crop inputs */
.pixiepimp__crop-precise { margin-bottom: .5rem; }
.pixiepimp__crop-precise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .5rem; }
.pixiepimp__crop-precise-cell { display: flex; flex-direction: column; gap: .15rem; }
.pixiepimp__crop-precise-cell label { font-size: .75rem; color: #5d6872; }
.pixiepimp__crop-precise-cell input {
  width: 100%;
  padding: .25rem .35rem;
  border: 1px solid #aeb6bf;
  border-radius: 4px;
  background: #fff;
  font-size: .83rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #1e252c;
}
.pixiepimp__crop-precise-cell input:focus-visible { outline: 2px solid rgba(55, 143, 228, .6); }
.pixiepimp__crop-precise-cell input:disabled { opacity: .5; cursor: not-allowed; }

/* Crop overlay canvas – sits directly over the viewport */
.pixiepimp__crop-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  touch-action: none;
}
.pixiepimp__crop-overlay.is-active {
  pointer-events: auto;
  cursor: crosshair;
}
.pixiepimp__crop-overlay.drag-move { cursor: move; }
.pixiepimp__crop-overlay.drag-nw  { cursor: nw-resize; }
.pixiepimp__crop-overlay.drag-ne  { cursor: ne-resize; }
.pixiepimp__crop-overlay.drag-sw  { cursor: sw-resize; }
.pixiepimp__crop-overlay.drag-se  { cursor: se-resize; }
.pixiepimp__crop-overlay.drag-n   { cursor: n-resize; }
.pixiepimp__crop-overlay.drag-s   { cursor: s-resize; }
.pixiepimp__crop-overlay.drag-w   { cursor: w-resize; }
.pixiepimp__crop-overlay.drag-e   { cursor: e-resize; }

/* ── Drehen und Ausrichten ───────────────────────────────────────────────── */
.pixiepimp__rotate { padding: 0 1rem 1rem; }
.pixiepimp__rotate-90-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.pixiepimp__rotate-90-row button {
  width: 100%;
  padding: .5rem .4rem;
  border: 1px solid #aeb6bf;
  border-radius: 6px;
  background: #fff;
  color: #1e252c;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
}
.pixiepimp__rotate-90-row button:hover:not(:disabled) { border-color: #64717e; background: #f2f5f7; }
.pixiepimp__rotate-90-row button:disabled { cursor: not-allowed; opacity: .5; }
.pixiepimp__rotate-angle-group { margin-bottom: .6rem; }
.pixiepimp__rotate-angle-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .2rem; font-size: .85rem; color: #4a555f; }
.pixiepimp__rotate-num {
  width: 5.2rem;
  padding: .2rem .35rem;
  border: 1px solid #aeb6bf;
  border-radius: 4px;
  background: #fff;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #1e252c;
}
.pixiepimp__rotate-num:focus-visible { outline: 2px solid rgba(55,143,228,.6); }
.pixiepimp__rotate-num:disabled { opacity: .5; cursor: not-allowed; }
.pixiepimp__rotate-slider { width: 100%; margin: .15rem 0 .25rem; }
.pixiepimp__rotate-dimensions-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .5rem; font-size: .82rem; color: #4a555f; }
.pixiepimp__rotate-dim-label { flex: 0 0 auto; }
.pixiepimp__rotate-dim-value { font-variant-numeric: tabular-nums; font-weight: 650; }
.pixiepimp__rotate-actions-main { margin-top: 0; }
.pixiepimp__rotate-status { margin: .35rem 0; padding: .4rem .5rem; border-radius: 4px; background: #fff5d6; color: #7a5700; border-left: 3px solid #e6a800; font-size: .78rem; line-height: 1.35; }
.pixiepimp__rotate-status[hidden] { display: none; }
.pixiepimp__rotate-status.is-warn { background: #fff5d6; color: #7a5700; border-color: #e6a800; }

/* Rotate overlay canvas – sits directly over the viewport */
.pixiepimp__rotate-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 11;
  touch-action: none;
}
.pixiepimp__rotate-overlay.is-active { pointer-events: none; /* Grid only, no pointer interaction */ }

/* ── Export ─────────────────────────────────────────────────────────────── */
.pixiepimp__export { padding: 0 1rem 1rem; }
.pixiepimp__export-info-box { margin-bottom: .75rem; padding: .5rem .6rem; border-radius: 4px; background: #d7e0e7; border: 1px solid #bdc7d0; font-size: .8rem; color: #37424c; line-height: 1.4; }
.pixiepimp__export-headline { margin: 0 0 .2rem; font-weight: 650; color: #20262c; }
.pixiepimp__export-dimensions { margin: 0 0 .2rem; color: #404c56; }
.pixiepimp__export-dim-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.pixiepimp__export-meta-notice { margin: 0; font-size: .75rem; color: #5d6872; font-style: italic; }
.pixiepimp__export-quality-group { margin-bottom: .75rem; }
.pixiepimp__export-quality-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .2rem; font-size: .85rem; color: #4a555f; }
.pixiepimp__export-quality-value { min-width: 3.5rem; font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.pixiepimp__export-quality-slider { width: 100%; margin: .15rem 0 .25rem; }
.pixiepimp__export-button {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #236fa1;
  border-radius: 6px;
  background: #2b84c2;
  color: #fff;
  font: inherit;
  font-weight: 650;
  font-size: .9rem;
  cursor: pointer;
  line-height: 1.2;
}
.pixiepimp__export-button:hover:not(:disabled) { border-color: #1a5882; background: #236fa1; }
.pixiepimp__export-button:focus-visible { outline: 3px solid rgba(43, 132, 194, .5); outline-offset: 2px; }
.pixiepimp__export-button:disabled { cursor: not-allowed; opacity: .5; background: #88a3b5; border-color: #7b94a5; }
.pixiepimp__export-status { margin-top: .5rem; padding: .45rem .6rem; border-radius: 4px; background: #e3effa; color: #184c78; font-size: .78rem; line-height: 1.35; }
.pixiepimp__export-status.is-error { background: #fff0ee; color: #7a1912; border-left: 3px solid #b42318; }
.pixiepimp__export-status[hidden] { display: none; }

.pixiepimp__privacy { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .45rem .75rem; border-top: 1px solid #c8ced4; background: #f3f5f6; color: #69737d; font-size: .76rem; }

.pixiepimp:fullscreen,
.pixiepimp.is-fullscreen {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #15191d;
}
.pixiepimp:fullscreen::backdrop { background: #15191d; }
.pixiepimp:fullscreen .pixiepimp__workspace,
.pixiepimp.is-fullscreen .pixiepimp__workspace { min-height: 0; }
.pixiepimp:fullscreen .pixiepimp__main,
.pixiepimp.is-fullscreen .pixiepimp__main { display: flex; flex-direction: column; min-height: 0; }
.pixiepimp:fullscreen .pixiepimp__header,
.pixiepimp.is-fullscreen .pixiepimp__header { flex: 0 0 auto; }
.pixiepimp:fullscreen .pixiepimp__viewport,
.pixiepimp.is-fullscreen .pixiepimp__viewport { flex: 1 1 auto; height: auto; min-height: 0; }
.pixiepimp:fullscreen .pixiepimp__panel,
.pixiepimp.is-fullscreen .pixiepimp__panel { min-height: 0; overflow-y: auto; }

@media (max-width: 760px) {
  .pixiepimp__workspace { grid-template-columns: minmax(0, 1fr); }
  .pixiepimp__panel { border-top: 1px solid #c8ced4; border-left: 0; }
  .pixiepimp__viewport { height: clamp(300px, 58vh, 560px); }
  .pixiepimp:fullscreen .pixiepimp__workspace,
  .pixiepimp.is-fullscreen .pixiepimp__workspace { grid-template-rows: minmax(0, 1fr) auto; }
  .pixiepimp:fullscreen .pixiepimp__panel,
  .pixiepimp.is-fullscreen .pixiepimp__panel { max-height: min(34vh, 260px); }
}

@media (max-width: 520px) {
  .pixiepimp__main { padding: .6rem; }
  .pixiepimp__header { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .pixiepimp__viewport { height: clamp(280px, 55vh, 480px); }
  .pixiepimp__privacy { flex-direction: column; gap: .2rem; }
}