:root {
  --bg-0: #14141f;
  --bg-1: #1d1d2c;
  --bg-2: #28283a;
  --bg-3: #33334a;
  --fg-0: #f1f1f5;
  --fg-1: #b8b8c4;
  --fg-2: #888893;
  --accent: #5560ff;
  --accent-fg: #ffffff;
  --warn: #d49a3c;
  --warn-bg: #3a2a1a;
  --error: #d44a3c;
  --error-bg: #3a1a1a;
  --ok: #4cb050;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  min-height: 100vh;
  padding: 16px 20px 40px;
}

.app-header {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 16px;
}
.app-header h1 {
  font-size: 18px; font-weight: 600; margin: 0; color: var(--fg-0);
}
.dirty-indicator {
  color: var(--warn); font-size: 12px;
}

.error-banner {
  background: var(--error-bg);
  border-left: 3px solid var(--error);
  color: var(--fg-0);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 13px;
  white-space: pre-wrap;
}

.toolbar {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
  background: var(--bg-1);
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.toolbar button {
  background: var(--bg-2);
  color: var(--fg-0);
  border: 1px solid #00000000;
  padding: 7px 12px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.toolbar button:hover:not(:disabled) { background: var(--bg-3); }
.toolbar button:disabled { color: var(--fg-2); cursor: not-allowed; }
.toolbar-sep { flex: 1; }

.slot-strip {
  display: flex; gap: 5px; flex-wrap: wrap;
  background: var(--bg-1);
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.slot-pill {
  position: relative;
  width: 42px; height: 52px;
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.85), 0 1px 1px rgba(0,0,0,0.7);
  cursor: pointer;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  /* CRITICAL: prevents the default padding-box origin from tiling the
     gradient and leaking opposite-end colors into the border area. */
  background-origin: border-box;
  background-repeat: no-repeat;
  transition: transform 0.08s;
}
.slot-pill:hover { transform: translateY(-1px); }
.slot-pill.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px rgba(85, 96, 255, 0.45);
}

@keyframes slot-flash {
  0%   { box-shadow: 0 0 0 0px rgba(255,255,255,0.95); }
  100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.slot-pill.flash { animation: slot-flash 0.22s ease-out 3; }

/* Editor pane container */
.editor {
  background: var(--bg-1);
  border-radius: 8px;
  padding: 16px;
}
.editor-title {
  font-size: 14px; font-weight: 600; margin: 0 0 12px;
  color: var(--fg-0);
}

.piano {
  position: relative;
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  height: 140px;
  background: var(--bg-0);
  border-radius: 5px;
  overflow: hidden;
  user-select: none;
}
.pk-white {
  background: #e8e8e8;
  border-right: 1px solid #aaa;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
  font-size: 10px; color: #555;
  cursor: pointer;
}
.pk-white:last-of-type { border-right: 0; }
.pk-white.root { background: #ffd5b3; color: #663300; font-weight: 600; }
.pk-white.on   { background: #ffb84d; }
.pk-white.root.on { background: #ff6a3d; color: #fff; }
/* Extrapolated upper-octave notes that the device WILL also play (per the
   Japanese README, the highest defined octave's pattern repeats upward).
   Defined after .root so an extrapolated root in an upper octave shows
   the ghost tint instead of the structural-root peach. */
.pk-white.ghost-on { background: #f6d590; }

.pk-black {
  position: absolute; top: 0; width: 2.3%; height: 62%;
  background: #1c1c2a;
  border-radius: 0 0 3px 3px;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  font-size: 9px; color: #ccc;
  cursor: pointer;
}
/* IMPORTANT: black-key "on" tint differs from white-key tint so the
   highlighted blacks remain visually distinct against highlighted whites. */
.pk-black.on { background: #b87a1f; color: #fff; }
.pk-black.ghost-on { background: #5a4220; }

.octave-ruler {
  display: grid; grid-template-columns: repeat(4, 1fr);
  font-size: 10px; color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: 6px; margin-bottom: 14px;
}
.octave-ruler div {
  text-align: center; padding: 2px 0;
  border-right: 1px dashed var(--bg-3);
}
.octave-ruler div:last-child { border-right: 0; }

.led-editor {
  display: flex; gap: 14px; align-items: center;
  background: var(--bg-2);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.led-control {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-1); font-size: 13px;
}
.led-control input[type="color"] {
  width: 38px; height: 26px;
  background: transparent;
  border: 1px solid var(--bg-3);
  border-radius: 3px;
  padding: 0; cursor: pointer;
}
.led-preview {
  width: 64px; height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, #000, #000);
  background-origin: border-box;
  background-repeat: no-repeat;
  border: 1px solid var(--bg-3);
}
.emphasize-toggle {
  display: flex; align-items: center; gap: 6px;
  color: var(--fg-1); font-size: 13px; cursor: pointer;
}
.btn-clear {
  margin-left: auto;
  background: var(--bg-3);
  color: var(--fg-0);
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.btn-clear:hover { background: #44446a; }

.validation-strip {
  font-size: 12px;
  color: var(--fg-2);
  padding: 6px 0;
}
.validation-strip .ok { color: var(--ok); }
.validation-strip .warn {
  color: var(--warn);
  display: block;
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  padding: 6px 10px;
  border-radius: 3px;
  margin-bottom: 4px;
}

.dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.dialog {
  background: var(--bg-1);
  border: 1px solid var(--bg-3);
  border-radius: 10px;
  padding: 18px 20px;
  width: 480px; max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.dialog-title { margin: 0 0 4px; color: var(--fg-0); }
.dialog-lead { color: var(--fg-2); font-size: 12px; margin: 0 0 14px; }
.dialog-picker {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px;
  background: var(--bg-0); padding: 8px; border-radius: 6px;
  margin-bottom: 14px;
}
.dialog-pill {
  position: relative;
  width: 100%; aspect-ratio: 3/4;
  border-radius: 5px;
  font-size: 11px; font-weight: 600;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.85);
  cursor: pointer;
  border: 2px solid transparent;
  background-origin: border-box;
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.dialog-pill.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}
.dialog-pill.self {
  opacity: 0.35; cursor: not-allowed; filter: grayscale(0.4);
}
.dialog-options {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.dialog-options label {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 5px;
  font-size: 13px; cursor: pointer;
}
.dialog-warning {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #e6c89a;
  margin-bottom: 14px;
}
.dialog-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.dialog-actions button {
  padding: 7px 14px;
  border-radius: 5px;
  border: 1px solid var(--bg-3);
  background: var(--bg-2);
  color: var(--fg-0);
  cursor: pointer;
  font-size: 13px;
}
.dialog-actions button:hover:not(:disabled) { background: var(--bg-3); }
.dialog-actions button#dialog-confirm {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-fg);
}
.dialog-actions button:disabled { opacity: 0.4; cursor: not-allowed; }

.toolbar button.saved-hint {
  box-shadow: inset 0 0 0 2px var(--ok);
}