/* ============ Basis ============ */
:root {
  --bg: #08080a;
  --line: #2a2a31;
  --text: #ececf1;
  --muted: #8b8b96;
  --accent: #3d8bff;
  --danger: #ff5a4f;
  --chassis: #16161a;
  --chassis-edge: #27272d;
  --cell: 110px;
  --gap: 14px;
  --pad: 26px;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

input[type="text"] { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#app {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "deck" "reserve";
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(ellipse at 50% 40%, #18181d 0%, #0b0b0d 55%, #050506 100%);
}

/* ============ Bediening rechtsboven (zweeft in de lege strook boven het bord) ============ */
.ctrl {
  position: absolute;
  z-index: 5;
  top: calc(env(safe-area-inset-top) + 10px);
  right: calc(env(safe-area-inset-right) + 18px);
}
.ctrl-group { display: flex; gap: 8px; }

.ctrl-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1c1c21, #141418);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #d4d4dc;
}
.ctrl-btn.icon { width: 38px; padding: 0; }
.ctrl-btn:active { transform: translateY(1px); filter: brightness(1.25); }
.ctrl-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.ctrl-btn.stop { color: #ff7a70; border-color: #4a2020; background: linear-gradient(180deg, #2a1415, #1a0e0f); }
.ctrl-btn .sq { width: 13px; height: 13px; border-radius: 3px; background: currentColor; }

.group-edit { display: none !important; }
body.editing .group-edit { display: flex !important; }
body.editing .group-play { display: none !important; }

/* ============ Deck / behuizing ============ */
.deck-wrap {
  grid-area: deck;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck {
  position: relative;
  padding: var(--pad);
  border-radius: calc(var(--pad) * 1.6);
  background-color: var(--chassis);
  background-image: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.28) 100%);
  border: 1px solid var(--chassis-edge);
  transition: background-color .25s, border-color .25s;
  box-shadow:
    0 40px 90px rgba(0,0,0,.75),
    0 8px 20px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -3px 8px rgba(0,0,0,.6);
}
/* subtiele "matte" glans bovenop de behuizing */
.deck::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 35%);
  pointer-events: none;
}

.grid {
  display: grid;
  gap: var(--gap);
  touch-action: none;
}

/* ============ Toetsen ============ */
.key {
  --c: #2a2a31;
  --glow: #8fc9ff;
  /* --key: maat voor binnenwerk (tekst, randen); groeit mee bij 2×2 */
  --key: calc(var(--cell) * var(--m, 1));
  position: relative;
  width: calc(var(--cell) * var(--w, 1) + var(--gap) * (var(--w, 1) - 1));
  height: calc(var(--cell) * var(--h, 1) + var(--gap) * (var(--h, 1) - 1));
  padding: calc(var(--key) * .07);
  border-radius: calc(var(--key) * .17);
  background: linear-gradient(180deg, #1e1e23 0%, #0b0b0d 100%);
  box-shadow:
    0 3px 0 #000,
    0 6px 12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.8);
  transition: transform .07s ease-out, box-shadow .18s ease;
}

.key.pressed {
  transform: translateY(3px) scale(.97);
  box-shadow:
    0 0 0 #000,
    0 2px 5px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.8);
}

.lcd {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--key) * .1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c);
  background-image:
    radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 calc(var(--key) * .12) rgba(0,0,0,.45);
  transition: filter .15s;
}

