/**
 * CT MIDI LAB ARRANGE hardware-style UI.
 *
 * Kept as one stylesheet because the visual layer is compact; the domain-heavy
 * JavaScript and PHP are split into focused modules.
 */

:root {
  --bg: #07090c;
  --case: #0d1014;
  --surface: #14181d;
  --surface2: #1a2026;
  --surface3: #0b0e12;
  --line: #2a3139;
  --line2: #3a444f;
  --text: #f2f5f7;
  --muted: #89949f;
  --mint: #27e0bd;
  --cyan: #46bfff;
  --violet: #8b6cff;
  --magenta: #ef52c8;
  --amber: #ffb35c;
  --red: #ff5d70;
  --green: #54dc9a;
  --sidebar: 342px;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html,body {
  min-height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(circle at 74% 0,#161025 0,transparent 34%),radial-gradient(circle at 8% 80%,#082226 0,transparent 30%),var(--bg);
  color: var(--text);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x: hidden;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: .08;
  z-index: -2;
}

.a1 {
  width: 420px;
  height: 420px;
  background: var(--violet);
  right: -100px;
  top: 80px;
}

.a2 {
  width: 360px;
  height: 360px;
  background: var(--mint);
  left: -130px;
  bottom: 20px;
}

.topbar {
  height: 58px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7,9,12,.93);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #252b31;
  z-index: 1040;
  box-shadow: 0 10px 35px rgba(0,0,0,.28);
}

.brand {
  text-decoration: none;
  font-weight: 950;
  letter-spacing: .08em;
  font-size: 1rem;
  display: inline-flex;
  align-items: baseline;
  gap: .28rem;
  white-space: nowrap;
}
.brand-ct,.brand-lab { color: var(--mint); }
.brand-midi,.brand-a { color: #fff; }
.brand-rrange { color: #8b96a2; }
.brand-arrange { display:inline-flex; gap:0; }

.status-led {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: .61rem;
  letter-spacing: .12em;
  color: #77828d;
  margin-left: 8px;
}

.status-led i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
}

.top-caption {
  font-size: .72rem;
  color: #69737e;
}

.counter {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  border-radius: 9px;
  background: #0a0c10;
  margin-left: 6px;
  color: #fff;
  font-size: .7rem;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0,1fr);
  gap: 12px;
  padding: 12px;
  transition: grid-template-columns .23s ease;
}

.composer-drawer {
  min-width: 0;
  transition: opacity .18s ease,transform .23s ease;
}

.sidebar-collapsed .app-shell {
  grid-template-columns: 0 minmax(0,1fr);
}

.sidebar-collapsed .composer-drawer {
  opacity: 0;
  transform: translateX(-18px);
  pointer-events: none;
}

.workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hardware-panel {
  position: relative;
  background: linear-gradient(145deg,#171b20,#0f1216 70%);
  border: 1px solid #2a3037;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035),inset 0 -1px 0 rgba(0,0,0,.5),0 15px 42px rgba(0,0,0,.22);
}

.hardware-panel:before,.hardware-panel:after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#78818a,#23282e 55%,#070809);
  opacity: .75;
  z-index: 2;
}

.hardware-panel:before {
  left: 7px;
  top: 7px;
}

.hardware-panel:after {
  right: 7px;
  bottom: 7px;
}

.controls-panel {
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 82px);
  overflow: auto;
  padding: 14px;
}

.controls-panel::-webkit-scrollbar {
  width: 7px;
}

.controls-panel::-webkit-scrollbar-thumb {
  background: #3a424b;
  border-radius: 10px;
}

.panel-head,.panel-toolbar,.sequencer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h1 {
  font-size: 1.12rem;
  margin: 0;
  font-weight: 800;
}

.eyebrow,.section-label {
  font-size: .6rem;
  letter-spacing: .19em;
  font-weight: 900;
  color: var(--mint);
}

.section-label {
  color: #73808d;
  margin-bottom: 8px;
}

.control-section {
  padding: 12px 0;
  border-top: 1px solid #252b32;
}

.control-section:first-of-type {
  border-top: 0;
}

.control-section label,.meter-row label,.modal label {
  font-size: .72rem;
  color: #bec6cd;
  font-weight: 650;
  margin: 5px 0 4px;
}

.microcopy {
  font-size: .61rem;
  color: #727e8a;
  margin-top: 5px;
}

.microcopy code {
  color: #c8baff;
}

.tiny-led,.readout {
  font-size: .59rem;
  letter-spacing: .08em;
  color: var(--mint);
}

.form-control,.form-select,.input-group-text {
  height: 34px;
  background: linear-gradient(#0b0e12,#0e1217);
  border-color: #2b343e;
  color: #edf1f4;
  font-size: .78rem;
}

.form-control:focus,.form-select:focus {
  background: #0c1015;
  color: #fff;
  border-color: #526472;
  box-shadow: 0 0 0 2px rgba(70,191,255,.09);
}

.input-group-text {
  padding: .25rem .5rem;
}

.form-range {
  height: 12px;
}

.form-range::-webkit-slider-runnable-track {
  height: 4px;
  background: #343c44;
  border-radius: 4px;
}

.form-range::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4px;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(39,224,189,.35);
}

.meter-row {
  margin-top: 7px;
}

.hardware-btn,.tool-btn,.transport {
  border: 1px solid #3a444e;
  color: #d8dde2;
  background: linear-gradient(#20262d,#12161b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 1px 1px #050607;
  border-radius: 7px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .035em;
  padding: .5rem .66rem;
  transition: .11s;
}

.hardware-btn:hover,.tool-btn:hover {
  color: #fff;
  border-color: #607080;
  background: linear-gradient(#28313a,#171c22);
}

.hardware-btn:active,.tool-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
}

.hardware-btn.compact {
  padding: .35rem .55rem;
  font-size: .63rem;
}

.hardware-btn.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1rem;
}

