.v2-workspace{position:relative}

/* Clear interaction feedback across the desktop UI. */
.ui-btn,.transport-key,.nav-item,.icon-button,.project-chip,.pad-card-v2,.synth-key{
  transition:transform .12s ease,border-color .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease,filter .12s ease;
}
.ui-btn:hover:not(:disabled),.transport-key:hover:not(:disabled),.icon-button:hover,.project-chip:hover{
  border-color:var(--cyan);color:var(--text);box-shadow:0 0 18px rgba(22,215,223,.16);filter:brightness(1.12)
}
.ui-btn:active:not(:disabled),.transport-key:active:not(:disabled),.icon-button:active,.project-chip:active{transform:translateY(1px) scale(.985)}
.transport-key.active,.transport-key.play.active{
  color:#021012;background:linear-gradient(180deg,#35eef5,#12b9c1);border-color:#73f8fd;box-shadow:0 0 22px rgba(22,215,223,.42),inset 0 1px rgba(255,255,255,.35)
}
.transport-key.rec.active,.transport-key.rec.recording-active-v27{
  color:#fff;background:linear-gradient(180deg,#ff6b6b,#bf2525);border-color:#ff9a9a;box-shadow:0 0 24px rgba(255,85,85,.42)
}
.transport-key.rec.synth-rec-shadow-v28{box-shadow:0 0 0 2px rgba(255,173,31,.58),0 0 22px rgba(255,173,31,.22)}
.transport-key.mode-disabled{opacity:.36}

.transport-mode-v28{
  min-width:94px;height:32px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #284249;border-radius:6px;background:#081315;color:#91a5aa;font-size:10px;font-weight:800;letter-spacing:.8px;white-space:nowrap
}
.transport-mode-v28[data-mode="pattern"]{color:var(--cyan);border-color:#15646b;background:#09282c}
.transport-mode-v28[data-mode="scene"]{color:var(--orange);border-color:#72531e;background:#271c08}

/* Pattern quick-fill helpers. */
.pattern-fill-v28{margin-top:12px;padding-top:12px;border-top:1px solid #20343a}
.pattern-fill-v28>span{display:block;margin-bottom:8px;color:#81949a;font-size:10px;font-weight:800;letter-spacing:.9px}
.pattern-fill-v28>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pattern-fill-v28 .ui-btn{padding:0 8px;font-size:11px}
.piano-roll-open-v28{border-color:#6a4f19;color:var(--orange);background:#241a08}

/* Piano Roll overlay keeps Pattern workspace mounted underneath. */
.piano-roll-v28{
  position:absolute;inset:0;z-index:40;display:grid;grid-template-rows:auto 30px minmax(0,1fr) auto;background:#050b0d;border:1px solid #294148;border-radius:10px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6)
}
.piano-roll-head-v28{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid #20343a;background:linear-gradient(180deg,#0d1b1e,#081214)}
.piano-roll-head-v28 span{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:1px}
.piano-roll-head-v28 h2{margin:4px 0 0;font-size:19px}
.piano-roll-head-v28 p{margin:4px 0 0;color:#7f9398;font-size:11px}
.piano-roll-actions-v28{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.piano-roll-ruler-v28{display:grid;grid-template-columns:64px minmax(0,1fr);background:#091416;border-bottom:1px solid #24383d;overflow:hidden}
.piano-roll-ruler-v28>div{display:grid;grid-template-columns:repeat(var(--steps),28px);min-width:max-content}
.piano-roll-ruler-v28 b{display:flex;align-items:center;padding-left:3px;border-left:1px solid #14272c;color:#60767b;font-size:8px;font-weight:600}
.piano-roll-ruler-v28 b.bar{color:var(--cyan);border-left-color:#31535a}
.piano-scroll-v28{overflow:auto;background:#061012}
.piano-row-v28{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:24px}
.piano-key-v28{position:sticky;left:0;z-index:3;display:flex;align-items:center;padding-left:10px;border-right:1px solid #30454a;border-bottom:1px solid #17292e;background:#0b171a;color:#8da1a6;font-size:10px}
.piano-key-v28.c-note{color:var(--cyan);font-weight:800;background:#102328}
.piano-cells-v28{display:grid;grid-template-columns:repeat(var(--steps),28px);min-width:max-content}
.piano-cell-v28{height:24px;padding:0;border:0;border-right:1px solid #132529;border-bottom:1px solid #132529;background:#071113;cursor:crosshair;color:#041012;font-size:8px;overflow:hidden}
.piano-cell-v28.beat{border-left:1px solid #264047}
.piano-cell-v28.bar{border-left:1px solid #3d626a}
.piano-cell-v28:hover{background:#103238;box-shadow:inset 0 0 0 1px #1bcad3}
.piano-cell-v28.note-on{background:linear-gradient(180deg,#ffbd42,#de8710);border-color:#ffd476;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 8px rgba(255,173,31,.22);cursor:grab}
.piano-cell-v28.note-on b{display:block;white-space:nowrap;font-size:8px}
.piano-cell-v28.dragging{filter:brightness(1.35);cursor:grabbing}
.piano-roll-help-v28{padding:8px 14px;border-top:1px solid #20343a;background:#081214;color:#73898e;font-size:10px}

/* Synth phrase recorder. */
.synth-phrase-rec-v28{margin-left:auto;display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid #264148;border-radius:8px;background:#091416}
.synth-rec-copy-v28{min-width:180px}
.synth-rec-copy-v28>b,.synth-rec-copy-v28>small{display:block}
.synth-rec-copy-v28>b{margin-top:2px;font-size:12px;color:#dfe8e9}
.synth-rec-copy-v28>small{margin-top:3px;color:#778c91;font-size:9px}
.synth-rec-v28{color:#ff7777;border-color:#6d3030}
.synth-rec-v28.recording{color:#fff;background:#b52626;border-color:#ff7979;box-shadow:0 0 22px rgba(255,85,85,.36);animation:synth-rec-pulse-v28 1s ease-in-out infinite alternate}
@keyframes synth-rec-pulse-v28{from{filter:brightness(.92)}to{filter:brightness(1.25)}}

@media(max-width:1180px){
  .transport-mode-v28{display:none}
  .synth-phrase-rec-v28{grid-template-columns:1fr auto}.synth-phrase-rec-v28 .danger{grid-column:2}
}