.key.empty .lcd { background: #040405; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 12px rgba(0,0,0,.8); }

.kimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.kemoji {
  font-size: calc(var(--key) * .42);
  line-height: 1;
  margin-bottom: calc(var(--key) * .1);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
  pointer-events: none;
}

.label {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 6%;
  text-align: center;
  font-size: calc(var(--key) * .115);
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  pointer-events: none;
}

.key.novis .label {
  position: static;
  padding: 0 7%;
  font-size: calc(var(--key) * .15);
  -webkit-line-clamp: 3;
}
.key.light.novis .label { color: #141414; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

.plus {
  font-size: calc(var(--key) * .32);
  font-weight: 300;
  color: #3a3a44;
  opacity: 0;
  transition: opacity .2s;
}
body.editing .key.empty .plus { opacity: 1; }

.nosound {
  position: absolute;
  top: 5%;
  right: 6%;
  font-size: calc(var(--key) * .12);
  display: none;
}
body.editing .nosound { display: block; }

/* Speelt: gloed in eigen kleur + voortgangsbalk */
.prog {
  position: absolute;
  left: 0;
  bottom: 0;
  height: max(3px, calc(var(--key) * .045));
  width: calc(var(--p, 0) * 100%);
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 8px rgba(255,255,255,.8);
  opacity: 0;
}

.key.playing {
  box-shadow:
    0 0 0 2px var(--glow),
    0 0 calc(var(--key) * .28) var(--glow),
    0 6px 12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.key.playing.pressed { transform: translateY(3px) scale(.97); }
.key.playing .lcd { filter: brightness(1.18) saturate(1.1); }
.key.playing .prog { opacity: 1; }

/* Bewerkmodus */
body.editing .grid .key::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--key) * .2);
  border: 1.5px dashed rgba(255,255,255,.16);
  pointer-events: none;
}
body.editing .grid .key { cursor: grab; }
.key.dragging { opacity: .25; }
.key.drop-target::after { border: 2px solid var(--accent) !important; }

.ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform: scale(1.08);
  opacity: .92;
  box-shadow: 0 20px 40px rgba(0,0,0,.7) !important;
}