.hardware-btn.primary {
  border-color: #6b55cc;
  background: linear-gradient(135deg,#7359ff,#a64edc);
  color: #fff;
}

.hardware-btn.cyan {
  color: #61e6ff;
  border-color: #256b78;
}

.hardware-btn.green {
  color: #63e6a6;
  border-color: #25684b;
}

.hardware-btn.danger,.tool-btn.danger {
  color: #ff8593;
  border-color: #71313a;
}

.hardware-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.transport-block {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.transport-row {
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: 6px;
}

.transport {
  height: 44px;
  font-size: .78rem;
}

.transport.play {
  border-color: #7559ff;
  background: linear-gradient(100deg,#705aff,#e94cbf);
  color: #fff;
}

.transport.stop {
  border-color: #6b2834;
  color: #ff6073;
}

.transport.play.playing {
  box-shadow: 0 0 22px rgba(139,108,255,.25),inset 0 1px rgba(255,255,255,.1);
}

.idea-strip {
  min-height: 92px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.idea-title {
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1.05;
  margin: 2px 0 8px;
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  font-size: .62rem;
  padding: .25rem .48rem;
  border-radius: 5px;
  background: #10151a;
  border: 1px solid #2d3741;
  color: #aeb9c3;
}

.chip.accent {
  border-color: #5e4db2;
  color: #c8baff;
  background: #171329;
}

.key-display {
  min-width: 110px;
  text-align: center;
  border-left: 1px solid #293038;
  padding-left: 18px;
}

.key-display strong {
  display: block;
  font-size: 2.8rem;
  line-height: .9;
  color: #fff;
  text-shadow: 0 0 26px rgba(139,108,255,.4);
}

.key-display .key-label,.key-display small {
  display: block;
  font-size: .53rem;
  letter-spacing: .16em;
  color: #6f7b86;
}

.arranger-panel {
  padding: 10px 12px;
}

.panel-toolbar strong,.sequencer-toolbar strong {
  display: block;
  font-size: .79rem;
  letter-spacing: .035em;
}

.panel-toolbar small {
  color: #68747f;
}

.chord-lane {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 1px 2px;
  min-height: 70px;
}

.chord-card {
  flex: 0 0 112px;
  background: linear-gradient(150deg,#1c2228,#0d1115);
  border: 1px solid #303943;
  border-radius: 9px;
  padding: 7px 9px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.chord-card:hover {
  border-color: var(--cyan);
}

.chord-card.dragging {
  opacity: .45;
}

.chord-card .degree {
  font-size: 1.05rem;
  font-weight: 900;
}

.chord-card .name {
  font-size: .68rem;
  color: #d2d8dd;
}

.chord-card .duration {
  font-size: .57rem;
  color: #78838e;
}

.sequencer-panel {
  padding: 10px;
  overflow: hidden;
}

.sequencer-toolbar {
  margin-bottom: 8px;
}

.toolbar-help {
  font-size: .61rem;
  color: #697581;
  margin-left: 8px;
  font-weight: 450;
}

.tool-cluster {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tool-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
}

.tool-btn.active {
  color: #07110f;
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: 0 0 14px rgba(39,224,189,.22);
}

.tool-btn.wide {
  font-size: .59rem;
}

.audition-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 4px;
  color: #9fa9b3;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
}

.audition-switch input {
  display: none;
}

.audition-switch span {
  width: 25px;
  height: 13px;
  border-radius: 10px;
  background: #303840;
  position: relative;
  box-shadow: inset 0 1px 3px #050607;
}

.audition-switch span:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8a949e;
  transition: .15s;
}

.audition-switch input:checked+span {
  background: #124c43;
}

.audition-switch input:checked+span:after {
  left: 14px;
  background: var(--mint);
  box-shadow: 0 0 7px var(--mint);
}

.piano-roll-shell {
  display: flex;
  height: min(58vh,570px);
  min-height: 470px;
  border: 1px solid #303842;
  border-radius: 9px;
  overflow: hidden;
  background: #06080b;
  box-shadow: inset 0 0 28px rgba(0,0,0,.45);
}

.roll-keys {
  flex: 0 0 72px;
  height: 100%;
  background: #090c10;
  border-right: 1px solid #39434d;
  overflow: hidden;
  user-select: none;
}

.roll-canvas-wrap {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: auto;
  background: #06080b;
}

#roll {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 980px;
  cursor: crosshair;
  touch-action: none;
}

.vkey {
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,.17);
  background: linear-gradient(90deg,#e8ebee,#bfc5ca);
  color: #15181c;
  cursor: pointer;
  overflow: hidden;
  font-size: 8px;
}

.vkey.black-row {
  background: linear-gradient(90deg,#2a3036,#0a0c0f);
  color: #a9b1b9;
}

.vkey.scale-row {
  box-shadow: inset -3px 0 0 rgba(39,224,189,.55);
}

.vkey.tonic-row {
  box-shadow: inset -5px 0 0 rgba(255,179,92,.85);
}

.vkey span {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  opacity: .76;
}

.vkey.active {
  background: linear-gradient(90deg,var(--mint),#5ac0ff) !important;
  color: #05100d;
}

.roll-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .58rem;
  color: #707b85;
  margin-top: 7px;
  letter-spacing: .04em;
}

.legend {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  margin: 0 4px 0 10px;
}

.legend:first-child {
  margin-left: 0;
}

.legend.bass {
  background: var(--mint);
}

.legend.rh {
  background: var(--violet);
}

.legend.scale {
  background: #1c5149;
}

.legend.tonic {
  background: var(--amber);
}

.performance-panel {
  padding: 10px 12px;
}

.chord-pads {
  display: grid;
  grid-template-columns: repeat(7,minmax(90px,1fr));
  gap: 7px;
  margin: 8px 0 10px;
}

.chord-pad {
  position: relative;
  min-height: 62px;
  padding: 8px 9px;
  text-align: left;
  border-radius: 9px;
  border: 1px solid #35404a;
  background: linear-gradient(145deg,#222931,#101419);
  color: #e8edf1;
  box-shadow: inset 0 1px rgba(255,255,255,.055),0 2px 3px rgba(0,0,0,.28);
  cursor: pointer;
  transition: .1s;
}

.chord-pad:hover {
  transform: translateY(-1px);
  border-color: #60717f;
}

.chord-pad:active,.chord-pad.active {
  transform: translateY(1px);
  border-color: var(--mint);
  box-shadow: inset 0 2px 6px #050708,0 0 14px rgba(39,224,189,.14);
}

.chord-pad .degree {
  font-size: .72rem;
  color: var(--mint);
  font-weight: 900;
  letter-spacing: .05em;
}

.chord-pad .chord-name {
  font-size: 1rem;
  font-weight: 850;
}

.chord-pad .tones {
  font-size: .55rem;
  color: #788490;
}

.keyboard {
  height: 118px;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #050608;
  padding: 0 5px 5px;
  gap: 1px;
  box-shadow: inset 0 2px 8px #000;
}

.key {
  position: relative;
  flex: 1;
  background: linear-gradient(#f5f6f7,#c8cdd1);
  border-radius: 0 0 4px 4px;
  min-width: 9px;
  cursor: pointer;
  user-select: none;
  transition: .06s;
}

.key.black {
  position: absolute;
  z-index: 2;
  top: 0;
  height: 62%;
  width: 2.3%;
  background: linear-gradient(#252b31,#020304);
  border: 1px solid #2e343a;
  border-radius: 0 0 4px 4px;
  transform: translateX(-50%);
}

.key.active {
  background: linear-gradient(var(--mint),#63bcff);
  box-shadow: 0 0 20px rgba(39,224,189,.4);
}

.key.black.active {
  background: linear-gradient(var(--magenta),var(--violet));
}

.lower-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 12px;
}

.selection-card {
  background: #0c1014;
  border: 1px solid #29323a;
  border-radius: 9px;
  padding: .7rem;
  margin-top: .6rem;
}

.selection-card .meta {
  font-size: .65rem;
  color: #78838d;
}

.empty-state {
  border: 1px dashed #303a43;
  border-radius: 9px;
  padding: 1.2rem;
  text-align: center;
  color: #75808a;
  font-size: .72rem;
}

.moods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.mood-btn {
  text-align: left;
  background: linear-gradient(#1b2127,#0e1216);
  border: 1px solid #303943;
  color: #fff;
  border-radius: 8px;
  padding: .7rem;
  font-size: .72rem;
}

.mood-btn:hover {
  border-color: var(--mint);
}

.toastish {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  background: #10161b;
  border: 1px solid #3b4751;
  color: #fff;
  padding: .65rem .85rem;
  border-radius: 8px;
  font-size: .72rem;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: .18s;
}

.toastish.show {
  opacity: 1;
  transform: translateY(0);
}

.quick-chords .btn {
  font-family: ui-monospace,monospace;
}

.modal-content.hardware-panel {
  background: #15191e;
}

.sidebar-scrim {
  display: none;
}

@media (max-width:1199px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .composer-drawer {
    position: fixed;
    top: 58px;
    left: 0;
    bottom: 0;
    width: min(360px,92vw);
    z-index: 1035;
    padding: 10px;
    transform: translateX(-105%);
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-open .composer-drawer {
    transform: translateX(0);
  }

  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 58px 0 0;
    background: rgba(0,0,0,.58);
    z-index: 1030;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
  }

  .sidebar-open .sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .controls-panel {
    position: static;
    max-height: calc(100vh - 78px);
  }

  .sidebar-collapsed .composer-drawer {
    opacity: 1;
    pointer-events: auto;
  }

  .idea-strip {
    min-height: 82px;
  }

  .piano-roll-shell {
    height: 540px;
  }

  .chord-pads {
    grid-template-columns: repeat(4,1fr);
  }

}

@media (max-width:760px) {
  .top-caption,.status-led {
    display: none;
  }

  .topbar {
    padding: 7px 9px;
  }

  .app-shell {
    padding: 7px;
  }

  .idea-title {
    font-size: 1.25rem;
  }

  .key-display strong {
    font-size: 2rem;
  }

  .key-display {
    min-width: 80px;
  }

  .sequencer-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .tool-cluster {
    justify-content: flex-start;
  }

  .toolbar-help {
    display: none;
  }

  .piano-roll-shell {
    height: 450px;
    min-height: 410px;
  }

  .roll-keys {
    flex-basis: 58px;
  }

  .chord-pads {
    grid-template-columns: repeat(2,1fr);
  }

  .keyboard {
    height: 95px;
  }

  .lower-grid {
    grid-template-columns: 1fr;
  }

  .roll-footer {
    flex-direction: column;
  }

  .topbar .hardware-btn {
    padding: .45rem .5rem;
  }

  .brand {
    font-size: .9rem;
  }

}

.engine-badge {
  height: 38px;
  border: 1px solid #33404d;
  border-radius: 8px;
  background: linear-gradient(180deg,#151b21,#0b0f13);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .08em;
  color: #aab6c2;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.status-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ee6bc;
  box-shadow: 0 0 10px rgba(46,230,188,.85);
}

/* V7 part monitor */
.part-monitor {
  padding: 8px;
  border: 1px solid #29333d;
  border-radius: 9px;
  background: linear-gradient(180deg,#0b0f13,#10151a);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.part-monitor-label {
  font: 800 .56rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .14em;
  color: #687581;
  margin-bottom: 7px;
}

.part-monitor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.part-btn {
  position: relative;
  min-height: 43px;
  border: 1px solid #34404b;
  border-radius: 7px;
  color: #dbe3e9;
  background: linear-gradient(#20272e,#11161b);
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 1px 1px #050607;
  text-align: left;
  padding: 6px 8px 6px 25px;
  transition: .12s;
}

.part-btn b {
  display: block;
  font-size: .78rem;
  line-height: 1;
}

.part-btn small {
  font-size: .49rem;
  letter-spacing: .08em;
  color: #7c8994;
}

.part-led {
  position: absolute;
  left: 8px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ee6bc;
  box-shadow: 0 0 9px rgba(46,230,188,.8);
}

.part-btn.muted {
  border-color: #66313a;
  color: #ff8795;
  background: linear-gradient(#24171b,#130d10);
}

.part-btn.muted .part-led {
  background: #ff5d70;
  box-shadow: 0 0 9px rgba(255,93,112,.75);
}

.part-btn.muted small {
  color: #a86872;
}

.part-btn:hover {
  border-color: #5a6875;
}

/* V8 part-register tools */
.part-shift {
  display: flex;
  gap: 4px;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.part-shift .tool-btn {
  min-width: 42px;
  font-size: 10px;
  letter-spacing: .02em;
}

@media (max-width:1100px) {
  .part-shift {
    order: 3;
    width: 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }

}

/* V9 local register editing */
.selection-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: 0 10px 8px;
  border: 1px solid rgba(255,213,106,.18);
  border-radius: 9px;
  background: linear-gradient(180deg,rgba(255,213,106,.055),rgba(0,0,0,.12));
  font: 600 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  color: #dfe7e9;
}

.selection-strip .led-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd56a;
  box-shadow: 0 0 10px rgba(255,213,106,.65);
}

.selection-hint {
  margin-left: auto;
  color: #73818b;
  font-weight: 500;
}

.shift-label {
  font-size: 8px;
  letter-spacing: .13em;
  color: #73818b;
  margin-right: 3px;
  white-space: nowrap;
}

.local-shift {
  border-color: rgba(255,213,106,.14) !important;
}

.global-shift {
  opacity: .82;
}

.accent-tool {
  border-color: rgba(255,213,106,.45) !important;
  color: #ffe19a !important;
}

.chord-card.selected-chord {
  outline: 1px solid rgba(255,213,106,.78);
  box-shadow: 0 0 0 2px rgba(255,213,106,.08),0 0 18px rgba(255,213,106,.08);
}

.chord-local-tools {
  display: flex;
  gap: 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.055);
}

.chord-local-tools button {
  border: 1px solid rgba(255,255,255,.10);
  background: #0c1115;
  color: #85939c;
  border-radius: 5px;
  padding: 2px 5px;
  font: 700 8px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .05em;
}

.chord-local-tools button:hover {
  color: #ffd56a;
  border-color: rgba(255,213,106,.4);
  background: #15130d;
}

@media (max-width:1050px) {
  .selection-hint {
    display: none;
  }

  .shift-label {
    display: none;
  }

}

/* V10.2 compact workstation layout */
:root {
  --topbar-h: 58px;
  --footer-h: 42px;
  --playdock-h: 205px;
  --soundbar: 322px;
}

html,body {
  height: 100%;
  overflow: hidden;
}

.topbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 1080;
  gap: 10px;
}

.topbar>div:last-child {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}

.topbar>div:last-child::-webkit-scrollbar {
  display: none;
}

.top-action {
  padding: .42rem .52rem;
  font-size: .61rem;
  flex: 0 0 auto;
}

.sound-toggle {
  margin-left: 2px;
  color: var(--amber);
}

.app-shell {
  height: calc(100vh - var(--topbar-h) - var(--footer-h));
  margin-top: var(--topbar-h);
  padding: 10px 10px calc(var(--playdock-h) + 12px);
  overflow: hidden;
}

.workspace {
  height: 100%;
  overflow: hidden;
  gap: 8px;
}

.composer-drawer {
  height: 100%;
  overflow: hidden;
}

.controls-panel {
  top: auto;
  position: relative;
  height: 100%;
  max-height: none;
  overflow: auto;
  padding: 12px;
}

.idea-strip {
  min-height: 64px;
  height: 64px;
  padding: 8px 14px;
  flex: 0 0 auto;
}

.idea-title {
  font-size: 1.18rem;
  margin: 1px 0 3px;
}

.key-display strong {
  font-size: 2rem;
}

.chips {
  gap: 4px;
}

.chip {
  font-size: .54rem;
  padding: .18rem .4rem;
}

.arranger-panel {
  padding: 7px 10px;
  flex: 0 0 auto;
}

.chord-lane {
  min-height: 58px;
  padding: 5px 0 1px;
}

.chord-card {
  flex-basis: 104px;
  padding: 5px 7px;
}

.sequencer-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 7px 8px;
}

.sequencer-toolbar {
  margin-bottom: 5px;
  flex: 0 0 auto;
}

.selection-strip {
  padding: 5px 10px;
  margin: 0 4px 5px;
  flex: 0 0 auto;
}

.piano-roll-shell {
  height: auto !important;
  min-height: 220px;
  flex: 1;
}

.roll-footer {
  margin-top: 4px;
  flex: 0 0 auto;
}

/* fixed playable surface */
.performance-dock {
  position: fixed;
  left: calc(var(--sidebar) + 22px);
  right: 10px;
  bottom: var(--footer-h);
  height: var(--playdock-h);
  z-index: 1025;
  padding: 7px 10px;
  border-radius: 12px 12px 0 0;
  transition: left .23s ease;
  overflow: hidden;
  background: linear-gradient(180deg,rgba(22,27,32,.98),rgba(10,13,17,.99));
  backdrop-filter: blur(16px);
  box-shadow: 0 -16px 38px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05);
}

.sidebar-collapsed .performance-dock {
  left: 10px;
}

.performance-dock .panel-toolbar {
  height: 26px;
}

.performance-dock .chord-pads {
  margin: 4px 0 6px;
  gap: 5px;
}

.performance-dock .chord-pad {
  min-height: 48px;
  padding: 5px 7px;
}

.performance-dock .chord-pad .chord-name {
  font-size: .85rem;
}

.performance-dock .keyboard {
  height: 96px;
}

/* fixed footer */
.workstation-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-h);
  z-index: 1090;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 13px;
  background: linear-gradient(#101419,#080a0d);
  border-top: 1px solid #303841;
  box-shadow: 0 -7px 22px rgba(0,0,0,.35);
  font-size: .61rem;
  color: #7f8b95;
  letter-spacing: .04em;
}

.footer-left,.footer-center,.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-left strong {
  color: #dce4e8;
  letter-spacing: .12em;
}

.footer-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 9px var(--mint);
}

.footer-center kbd {
  font-size: .54rem;
  background: #1d2329;
  border: 1px solid #36404a;
  color: #cbd3d9;
  padding: 2px 5px;
}

.footer-right {
  justify-content: flex-end;
}

.footer-version {
  color: var(--mint);
}

/* Left drawer now owns saved ideas / starts */
.sidebar-deck {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #252b32;
}

.sidebar-mini-panel {
  padding: 10px !important;
}

.sidebar-mini-panel .panel-toolbar {
  margin-bottom: 5px;
}

.sidebar-mini-panel .selection-card {
  padding: .48rem;
  margin-top: .4rem;
}

.sidebar-mini-panel .moods {
  grid-template-columns: 1fr;
  gap: 5px;
  margin-top: 6px;
}

.sidebar-mini-panel .mood-btn {
  padding: .5rem;
}

.sidebar-mini-panel .empty-state {
  padding: .7rem;
}

.sidebar-mini-panel:before,.sidebar-mini-panel:after {
  display: none;
}

/* right sound drawer */
.sound-drawer {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: var(--footer-h);
  width: min(var(--soundbar),94vw);
  padding: 10px;
  z-index: 1075;
  transform: translateX(105%);
  transition: transform .22s ease;
  pointer-events: none;
}

.sound-open .sound-drawer {
  transform: translateX(0);
  pointer-events: auto;
}

.sound-panel {
  height: 100%;
  padding: 13px;
  overflow: auto;
  box-shadow: -20px 0 48px rgba(0,0,0,.48);
}

.sound-panel .control-section {
  border-top: 0;
}

.sound-panel .panel-head {
  padding-bottom: 8px;
  border-bottom: 1px solid #252b32;
}

.sound-scrim {
  display: none;
}

.sound-open .sidebar-scrim {
  display: block;
  opacity: 1;
  pointer-events: auto;
  z-index: 1070;
}

/* transport is intentionally compact in left drawer */
.transport-block {
  margin-top: 8px;
}

.transport-row {
  grid-template-columns: 1fr 46px;
}

.transport {
  height: 38px;
}

@media (max-width:1199px) {
  :root {
    --playdock-h: 194px;
  }

  .app-shell {
    display: block;
    padding: 8px 8px calc(var(--playdock-h) + 10px);
  }

  .composer-drawer {
    height: auto;
  }

  .performance-dock {
    left: 8px;
    right: 8px;
  }

  .sidebar-open .performance-dock {
    opacity: .25;
    pointer-events: none;
  }

  .composer-drawer {
    top: var(--topbar-h);
    bottom: var(--footer-h);
  }

  .sound-drawer {
    top: var(--topbar-h);
  }

  .workstation-footer {
    grid-template-columns: 1fr auto;
  }

  .footer-center {
    display: none;
  }

  .piano-roll-shell {
    min-height: 260px;
  }

  .idea-strip {
    height: 60px;
    min-height: 60px;
  }

}

@media (max-width:760px) {
  :root {
    --playdock-h: 174px;
  }

  .topbar {
    height: 54px;
  }

  .topbar .brand {
    display: none;
  }

  .topbar .hardware-btn {
    font-size: .55rem;
    padding: .38rem .42rem;
  }

  .topbar .icon-btn {
    width: 32px;
    height: 32px;
    font-size: .9rem;
  }

  .idea-strip {
    height: 54px;
    min-height: 54px;
  }

  .key-display {
    display: none;
  }

  .arranger-panel .panel-toolbar strong {
    display: none;
  }

  .performance-dock {
    height: var(--playdock-h);
  }

  .performance-dock .panel-toolbar small {
    display: none;
  }

  .performance-dock .chord-pads {
    display: flex;
    overflow-x: auto;
  }

  .performance-dock .chord-pad {
    flex: 0 0 86px;
    min-height: 43px;
  }

  .performance-dock .keyboard {
    height: 82px;
  }

  .workstation-footer {
    height: 38px;
    grid-template-columns: 1fr auto;
  }

  .footer-left span:last-child {
    display: none;
  }

  .footer-right #footerPatch {
    display: none;
  }

  .sequencer-toolbar .tool-cluster {
    max-height: 70px;
    overflow-y: auto;
  }

}

/* v10.3 workflow fixes */
.composer-drawer {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  scrollbar-gutter: stable;
}

.controls-panel {
  height: auto !important;
  min-height: max-content;
  overflow: visible !important;
  flex: 0 0 auto;
}

.sidebar-deck {
  flex: 0 0 auto;
  margin-top: 0;
  padding-bottom: 10px;
}

.inspire-first {
  border-color: rgba(255,179,92,.6);
  color: #ffe0b5;
  background: linear-gradient(180deg,#2a2118,#14110e);
}

.transport-top {
  font-weight: 900;
  letter-spacing: .05em;
}

.play-top {
  border-color: rgba(39,224,189,.65);
  color: #dffff8;
  min-width: 74px;
}

.play-top.playing {
  background: linear-gradient(180deg,#2a6c60,#113a34);
  box-shadow: 0 0 16px rgba(39,224,189,.18);
}

.loop-top {
  min-width: 68px;
}

.loop-top.active {
  color: #07110f;
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: 0 0 14px rgba(39,224,189,.22);
}

.play-surface-toolbar {
  height: auto !important;
  min-height: 30px;
  align-items: center;
}

.pad-config {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-width: 0;
}

.pad-config label {
  margin: 0;
  font-size: .55rem;
  color: #7f8b95;
  letter-spacing: .1em;
  white-space: nowrap;
}

.pad-config .form-select {
  width: 190px;
  min-width: 150px;
  height: 27px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: .6rem;
}

.pad-config small {
  font-size: .55rem;
  color: #6f7b85;
  white-space: nowrap;
}

.chord-pad {
  user-select: none;
}

.chord-pad.dragging {
  opacity: .55;
  transform: scale(.98);
  border-color: var(--amber);
}

.chord-pad .drag-hint {
  position: absolute;
  right: 6px;
  top: 5px;
  font-size: .5rem;
  color: #68747e;
  letter-spacing: .05em;
}

.chord-card.pad-drop-target {
  border-color: var(--amber) !important;
  box-shadow: 0 0 18px rgba(255,179,92,.2),inset 0 0 0 1px rgba(255,179,92,.25);
}

.chord-lane.pad-drop-lane {
  outline: 1px dashed rgba(255,179,92,.55);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (max-width:1199px) {
  .composer-drawer {
    height: calc(100vh - var(--topbar-h) - var(--footer-h));
    overflow-y: auto;
  }

  .controls-panel {
    min-height: 0;
  }

  .pad-config small {
    display: none;
  }

}

@media (max-width:900px) {
  .pad-config label {
    display: none;
  }

  .pad-config .form-select {
    width: 150px;
  }

  .transport-top {
    min-width: auto;
  }

  .topbar>div:last-child {
    gap: 4px !important;
  }

}

/* v10.4 viewport + note safety fixes */
@media (min-width:1200px) {
  .app-shell {
    grid-template-columns: var(--sidebar) minmax(0,1fr);
  }

  .workspace {
    grid-column: 2;
    min-height: 0;
  }

  .composer-drawer {
    position: fixed;
    left: 10px;
    top: calc(var(--topbar-h) + 10px);
    bottom: calc(var(--footer-h) + 10px);
    width: var(--sidebar);
    height: auto !important;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    z-index: 1022;
    padding: 0 3px 14px 0;
    scrollbar-gutter: stable;
  }

  .composer-drawer>.controls-panel {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0;
  }

  .composer-drawer>.sidebar-deck {
    display: grid !important;
    flex: none !important;
    padding-bottom: 18px;
  }

  .sidebar-collapsed .composer-drawer {
    transform: translateX(calc(-1 * var(--sidebar) - 22px));
    opacity: 0;
  }

}

.legend.warning {
  background: linear-gradient(135deg,#ff7a6d,#b92f55);
  box-shadow: 0 0 5px rgba(255,122,109,.35);
}

/* v10.5 pad interaction + fixed piano-roll geometry */
/* One dark scrollbar language across drawers, roll, top actions and selection lists. */
* {
  scrollbar-width: thin;
  scrollbar-color: #2c3943 #090d11;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: #090d11;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#34434e,#202a32);
  border: 2px solid #090d11;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#465967,#2b3943);
}

*::-webkit-scrollbar-corner {
  background: #090d11;
}

.topbar>div:last-child {
  scrollbar-width: thin !important;
}

.topbar>div:last-child::-webkit-scrollbar {
  display: block !important;
  height: 5px;
}

/* Chord pad body is the playable surface; only the small grip is draggable. */
.chord-pad {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
}

.chord-pad:focus-visible {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(39,224,189,.16);
}

.chord-pad.active {
  border-color: var(--mint) !important;
  box-shadow: 0 0 18px rgba(39,224,189,.22),inset 0 0 0 1px rgba(39,224,189,.20);
  transform: translateY(1px);
}

.chord-pad .drag-handle {
  position: absolute;
  right: 5px;
  top: 4px;
  z-index: 3;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px;
  background: #0c1115;
  color: #6e7b85;
  font: 800 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .08em;
  cursor: grab;
  user-select: none;
}

.chord-pad .drag-handle:hover {
  color: var(--amber);
  border-color: rgba(255,179,92,.35);
  background: #17140e;
}

.chord-pad .drag-handle:active {
  cursor: grabbing;
}

.chord-pad.dragging {
  opacity: .56;
  transform: scale(.985);
}

/* Fixed 18px note lanes: labels and notes no longer get squeezed when pitch range changes. */
.piano-roll-shell {
  overflow: hidden;
}

.roll-keys {
  overflow: hidden !important;
  min-height: 0;
}

.roll-canvas-wrap {
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

#roll {
  height: auto !important;
  min-height: 0 !important;
}

.vkey {
  min-height: 18px;
  height: 18px !important;
  box-sizing: border-box;
  font-size: 8px;
  line-height: 18px;
}

.vkey span {
  top: 50%;
  white-space: nowrap;
}

/* v10.6 — restrained keyboard feedback + learning display */
.key.active,.vkey.active {
  box-shadow: none !important;
}

.key.white.active-lh {
  background: linear-gradient(#bfe3dc,#6eaaa0) !important;
  box-shadow: inset 0 -3px 0 #2e7f72 !important;
}

.key.black.active-lh {
  background: linear-gradient(#2f8375,#173e38) !important;
  border-color: #4b9f91 !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.08) !important;
}

.key.white.active-rh {
  background: linear-gradient(#c9c1e8,#8a7fbd) !important;
  box-shadow: inset 0 -3px 0 #625794 !important;
}

.key.black.active-rh {
  background: linear-gradient(#695e9a,#342e50) !important;
  border-color: #8276b5 !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.08) !important;
}

.vkey.active-lh {
  background: #21473f !important;
  color: #c7eee5 !important;
  box-shadow: inset 3px 0 0 #35b69d !important;
}

.vkey.active-rh {
  background: #34304d !important;
  color: #ddd7ff !important;
  box-shadow: inset 3px 0 0 #8172c5 !important;
}

.key.active-lh.active-rh,.vkey.active-lh.active-rh {
  outline: 1px solid rgba(225,215,255,.45);
}

.played-notes {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 3px;
  min-height: 16px;
  font: 700 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .03em;
  color: #727d86;
}

.played-notes .pn-lh {
  color: #68aa9f;
}

.played-notes .pn-rh {
  color: #9489c4;
}

.pad-ready {
  margin-left: 3px;
  padding: 2px 5px;
  border: 1px solid #263139;
  border-radius: 4px;
  color: #4f6966;
  background: #0a0f12;
  font-size: 7px;
  letter-spacing: .09em;
}

/* v10.8 — keep hand monitor + chord-pad playback in one place */
.pad-live-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}

.pad-mode-hint {
  font: 700 .52rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .07em;
  color: #65727c;
  white-space: nowrap;
}

.pad-live-status .played-notes {
  margin-top: 0;
}

.pad-mode-drawer {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid #27323a;
  border-radius: 8px;
  background: linear-gradient(180deg,#0c1115,#10161b);
}

.pad-mode-drawer label {
  margin-bottom: 5px;
  font-size: .58rem;
  letter-spacing: .08em;
  color: #8b979f;
  text-transform: uppercase;
}

.pad-mode-drawer .form-select {
  height: 34px;
  font-size: .68rem;
  background-color: #0a0e12;
  border-color: #34414a;
}

.pad-mode-help {
  margin-top: 7px;
  color: #687681;
  font-size: .55rem;
  line-height: 1.35;
}

.mini-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 2px 1px 3px;
}

.mini-led.lh {
  background: #5f9f96;
  box-shadow: 0 0 6px rgba(95,159,150,.35);
}

.mini-led.rh {
  background: #8177ae;
  box-shadow: 0 0 6px rgba(129,119,174,.35);
}

@media (max-width:900px) {
  .pad-mode-hint {
    display: none;
  }

  .pad-live-status {
    gap: 5px;
  }

}

/* v10.9 — compact workstation geometry */
.arranger-panel {
  padding: 5px 7px;
}

.arranger-compact-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.arranger-compact-row .chord-lane {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 1px 0;
  gap: 6px;
}

.arranger-actions {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
  padding-top: 1px;
}

.arranger-actions .hardware-btn {
  height: 28px;
  padding: .28rem .48rem;
  font-size: .58rem;
}

.chord-card {
  flex-basis: 100px;
  padding: 4px 6px;
  border-radius: 8px;
}

.chord-card .chord-local-tools {
  margin-top: 4px;
  padding-top: 4px;
}

.sequencer-panel {
  padding: 5px 7px 4px;
}

.sequencer-toolbar.tools-only {
  justify-content: flex-end;
  margin: 0 0 3px;
  min-height: 30px;
}

.sequencer-toolbar.tools-only .tool-cluster {
  width: 100%;
  justify-content: flex-end;
}

.selection-strip {
  display: none !important;
}

.piano-roll-shell {
  border-radius: 7px;
}

.roll-footer {
  margin-top: 2px;
  font-size: .54rem;
}

/* Notes remain readable but rows are slightly denser; vertical labels match the lane geometry. */
.vkey {
  min-height: 17px;
  height: 17px !important;
  line-height: 17px;
  font-size: 7.5px;
}

/* Play surface has no decorative header: pads sit directly against the panel top. */
.performance-dock {
  padding: 4px 7px 5px;
}

.performance-dock .play-surface-toolbar {
  display: none !important;
}

.performance-dock .chord-pads {
  margin: 0 0 4px;
  gap: 5px;
}

.performance-dock .chord-pad {
  min-height: 46px;
  padding: 4px 7px;
}

.performance-dock .keyboard {
  height: 96px;
}

@media (max-width:1199px) {
  .arranger-compact-row {
    align-items: flex-start;
  }

  .arranger-actions {
    padding-top: 1px;
  }

}

@media (max-width:760px) {
  .arranger-actions {
    flex-direction: column;
  }

  .arranger-actions .hardware-btn {
    height: 24px;
  }

}

/* v10.11 — piano-roll grid, snap/free and note-length handles */
.grid-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 3px;
  padding: 2px 4px;
  border: 1px solid #283139;
  border-radius: 6px;
  background: #0b0f13;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}

.grid-controls .shift-label {
  margin: 0 2px 0 1px;
  color: #697680;
  font-size: 7px;
  letter-spacing: .1em;
}

.grid-select {
  height: 26px;
  min-width: 72px;
  border: 1px solid #35404a;
  border-radius: 5px;
  background: #11171c;
  color: #cbd2d8;
  font: 800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding: 0 20px 0 7px;
  outline: none;
}

.grid-select:focus {
  border-color: #5b6b78;
  box-shadow: 0 0 0 1px rgba(92,111,125,.22);
}

.snap-toggle {
  min-width: 44px !important;
  font-size: 8px !important;
  letter-spacing: .06em;
}

.snap-toggle:not(.active) {
  color: #8b949c;
  border-color: #394149;
  background: linear-gradient(#171c21,#0c1014);
}

.snap-toggle.active {
  color: #07110f !important;
  background: #68b4a8 !important;
  border-color: #76c4b8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15) !important;
}

#roll {
  cursor: crosshair;
}

/* The selected note's resize grip itself is painted into the canvas; these rules keep the editor toolbar compact. */
@media (max-width:1050px) {
  .grid-controls .shift-label {
    display: none;
  }

  .grid-select {
    min-width: 64px;
  }

  .snap-toggle {
    min-width: 40px !important;
  }

}

/* v10.13 — arranger audition, grid-aligned range, true skip and unified DnD */
.chord-card {
  position: relative;
  user-select: none;
  cursor: pointer;
  padding-top: 18px;
}

.chord-card:hover {
  border-color: #43505a;
  background: linear-gradient(180deg,#151c22,#0e1317);
}

.chord-card.auditioning {
  border-color: #6db7ab;
  box-shadow: 0 0 0 1px rgba(109,183,171,.22),inset 0 0 18px rgba(57,167,148,.08);
}

.chord-card.disarmed {
  opacity: .48;
  filter: saturate(.55);
}

.chord-card.disarmed:after {
  content: "DISARMED";
  position: absolute;
  inset: auto 5px 5px auto;
  color: #b06b6b;
  font: 800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .08em;
  pointer-events: none;
}

.chord-card-actions {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  z-index: 4;
}

.chord-card-actions button,.chord-card-actions .card-drag-handle {
  height: 12px;
  min-width: 21px;
  border: 1px solid #2c363e;
  border-radius: 3px;
  background: #0a0f13;
  color: #7f8b94;
  padding: 0 3px;
  font: 800 5.5px/10px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .03em;
  cursor: pointer;
}

.chord-card-actions button:hover,.chord-card-actions .card-drag-handle:hover {
  border-color: #53616c;
  color: #d2d8dc;
}

.chord-card-actions .arm-toggle {
  margin-right: auto;
  color: #70b9ae;
  border-color: #31564f;
}

.chord-card.disarmed .chord-card-actions .arm-toggle {
  color: #d07878;
  border-color: #663d43;
}

.chord-card-actions .card-drag-handle {
  cursor: grab;
  display: inline-flex;
  align-items: center;
}

.chord-card-actions .card-drag-handle:active {
  cursor: grabbing;
}

.play-range-row {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  align-items: center;
  gap: 0;
  margin: 0 0 4px;
  padding: 2px 0;
  border: 1px solid #202a31;
  border-radius: 6px;
  background: #0a0f12;
  min-height: 25px;
  overflow: visible;
}

.range-preset {
  justify-self: center;
  height: 19px;
  border: 1px solid #303b43;
  border-radius: 4px;
  background: #11171b;
  color: #87939b;
  padding: 0 8px;
  font: 800 6.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .05em;
}

.range-preset.active {
  border-color: #4f8178;
  color: #9fd5cb;
  background: #10201d;
}

.play-range-track {
  height: 13px;
  position: relative;
  margin: 0 1px;
  border: 1px solid #263139;
  border-radius: 5px;
  background: linear-gradient(180deg,#070b0e,#0c1115);
  overflow: visible;
  cursor: crosshair;
}

.play-range-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  right: 0;
  border-radius: 3px;
  background: linear-gradient(90deg,rgba(51,199,172,.18),rgba(129,105,221,.18));
  border: 1px solid rgba(91,165,155,.26);
  pointer-events: none;
}

.range-handle {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 17px;
  transform: translate(-50%,-50%);
  border: 1px solid #77bdb1;
  border-radius: 3px;
  background: #1b3732;
  box-shadow: 0 0 0 1px #07100e;
  cursor: ew-resize;
  padding: 0;
  z-index: 3;
}

.range-handle.end {
  border-color: #9684df;
  background: #2a2550;
}

@media (max-width:760px) {
  .play-range-row {
    grid-template-columns: 58px minmax(0,1fr);
  }

}

/* Unified insertion semantics for arranger and scale pads. */
.chord-card.drop-before:before,.chord-card.drop-after:after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: #ffb35c;
  box-shadow: 0 0 10px rgba(255,179,92,.65);
  z-index: 8;
  pointer-events: none;
}

.chord-card.drop-before:before {
  left: -5px;
}

.chord-card.drop-after:after {
  right: -5px;
}

.chord-card.drop-replace {
  border-color: #ffb35c !important;
  box-shadow: inset 0 0 0 1px rgba(255,179,92,.32),0 0 14px rgba(255,179,92,.12);
}

/* v10.17 import / persistence */
#importBtn {
  border-color: rgba(132,150,168,.34);
  color: #cbd5df;
}

#importBtn:hover {
  border-color: rgba(55,214,190,.55);
  color: #eafefa;
}

.import-summary {
  border: 1px solid rgba(90,110,130,.28);
  background: rgba(4,10,15,.45);
  border-radius: 8px;
  padding: 10px 12px;
  color: #9caebb;
  font-size: 11px;
  line-height: 1.45;
  min-height: 38px;
}

/* v10.22 dual-layer hand mixer */
.hand-layer-mixer {
  display: grid;
  gap: 8px;
}

.layer-hand {
  padding: 8px;
  border: 1px solid #29333d;
  border-radius: 9px;
  background: linear-gradient(180deg,#0b0f13,#10151a);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.layer-hand-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font: 800 .57rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .11em;
  color: #c7d0d7;
}

.layer-hand-head>span:last-child {
  margin-left: auto;
  color: #687581;
  font-size: .49rem;
}

.layer-row {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(78px,.75fr);
  gap: 8px;
  align-items: end;
}

.layer-row+.layer-row {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #202932;
}

.layer-row label {
  font-size: .57rem;
  color: #7f8c97;
  margin-bottom: 3px;
}

.layer-level {
  min-width: 0;
}

.layer-level .form-range {
  display: block;
  width: 100%;
  margin: 8px 0 7px;
}

.layer-level span {
  font: 700 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color: #8e9ba5;
}

.layer-hand:first-child {
  border-left: 2px solid rgba(55,202,172,.38);
}

.layer-hand:nth-child(2) {
  border-left: 2px solid rgba(144,111,209,.42);
}

/* Public beta footer / legal navigation */
.footer-links { gap: 12px; flex-wrap: wrap; justify-content: center; }
.footer-links a { color:#8794a1; text-decoration:none; font-size:.68rem; letter-spacing:.04em; }
.footer-links a:hover { color:var(--mint); }
.footer-copyright { color:#78838d; font-size:.65rem; }
.footer-product { white-space:nowrap; }
@media(max-width:1200px){ .footer-copyright{display:none}.footer-links a:nth-child(n+4){display:none} }

/* 0.1.02 beta — release defaults continue the compact public-beta surface */
.idea-main {
  flex: 1 1 auto;
  min-width: 0;
}
.release-trust {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.trust-badge {
  min-width: 118px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #2c3940;
  border-radius: 7px;
  background: linear-gradient(180deg,#161d22,#0d1216);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 5px 14px rgba(0,0,0,.18);
  font: 900 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .09em;
  white-space: nowrap;
}
.trust-badge .trust-icon {
  font-size: .9rem;
  opacity: .92;
}
.trust-badge.no-ai {
  color: #9ee8d7;
  border-color: rgba(54,183,153,.35);
}
.trust-badge.royalty {
  color: #dadfe4;
  border-color: rgba(255,255,255,.14);
}

/* Let the playable surface hug its actual content instead of reserving black space. */
:root {
  --playdock-h: 174px;
}
.performance-dock {
  height: auto;
  min-height: 0;
  padding-bottom: 7px;
}
.performance-dock .keyboard {
  height: 94px;
}

/* Saved-variation actions belong on the title/cadence line, not full-card height. */
.sidebar-mini-panel .selection-card > .d-flex {
  align-items: flex-start;
}
.sidebar-mini-panel .selection-card .btn-group {
  align-self: flex-start;
  height: auto;
  margin-top: -1px;
}
.sidebar-mini-panel .selection-card .btn {
  min-height: 23px;
  height: 23px;
  padding: 1px 7px;
  font-size: .56rem;
  line-height: 1;
}

@media (max-width: 1199px) {
  :root { --playdock-h: 166px; }
  .performance-dock { height: auto; }
  .release-trust { display: none; }
}
@media (max-width: 760px) {
  :root { --playdock-h: 150px; }
  .performance-dock { height: auto; }
}