/* ============ Reservebak (alleen in bewerkmodus) ============ */
.reserve {
  grid-area: reserve;
  display: none;
  align-items: center;
  gap: 18px;
  height: 96px;
  margin: 0 18px 12px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1.5px dashed #34343d;
  background: rgba(255,255,255,.02);
  transition: border-color .15s, background .15s;
}
body.editing .reserve { display: flex; }
.reserve.drop-target { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.reserve-head { display: flex; flex-direction: column; gap: 4px; width: 210px; flex: none; }
.reserve-head small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.reserve-keys {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 8px 2px;
  touch-action: none;
}
.reserve-keys .key { --cell: 70px; --gap: 0px; flex: none; }
.reserve-keys .key .label { font-size: 11px; }
.reserve-keys .key.novis .label { font-size: 12px; }
.reserve-keys .key::after { display: none; }
.reserve-empty { color: #4a4a54; font-size: 14px; font-weight: 600; }
.reserve.has-keys .reserve-empty { display: none; }

/* ============ Modals ============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade .15s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  width: min(1040px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #131317;
  border: 1px solid #2a2a31;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
.sheet.small { width: min(440px, 100%); }

.sheet-head {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #24242a;
}
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.sheet-head .right { justify-self: end; }
.sheet-head .link { justify-self: start; }

.sheet-body {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 28px;
  padding: 20px 22px 22px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }

input[type="text"] {
  height: 44px;
  width: 100%;
  border-radius: 11px;
  border: 1px solid #2e2e36;
  background: #0b0b0e;
  color: var(--text);
  padding: 0 12px;
  font-size: 16px;
  outline: none;
}
input[type="text"]:focus { border-color: var(--accent); }

.btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid #2e2e36;
  background: #1d1d22;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.btn:active { filter: brightness(1.25); }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn.link { background: none; border: 0; color: var(--accent); padding: 0 6px; }
.btn.danger { color: var(--danger); }
.btn.danger.solid { background: var(--danger); color: #fff; border-color: transparent; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .4; pointer-events: none; }

.preview-wrap { display: flex; justify-content: center; margin: 4px 0 20px; }
.preview-wrap .key { --cell: 130px; }
.preview-wrap { min-height: 150px; align-items: center; }

.ed-note { margin: 2px 0 0; font-size: 12.5px; color: #ffc53d; line-height: 1.4; }
.toggle-field { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.tf-text { display: flex; flex-direction: column; gap: 4px; }
.tf-title { font-size: 15px; font-weight: 700; }
.tf-text small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ============ Speciale knop ============ */
.key.special {
  box-shadow:
    0 3px 0 #000,
    0 6px 12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 2px color-mix(in srgb, var(--glow) 60%, transparent);
}
body:not(.no-pulse) .key.special:not(.playing):not(.empty) {
  animation: special-pulse 2.6s ease-in-out infinite;
}
@keyframes special-pulse {
  0%, 100% {
    box-shadow:
      0 3px 0 #000,
      0 6px 12px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 0 2px color-mix(in srgb, var(--glow) 45%, transparent),
      0 0 calc(var(--key) * .06) color-mix(in srgb, var(--glow) 20%, transparent);
  }
  50% {
    box-shadow:
      0 3px 0 #000,
      0 6px 12px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 0 2px color-mix(in srgb, var(--glow) 95%, transparent),
      0 0 calc(var(--key) * .3) color-mix(in srgb, var(--glow) 65%, transparent);
  }
}

@property --ring-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.key.special.playing {
  box-shadow:
    0 0 0 2px var(--glow),
    0 0 calc(var(--key) * .35) var(--glow),
    0 6px 12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.ring {
  position: absolute;
  inset: -7px;
  border-radius: calc(var(--key) * .23);
  padding: 6px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 6px #fff);
  background: conic-gradient(from var(--ring-a), transparent 0deg 150deg, color-mix(in srgb, var(--glow) 60%, transparent) 230deg, #fff 320deg, #fff 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .2s;
}
.key.special.playing .ring { opacity: 1; animation: ring-spin 1.3s linear infinite; }
@keyframes ring-spin { to { --ring-a: 360deg; } }

/* Deck licht op zolang een speciale knop speelt */
.deck.flash {
  border-color: var(--deck-glow);
  animation: deck-flash 1.1s ease-in-out infinite;
}
@keyframes deck-flash {
  0%, 100% {
    box-shadow:
      0 40px 90px rgba(0,0,0,.75),
      0 0 0 2px var(--deck-glow),
      0 0 30px color-mix(in srgb, var(--deck-glow) 45%, transparent),
      inset 0 0 20px color-mix(in srgb, var(--deck-glow) 15%, transparent);
  }
  50% {
    box-shadow:
      0 40px 90px rgba(0,0,0,.75),
      0 0 0 3px var(--deck-glow),
      0 0 90px color-mix(in srgb, var(--deck-glow) 80%, transparent),
      inset 0 0 40px color-mix(in srgb, var(--deck-glow) 30%, transparent);
  }
}

.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.sw {
  aspect-ratio: 1;
  border-radius: 9px;
  border: 2px solid transparent;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  padding: 0;
}
.sw.on { border-color: #fff; }
.sw.custom {
  position: relative;
  overflow: hidden;
  background: conic-gradient(#ff4d4d, #ffd84d, #4dff88, #4dd8ff, #6b4dff, #ff4dd8, #ff4d4d);
}
.sw.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }

.seg {
  display: flex;
  background: #0b0b0e;
  border: 1px solid #2e2e36;
  border-radius: 11px;
  padding: 3px;
}
.seg button {
  flex: 1;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
}
.seg button.on { background: #2b2b33; color: #fff; }

.pane { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emoji-grid button {
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: #1c1c21;
  font-size: 19px;
  padding: 0;
  line-height: 1;
}
.emoji-grid button.on { background: #34343e; box-shadow: inset 0 0 0 2px var(--accent); }

.sound-row { display: flex; align-items: center; gap: 12px; }
.file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c9c9d2;
  font-size: 15px;
}

.wave-wrap {
  position: relative;
  height: 190px;
  border-radius: 13px;
  background: #09090b;
  border: 1px solid #26262c;
  overflow: hidden;
  touch-action: none;
}
#edWave { display: block; width: 100%; height: 100%; }
.wave-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  padding: 20px;
}

.times {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
}
.time-box { display: flex; flex-direction: column; gap: 4px; }
.time-box.center { align-items: center; }
.time-box.right { align-items: flex-end; }
.time-box output { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; min-width: 62px; text-align: center; }
.nudge { display: flex; align-items: center; gap: 4px; }
.nudge button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #2e2e36;
  background: #1d1d22;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.sliders { margin: 6px 0 16px; }
.slider-row {
  display: grid;
  grid-template-columns: 78px 1fr 62px;
  align-items: center;
  gap: 12px;
  height: 46px;
  font-size: 15px;
  font-weight: 600;
}
.slider-row output { text-align: right; font-variant-numeric: tabular-nums; color: #c9c9d2; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 0%), #2e2e36 var(--fill, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: #f2f2f5;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #2e2e36; }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #f2f2f5; }
input[type="range"]:disabled { opacity: .35; }


/* Instellingen */
.settings-sheet { width: min(720px, 100%); }
.settings-body {
  padding: 8px 22px 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.set-section { margin-top: 18px; }
.set-section h3 {
  margin: 0 0 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  font-weight: 700;
}
.set-section > .set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: #1a1a1f;
  border: 1px solid #25252b;
  border-bottom-width: 0;
}
.set-section > h3 + .set-row { border-radius: 13px 13px 0 0; }
.set-section > .set-row:last-child { border-radius: 0 0 13px 13px; border-bottom-width: 1px; }
.set-section > h3 + .set-row:last-child { border-radius: 13px; }
.set-row.column { flex-direction: column; align-items: stretch; gap: 12px; }
.set-row.column > .btn { align-self: flex-start; }
.set-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-label span { font-size: 16px; font-weight: 600; }
.set-label small { font-size: 13px; color: var(--muted); line-height: 1.35; }
label.set-row { cursor: pointer; }

.slider-note { margin: -4px 0 4px 90px; font-size: 12.5px; color: var(--muted); line-height: 1.4; min-height: 1em; }
.set-status.ok { color: #34c759; }
.set-status.warn { color: #ffc53d; }
.set-value { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.set-slider { display: grid; grid-template-columns: 1fr 62px; align-items: center; gap: 12px; }
.set-slider output { text-align: right; font-variant-numeric: tabular-nums; color: #c9c9d2; font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  position: relative;
}
.chip i {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -8px 14px rgba(0,0,0,.25);
  border: 2px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.chip.on { color: #fff; }
.chip.on i { outline-color: #fff; }
.chip.custom i { background: conic-gradient(#ff4d4d, #ffd84d, #4dff88, #4dd8ff, #6b4dff, #ff4dd8, #ff4d4d); }
.chip.custom.on i { background: var(--c); }
.chip.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }

.grid-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.grid-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  border-radius: 12px;
  border: 2px solid #2e2e36;
  background: #111115;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.grid-opt i {
  display: grid;
  gap: 3px;
  width: 64px;
  height: 40px;
  align-content: center;
}
.grid-opt b { display: block; aspect-ratio: 1; border-radius: 2px; background: #3a3a44; }
.grid-opt.on { border-color: var(--accent); color: #fff; }
.grid-opt.on b { background: var(--accent); }
.set-note { margin: 0; font-size: 13px; color: #ffc53d; line-height: 1.35; }

.switch {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 16px;
  background: #3a3a42;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  transition: transform .2s;
}
.switch:checked { background: #34c759; }
.switch:checked::after { transform: translateX(20px); }

/* Bijsnijden */
.crop-body { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-view {
  width: 300px;
  height: 300px;
  border-radius: 22px;
  overflow: hidden;
  touch-action: none;
  background:
    repeating-conic-gradient(#1b1b20 0 25%, #121215 0 50%) 0 0 / 20px 20px;
  box-shadow: inset 0 0 0 1px #2e2e36;
}
#cropCanvas { width: 100%; height: 100%; display: block; }
.crop-hint { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
#cropZoom { width: 300px; }

/* Dialoog */
.dialog { padding: 22px; }
.dialog h2 { margin: 0 0 8px; font-size: 18px; }
.dialog p { margin: 0 0 20px; color: #bdbdc6; line-height: 1.45; font-size: 15px; }
.dlg-buttons { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Draai-melding (alleen staand) */
.rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
}
.rotate-icon {
  width: 70px;
  height: 100px;
  border: 4px solid #3a3a44;
  border-radius: 14px;
  animation: turn 2.2s ease-in-out infinite;
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 1100px) {
  .rotate { display: flex; }
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 400;
  transform: translate(-50%, 20px);
  max-width: min(560px, 90vw);
  padding: 12px 18px;
  border-radius: 12px;
  background: #24242b;
  border: 1px solid #34343d;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Smallere schermen (bv. iPad mini): editor iets compacter */
@media (max-width: 900px) {
  .sheet-body { grid-template-columns: 240px 1fr; gap: 20px; padding: 16px; }
  .preview-wrap .key { --cell: 110px; }
}