:root {
  color-scheme: dark;
  --bg: #05050a;
  --bg-2: #090812;
  --panel: rgba(16, 16, 27, .93);
  --panel-2: rgba(25, 23, 39, .94);
  --panel-3: rgba(36, 31, 54, .92);
  --line: rgba(190, 155, 255, .20);
  --line-2: rgba(111, 227, 255, .20);
  --text: #f7f3ff;
  --muted: rgba(247, 243, 255, .64);
  --faint: rgba(247, 243, 255, .40);
  --purple: #b98cff;
  --purple-2: #7136d3;
  --cyan: #6de4ff;
  --green: #77ffc3;
  --red: #ff6d8d;
  --orange: #ffb46d;
  --shadow: 0 24px 70px rgba(0,0,0,.36);
  --serif: Georgia, Cambria, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(113, 54, 211, .22), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(80, 164, 255, .13), transparent 30%),
    radial-gradient(circle at 54% 115%, rgba(185, 140, 255, .11), transparent 34%),
    linear-gradient(180deg, #07060d 0%, #030305 78%);
  color: var(--text);
  font-family: var(--sans);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(90deg, rgba(185,140,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(109,228,255,.022) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(circle at center, black, transparent 82%);
}

button,
input,
select { font: inherit; }
button,
select,
input[type="range"],
input[type="checkbox"],
.file-button { cursor: pointer; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
canvas:focus-visible {
  outline: 2px solid rgba(222, 204, 255, .92);
  outline-offset: 2px;
}

.app-shell {
  width: min(1920px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 18px 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(18, 15, 31, .94), rgba(8, 8, 15, .91));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(14px) saturate(1.05);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(185, 140, 255, .42);
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(145deg, rgba(122, 72, 216, .96), rgba(53, 29, 101, .96));
  color: #fff;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(113,54,211,.22), inset 0 1px rgba(255,255,255,.17);
}

.kicker,
.section-label {
  margin: 0;
  color: #cdb8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1,
h2,
h3 { margin: 0; }

.topbar h1 {
  margin-top: 4px;
  font-size: clamp(26px, 3vw, 46px);
  line-height: .95;
  font-family: var(--serif);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.topbar h1 span { color: var(--purple); }

.session-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(122px, 1fr));
  gap: 9px;
  min-width: min(640px, 47vw);
}

.session-strip div {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.session-strip span,
.master-strip span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.session-strip strong,
.master-strip strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transport-panel {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(80px, auto)) auto auto minmax(150px, auto) 52px;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(14, 14, 24, .89);
  box-shadow: 0 18px 55px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.035);
}

.transport-buttons,
.button-row,
.tool-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-btn,
.mini-button,
.transport-main,
.transport-stop,
.record-button,
.tab-button {
  border: 1px solid rgba(211, 192, 255, .25);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, rgba(118, 73, 200, .95), rgba(69, 39, 121, .95));
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  font-weight: 850;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, opacity .14s ease, filter .14s ease;
}

.ui-btn:hover,
.mini-button:hover,
.transport-main:hover,
.transport-stop:hover,
.record-button:hover,
.tab-button:hover {
  transform: translateY(-1px);
  border-color: rgba(224, 210, 255, .54);
  filter: brightness(1.08);
}

.transport-main,
.transport-stop,
.record-button {
  min-height: 46px;
  padding: 0 16px;
  font-size: 13px;
}

.transport-stop,
.ui-btn-ghost,
.mini-button,
.tab-button { background: rgba(255,255,255,.045); }

.transport-main.is-active {
  background: linear-gradient(145deg, rgba(53, 185, 143, .96), rgba(26, 107, 88, .96));
}

.record-button[aria-pressed="true"] {
  background: linear-gradient(145deg, rgba(255, 84, 125, .98), rgba(122, 30, 62, .98));
  border-color: rgba(255, 151, 174, .55);
  box-shadow: 0 0 0 4px rgba(255, 109, 141, .10), inset 0 1px rgba(255,255,255,.16);
}

.ghost-red { color: #ffd3dc; }

.ui-btn { min-height: 42px; padding: 0 15px; }
.mini-button { min-height: 34px; padding: 0 12px; font-size: 12px; }
.mini-button.danger { color: #ffc7d1; border-color: rgba(255,109,141,.25); }

.transport-field,
.form-row,
.range-row {
  display: grid;
  gap: 6px;
}
.transport-field span,
.form-row span,
.range-row span,
.toggle-chip span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.transport-field input,
.transport-field select,
.form-row input,
.form-row select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: #fff;
  padding: 0 10px;
}

.transport-field input[type="number"] { width: 82px; }
.wide-field { min-width: 138px; }

.toggle-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  user-select: none;
}

.toggle-chip input { accent-color: var(--purple); }

.time-display {
  min-width: 152px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(109,228,255,.18);
  border-radius: 12px;
  background: rgba(109,228,255,.045);
  text-align: right;
}
.time-display span {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
}
.time-display strong {
  display: block;
  margin-top: 3px;
  font: 800 18px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.level-scope {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 46px;
  height: 48px;
  padding: 4px;
  border-radius: 9px;
  background: rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.08);
}
.meter-fill {
  width: 100%;
  height: 3%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--green), var(--cyan), var(--purple));
  transition: height .07s linear;
}

.studio-grid {
  display: grid;
  grid-template-columns: minmax(245px, 320px) minmax(0, 1fr) minmax(250px, 330px);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 21px;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 75, 213, .10), transparent 36%),
    linear-gradient(150deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.035);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.panel-head.compact { padding-bottom: 10px; }
.panel-head h2 {
  margin-top: 3px;
  font-size: 18px;
  letter-spacing: .02em;
}

.left-rail,
.right-rail { position: sticky; top: 14px; }

.track-list {
  display: grid;
  gap: 8px;
  padding: 12px 12px 14px;
}
.track-card {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: #fff;
  text-align: left;
}
.track-card.is-active {
  border-color: rgba(185,140,255,.52);
  background: linear-gradient(90deg, rgba(113,54,211,.22), rgba(109,228,255,.045));
}
.track-color {
  width: 10px;
  height: 30px;
  border-radius: 999px;
  background: var(--track-color, var(--purple));
  box-shadow: 0 0 18px var(--track-color, var(--purple));
}
.track-meta strong { display: block; font-size: 13px; }
.track-meta span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.track-count { color: var(--faint); font-size: 11px; font-weight: 800; }

.plugin-card,
.connection-card,
.master-strip {
  margin: 0 12px 12px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 17px;
  background: rgba(255,255,255,.036);
}
.plugin-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}
.plugin-title span,
.plugin-title strong { font-size: 12px; }
.plugin-title span { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 900; }
.plugin-title strong { color: #fff; }

.range-row {
  grid-template-columns: 58px 1fr 42px;
  align-items: center;
  margin-top: 9px;
}
.range-row output {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}
input[type="range"] { width: 100%; accent-color: var(--purple); }
.form-row { margin-top: 9px; }
.form-row.full { margin: 0 0 12px; }

.connection-card h3 { margin: 4px 0 7px; font-size: 16px; }
.connection-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.device-log {
  margin-top: 10px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  color: var(--muted);
  font: 700 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.center-stage {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.arrange-canvas,
#pianoCanvas {
  display: block;
  width: 100%;
  background: rgba(0,0,0,.18);
}
.arrange-canvas { height: 180px; }
.editor-panel { min-height: 570px; }
.editor-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  overflow-x: auto;
}
.tab-button {
  min-height: 38px;
  padding: 0 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  white-space: nowrap;
}
.tab-button.is-active {
  background: linear-gradient(145deg, rgba(118, 73, 200, .96), rgba(69, 39, 121, .96));
  border-color: rgba(211,192,255,.44);
}
.tab-page { display: none; padding: 13px; }
.tab-page.is-active { display: block; }
.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}
.editor-toolbar p { margin: 0; }
.piano-wrap {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.20);
}
#pianoCanvas { height: min(520px, 54vh); min-height: 360px; }

.drum-grid {
  display: grid;
  gap: 10px;
  padding: 8px 0;
}
.drum-row {
  display: grid;
  grid-template-columns: 74px repeat(16, minmax(25px, 1fr));
  gap: 6px;
  align-items: center;
}
.drum-label {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.step-button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: var(--faint);
  font-size: 10px;
  font-weight: 900;
}
.step-button.is-on {
  color: #fff;
  background: linear-gradient(145deg, rgba(109,228,255,.40), rgba(113,54,211,.55));
  border-color: rgba(185,140,255,.50);
  box-shadow: 0 0 20px rgba(109,228,255,.12);
}
.step-button.is-playing { outline: 2px solid rgba(255,255,255,.80); outline-offset: 1px; }

.audio-clip-list {
  display: grid;
  gap: 10px;
  min-height: 210px;
}
.audio-clip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.audio-clip strong { display: block; }
.audio-clip span { color: var(--muted); font-size: 12px; }
.audio-clip audio { width: min(360px, 42vw); }
.empty-state {
  display: grid;
  place-items: center;
  min-height: 200px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 14px;
  color: var(--muted);
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.export-card {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background: rgba(255,255,255,.04);
}
.export-card h3 { margin-bottom: 10px; }
.export-card p { color: var(--muted); line-height: 1.5; font-size: 13px; }
.file-button input { display: none; }
pre#statusLog {
  min-height: 126px;
  margin: 0;
  padding: 11px;
  border-radius: 11px;
  background: rgba(0,0,0,.28);
  color: var(--green);
  overflow: auto;
  font: 750 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mixer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.channel-strip {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  min-height: 240px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}
.channel-strip h3 {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-buttons { display: flex; gap: 5px; }
.channel-buttons button {
  flex: 1;
  min-height: 25px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}
.channel-buttons button.is-on { background: rgba(185,140,255,.24); color: #fff; }
.fader-wrap {
  display: grid;
  place-items: center;
  min-height: 114px;
}
.fader-wrap input {
  writing-mode: bt-lr;
  appearance: slider-vertical;
  width: 34px;
  height: 112px;
}
.pan-control { display: grid; gap: 4px; }
.pan-control span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.channel-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  overflow: hidden;
}
.channel-meter div {
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--purple));
  transition: width .07s linear;
}
.master-strip { margin-top: 0; }
.master-row { grid-template-columns: 58px 1fr 0; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(440px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid rgba(211, 192, 255, .25);
  border-radius: 14px;
  background: rgba(14, 12, 24, .94);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  font-size: 13px;
  z-index: 20;
}
.toast.is-visible { transform: translateY(0); opacity: 1; }

@media (max-width: 1280px) {
  .studio-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .right-rail { position: static; grid-column: 1 / -1; }
  .mixer { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .app-shell { padding: 10px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .session-strip { width: 100%; min-width: 0; grid-template-columns: 1fr; }
  .transport-panel { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .transport-buttons { grid-column: 1 / -1; }
  .time-display,
  .level-scope { grid-column: auto; }
  .studio-grid { grid-template-columns: 1fr; }
  .left-rail { position: static; }
  .mixer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export-grid { grid-template-columns: 1fr; }
  .drum-row { grid-template-columns: 62px repeat(8, minmax(25px, 1fr)); }
  .drum-row .step-button:nth-of-type(n+9) { margin-top: 4px; }
  .editor-toolbar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .brand-mark { width: 46px; height: 46px; }
  .topbar h1 { font-size: 25px; }
  .transport-panel { grid-template-columns: 1fr; }
  .mixer { grid-template-columns: 1fr; }
  .drum-row { grid-template-columns: 56px repeat(4, minmax(34px, 1fr)); }
  .audio-clip { grid-template-columns: 1fr; }
  .audio-clip audio { width: 100%; }
}

/* === Agnibeena Studio Web Lite v0.1: OP DAW dock/float UI patch === */
:root {
  --gold: #ffb339;
  --gold-2: #d78111;
  --leftRailW: 292px;
  --rightRailW: 318px;
  --editorH: 520px;
  --chrome: #0b0d10;
  --chrome-2: #11151a;
  --chrome-3: #171c22;
  --grid-line: rgba(156, 173, 196, .10);
}

html, body {
  overflow: hidden;
  background:
    radial-gradient(circle at 30% -18%, rgba(255,179,57,.10), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(109,228,255,.10), transparent 34%),
    linear-gradient(180deg, #080a0d, #030405 72%);
}
body::before { opacity: .22; background-size: 48px 48px; }

.app-shell {
  width: 100%;
  height: 100vh;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 68px 37px 1fr 32px;
  overflow: hidden;
}

.daw-topbar {
  min-height: 0;
  height: 68px;
  display: grid;
  grid-template-columns: 310px auto minmax(250px, 380px) 270px minmax(300px, .75fr);
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, #12161b, #090b0e);
  box-shadow: 0 6px 24px rgba(0,0,0,.36);
  backdrop-filter: none;
}

.brand-lockup { height: 100%; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.10); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 4px;
  border-color: rgba(255,179,57,.55);
  color: var(--gold);
  background: linear-gradient(145deg, rgba(35,25,13,.98), rgba(15,17,20,.98));
  box-shadow: inset 0 0 0 1px rgba(255,179,57,.14), 0 0 26px rgba(255,179,57,.10);
  font-size: 24px;
}
.kicker { color: var(--gold); font-size: 10px; letter-spacing: .12em; }
.topbar h1 { margin-top: 2px; font-size: 17px; font-family: var(--sans); letter-spacing: .02em; text-transform: none; }
.topbar h1 span { color: #fff; border: 1px solid rgba(255,179,57,.50); color: var(--gold); border-radius: 3px; padding: 0 4px; font-size: 12px; }

.main-menu { display: flex; align-items: center; height: 100%; border-right: 1px solid rgba(255,255,255,.10); }
.main-menu button,
.workspace-tab,
.panel-tool,
.transport-icon {
  border-radius: 0;
}
.main-menu button {
  height: 100%; padding: 0 14px;
  border: 0; border-right: 1px solid rgba(255,255,255,.05);
  background: transparent; color: rgba(247,243,255,.84);
}
.main-menu button:hover, .workspace-tab:hover { background: rgba(255,179,57,.08); color: #fff; }

.transport-core { display: grid; grid-template-columns: repeat(4, minmax(44px,1fr)); height: 100%; border-right: 1px solid rgba(255,255,255,.10); }
.transport-icon {
  min-height: 0; height: 100%; border: 0; border-right: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #191f26, #0c1014);
  color: rgba(247,243,255,.90); font-weight: 900;
  box-shadow: none;
}
.transport-icon:hover { transform: none; filter: brightness(1.16); }
.transport-play { color: var(--gold); font-size: 20px; }
.transport-rec { color: #ff3d47; font-size: 20px; }
.transport-main.is-active,
.transport-icon.is-active { background: linear-gradient(180deg, rgba(255,179,57,.26), rgba(122,74,10,.28)); color: #fff; }
#micRecordBtn { font-size: 12px; color: #ff8790; }

.transport-readouts { display: grid; grid-template-columns: repeat(3, 1fr); height: 100%; border-right: 1px solid rgba(255,255,255,.10); }
.compact-field { padding: 8px 10px; border-right: 1px solid rgba(255,255,255,.07); gap: 3px; }
.compact-field span { font-size: 9px; color: rgba(247,243,255,.55); }
.transport-field input, .transport-field select, .form-row input, .form-row select {
  min-height: 26px; height: 26px; border-radius: 3px; border-color: rgba(255,255,255,.12);
  background: #07090b; color: #fff; padding: 0 6px;
}
.transport-field input[type="number"] { width: 72px; }

.session-strip {
  min-width: 0; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-right: 1px solid rgba(255,255,255,.10);
}
.session-strip div {
  border: 0; border-right: 1px solid rgba(255,255,255,.07); border-radius: 0;
  background: transparent; padding: 12px 10px;
}
.session-strip span, .master-strip span { font-size: 9px; color: rgba(247,243,255,.52); }
.session-strip strong, .master-strip strong { font-size: 11px; }

.top-actions { display: grid; grid-template-columns: 58px 64px 145px 46px; align-items: center; gap: 8px; padding: 0 10px; }
.compact-toggle { min-height: 28px; border-radius: 3px; padding: 0 8px; background: #0b0e11; border-color: rgba(255,255,255,.10); }
.time-display { min-width: 0; padding: 6px 8px; border-radius: 3px; background: #07090b; border-color: rgba(255,179,57,.22); }
.time-display span { font-size: 10px; color: var(--gold); }
.time-display strong { font-size: 13px; }
.level-scope { width: 38px; height: 42px; border-radius: 3px; }
.meter-fill { background: linear-gradient(180deg, #ff4f4f, #ffb339 35%, #63f0a5); }

.workspace-tabs {
  display: flex;
  height: 37px;
  background: linear-gradient(180deg, #11161b, #080a0d);
  border-bottom: 1px solid rgba(255,255,255,.10);
  overflow-x: auto;
}
.workspace-tab {
  min-width: 96px; height: 100%; border: 0; border-right: 1px solid rgba(255,255,255,.08);
  background: transparent; color: rgba(247,243,255,.74); font-weight: 800;
}
.workspace-tab.is-active { color: #fff; box-shadow: inset 0 -2px var(--gold); background: rgba(255,179,57,.06); }
#resetWorkspaceBtn { margin-left: auto; color: var(--cyan); }

.studio-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: var(--leftRailW) minmax(320px, 1fr) var(--rightRailW);
  gap: 0;
  margin-top: 0;
  align-items: stretch;
  overflow: hidden;
}
.center-stage { gap: 0; min-height: 0; display: grid; grid-template-rows: minmax(150px, 42%) minmax(260px, 1fr); overflow: hidden; }
.panel {
  border-radius: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,22,27,.98), rgba(8,10,13,.98));
  box-shadow: none;
}
.left-rail, .right-rail { position: relative; top: auto; overflow: auto; min-height: 0; }
.right-rail { border-left: 1px solid rgba(255,255,255,.10); border-right: 0; }

.panel-head, .editor-panel-head, .mini-panel-head {
  min-height: 35px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #151a20, #0c0f13);
  cursor: grab;
  user-select: none;
}
.panel-head:active, .editor-panel-head:active, .mini-panel-head:active { cursor: grabbing; }
.panel-head h2 { font-size: 13px; margin-top: 1px; }
.section-label { color: var(--gold); font-size: 9px; letter-spacing: .12em; }
.panel-actions { display: flex; align-items: center; gap: 3px; }
.panel-tool {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.035); color: rgba(247,243,255,.82);
  font-size: 13px; line-height: 1; font-weight: 900;
}
.panel-tool:hover { background: rgba(255,179,57,.14); border-color: rgba(255,179,57,.42); color: #fff; }

.track-list { gap: 0; padding: 0; }
.track-card {
  min-height: 55px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.05));
  grid-template-columns: 8px 1fr auto; padding: 8px 10px;
}
.track-card:hover { background: rgba(255,179,57,.055); }
.track-card.is-active { border-color: rgba(255,255,255,.08); box-shadow: inset 2px 0 var(--gold); background: linear-gradient(90deg, rgba(255,179,57,.12), rgba(255,255,255,.035)); }
.track-color { border-radius: 1px; height: 34px; width: 5px; }
.track-meta strong { font-size: 12px; }
.track-meta span, .track-count { font-size: 10px; }

.plugin-card, .connection-card, .master-strip {
  margin: 0;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.10); border-radius: 0;
  background: rgba(255,255,255,.025); padding: 10px;
}
.plugin-card .mini-panel-head, .connection-card .mini-panel-head { margin: -10px -10px 10px; }
.mini-panel-head strong { font-size: 11px; color: #fff; }
.plugin-title { margin-bottom: 10px; }
.range-row { grid-template-columns: 54px 1fr 38px; margin-top: 7px; }
.range-row span, .form-row span, .toggle-chip span { font-size: 9px; }
.ui-btn, .mini-button, .tab-button, .record-button, .transport-stop, .transport-main {
  border-radius: 3px; min-height: 28px; padding: 0 9px; font-size: 11px;
  background: linear-gradient(180deg, #1b2229, #0b0e12); border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.ui-btn:hover, .mini-button:hover, .tab-button:hover { transform: none; background: rgba(255,179,57,.12); border-color: rgba(255,179,57,.34); }

.arrange-panel, .editor-panel { min-height: 0; overflow: hidden; position: relative; }
.arrange-canvas { height: 100%; min-height: 160px; }
.arrange-panel { display: grid; grid-template-rows: 35px 1fr; }
.editor-panel { min-height: 0; display: grid; grid-template-rows: 35px 1fr; }
.editor-panel-head { padding: 0 8px 0 0; }
.editor-tabs { height: 100%; padding: 0; border: 0; gap: 0; }
.tab-button { min-height: 35px; border-top: 0; border-left: 0; border-bottom: 0; border-radius: 0; padding: 0 16px; }
.tab-button.is-active { background: rgba(255,179,57,.13); border-color: rgba(255,255,255,.10); box-shadow: inset 0 -2px var(--gold); }
.tab-page { min-height: 0; padding: 10px; overflow: auto; }
.tab-page.is-active { display: block; }
.editor-toolbar { margin-bottom: 8px; font-size: 11px; }
.piano-wrap { border-radius: 0; border-color: rgba(255,255,255,.10); }
#pianoCanvas { height: var(--editorH); min-height: 240px; }
.drum-row { gap: 3px; grid-template-columns: 74px repeat(16, minmax(20px, 1fr)); }
.step-button { min-height: 34px; border-radius: 2px; }
.export-card, .audio-clip, .empty-state { border-radius: 3px; }

.mixer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
.channel-strip { min-height: 220px; border: 0; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; background: rgba(255,255,255,.025); }
.channel-strip h3 { color: #fff; }
.channel-buttons button { border-radius: 2px; }
.channel-buttons button.is-on { background: rgba(255,179,57,.24); }
.channel-meter div { background: linear-gradient(90deg, #63f0a5, #ffb339, #ff4f4f); }

.resize-edge { position: absolute; z-index: 5; opacity: 0; transition: opacity .12s ease; }
.dock-panel:hover > .resize-edge { opacity: 1; }
.resize-right { top: 0; right: 0; width: 7px; height: 100%; cursor: ew-resize; background: rgba(255,179,57,.18); }
.resize-left { top: 0; left: 0; width: 7px; height: 100%; cursor: ew-resize; background: rgba(255,179,57,.18); }
.resize-top { top: 0; left: 0; width: 100%; height: 7px; cursor: ns-resize; background: rgba(255,179,57,.15); }

.dock-panel.is-floating {
  position: fixed !important;
  z-index: 60;
  min-width: 260px;
  min-height: 160px;
  max-width: calc(100vw - 18px);
  max-height: calc(100vh - 18px);
  border: 1px solid rgba(255,179,57,.38);
  box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06) inset;
  resize: both;
  overflow: auto;
  background: linear-gradient(180deg, rgba(20,24,30,.98), rgba(7,9,12,.98));
}
.dock-panel.is-floating .panel-titlebar { background: linear-gradient(180deg, rgba(40,31,16,.98), rgba(11,13,16,.98)); }
.dock-placeholder { min-height: 34px; border: 1px dashed rgba(255,179,57,.25); background: rgba(255,179,57,.035); }

.dock-shelf {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 9px;
  border-top: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, #0c0f13, #050608); overflow-x: auto;
}
.dock-shelf span { color: rgba(247,243,255,.48); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
#dockShelfItems { display: flex; gap: 5px; }
.dock-shelf button { min-height: 22px; border: 1px solid rgba(255,179,57,.26); border-radius: 3px; background: rgba(255,179,57,.08); color: #fff; font-size: 11px; }

.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  padding: 5px;
  border: 1px solid rgba(255,179,57,.42);
  background: linear-gradient(180deg, rgba(18,22,27,.98), rgba(7,9,12,.98));
  box-shadow: 0 20px 60px rgba(0,0,0,.58);
  display: none;
}
.context-menu.is-open { display: block; }
.context-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 29px; border: 0; border-radius: 2px; padding: 0 9px;
  background: transparent; color: rgba(247,243,255,.88); text-align: left; font-size: 12px;
}
.context-menu button:hover { background: rgba(255,179,57,.14); color: #fff; }
.context-menu .context-sep { height: 1px; margin: 4px 0; background: rgba(255,255,255,.10); }
.context-menu .context-danger { color: #ff9ca8; }
.context-menu small { color: rgba(247,243,255,.42); font-size: 10px; }

.toast { border-radius: 3px; border-color: rgba(255,179,57,.35); z-index: 1200; }

@media (max-width: 1280px) {
  html, body { overflow: auto; }
  .app-shell { min-height: 100vh; height: auto; grid-template-rows: auto auto auto auto; overflow: visible; }
  .daw-topbar { height: auto; min-height: 68px; grid-template-columns: 1fr; }
  .brand-lockup, .main-menu, .transport-core, .transport-readouts, .session-strip { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
  .main-menu, .transport-core, .transport-readouts, .session-strip { min-height: 48px; }
  .top-actions { min-height: 48px; grid-template-columns: 70px 70px 1fr 46px; }
  .studio-grid { height: auto; grid-template-columns: 1fr; overflow: visible; }
  .left-rail, .right-rail { overflow: visible; }
  .center-stage { grid-template-rows: auto auto; overflow: visible; }
  .arrange-canvas { height: 220px; }
  .mixer { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .main-menu { overflow-x: auto; }
  .transport-core { grid-template-columns: repeat(2, 1fr); }
  .transport-readouts, .session-strip { grid-template-columns: 1fr; height: auto; }
  .mixer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export-grid { grid-template-columns: 1fr; }
  .drum-row { grid-template-columns: 64px repeat(4, minmax(30px, 1fr)); }
}

/* === Agnibeena Studio Web Lite v0.2: fixed arrange core + mixer editor tab === */
:root {
  --leftRailW: 260px;
  --rightRailW: 330px;
  --editorDockH: 380px;
}

/* Core DAW frame: track stack + timeline stay fixed, not floatable. */
.studio-grid {
  grid-template-columns: var(--leftRailW) minmax(420px, 1fr) var(--rightRailW) !important;
}
.center-stage {
  grid-template-rows: minmax(180px, 1fr) var(--editorDockH) !important;
}
.fixed-panel > .panel-titlebar,
.fixed-panel > .panel-head,
.fixed-panel > .editor-panel-head {
  cursor: default !important;
}
.fixed-panel:hover > .resize-edge,
.dock-panel:hover > .resize-edge {
  opacity: 1;
}
.left-rail .panel-actions .panel-tool,
.arrange-panel .panel-actions .panel-tool,
.editor-panel-head > .panel-actions {
  display: none !important;
}

/* Timeline is the main screen. Track names live only in the left track stack. */
.arrange-panel { min-height: 0 !important; }
.arrange-canvas {
  height: 100% !important;
  min-height: 160px;
}

/* Editor dock height now changes the whole bottom frame, not only canvas scale. */
.editor-panel {
  min-height: 180px !important;
  height: auto !important;
  grid-template-rows: 35px minmax(0, 1fr) !important;
}
.editor-panel > .resize-top {
  top: 35px;
  height: 8px;
  z-index: 12;
}
.tab-page {
  height: 100%;
  min-height: 0;
}
#pianoTab.is-active,
#drumsTab.is-active,
#audioTab.is-active,
#mixTab.is-active,
#exportTab.is-active {
  display: flex !important;
  flex-direction: column;
}
#pianoTab .piano-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
#pianoCanvas {
  height: 100% !important;
  min-height: 0 !important;
}

/* Mixer now lives horizontally inside the editor dock. */
.mixer-tab-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.horizontal-mixer {
  height: 100%;
  min-height: 0;
  overflow: auto hidden;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  grid-template-columns: none !important;
  gap: 0;
  padding: 0;
}
.horizontal-mixer .channel-strip {
  min-height: 0;
  height: 100%;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.045));
  grid-template-rows: auto auto minmax(82px, 1fr) auto auto;
}
.inline-master {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
}
.inline-master .master-row {
  margin: 0;
  grid-template-columns: 58px 1fr 0;
}

/* Right rail is now only instruments and MIDI/audio I/O. */
.right-rail {
  display: flex;
  flex-direction: column;
}
.right-rail > .plugin-card,
.right-rail > .connection-card {
  flex: 0 0 auto;
}
.right-rail .plugin-card,
.right-rail .connection-card {
  margin: 0;
}
.right-rail .dock-panel.is-floating {
  min-width: 280px;
}

@media (max-width: 1280px) {
  .studio-grid { grid-template-columns: 1fr !important; }
  .center-stage { grid-template-rows: 260px var(--editorDockH) !important; }
  .horizontal-mixer { grid-auto-columns: minmax(135px, 190px); }
}

/* === Agnibeena Studio Web Lite v0.4: OP piano roll edit core === */
:root {
  --rightRailW: 330px;
  --editorDockH: 400px;
  --arrangeHeaderW: 190px;
}

/* Remove the separate left options rail. Track headers now live inside the arrange canvas. */
.left-rail {
  display: none !important;
}
.studio-grid {
  grid-template-columns: minmax(0, 1fr) var(--rightRailW) !important;
  align-items: stretch !important;
}
.center-stage {
  min-width: 0;
  grid-template-rows: minmax(220px, 1fr) var(--editorDockH) !important;
}
.arrange-panel,
.editor-panel {
  min-width: 0;
}
.arrange-panel .panel-head {
  padding: 10px 12px 8px;
}
.arrange-panel .panel-head h2 {
  font-size: 15px;
}
.arrange-canvas {
  display: block;
  width: 100% !important;
  height: calc(100% - 48px) !important;
  min-height: 190px;
  border-top: 1px solid rgba(255,255,255,.07);
  cursor: crosshair;
}

/* Bottom editor now uses the full left+timeline width. */
.editor-panel {
  grid-template-rows: 35px minmax(0, 1fr) !important;
}
.editor-panel-head {
  padding-left: 8px;
}
.editor-tabs {
  width: 100%;
  overflow-x: auto;
}
.tab-button {
  border-radius: 0;
}

/* Piano roll: real vertical pitch grid with scroll instead of squeezed one-note view. */
#pianoTab .piano-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: rgba(0,0,0,.22);
}
#pianoCanvas {
  display: block;
  width: 100% !important;
  height: 820px !important;
  min-height: 720px !important;
}
#pianoTab.is-active {
  min-height: 0;
}

/* Mixer follows the same wide editor frame. */
.horizontal-mixer {
  grid-auto-columns: minmax(140px, 1fr);
}
.horizontal-mixer .channel-strip h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right side stays focused: instruments and MIDI/audio only. */
.right-rail {
  max-height: calc(100vh - 134px);
  overflow: auto;
}

@media (max-width: 1280px) {
  .studio-grid {
    grid-template-columns: 1fr !important;
  }
  .right-rail {
    position: relative;
    max-height: none;
  }
  #pianoCanvas {
    height: 760px !important;
  }
}


/* === v0.4 OP Piano Roll === */
.piano-opbar {
  align-items: stretch;
  gap: 8px;
  padding: 8px 8px 9px;
  margin-bottom: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.piano-status {
  flex: 0 0 270px;
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 220px;
}
.piano-status strong { color: #fff; font-size: 12px; }
.piano-status span { color: var(--cyan); font-size: 11px; font-weight: 850; }
.piano-status small { color: rgba(247,243,255,.52); font-size: 10px; line-height: 1.25; }
.piano-tools {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.piano-tools .mini-button {
  min-height: 27px;
  padding: 0 8px;
  font-size: 10px;
  border-radius: 0;
}
.mini-control {
  display: grid;
  grid-template-columns: auto minmax(52px, 86px);
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
.mini-control span {
  color: rgba(247,243,255,.62);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mini-control select {
  min-height: 23px;
  width: 72px;
  padding: 0 4px;
  border: 1px solid rgba(185,140,255,.22);
  border-radius: 0;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 10px;
}
.mini-control input[type="range"] {
  width: 74px;
  accent-color: var(--orange);
}
#pianoTab .piano-wrap {
  margin-top: 8px;
  border-radius: 0;
  border-color: rgba(255,179,57,.20);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
#pianoCanvas {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  cursor: crosshair;
  image-rendering: auto;
}
#pianoCanvas:focus {
  outline: 1px solid rgba(255,179,57,.60);
  outline-offset: -1px;
}

@media (max-width: 1280px) {
  .piano-opbar { flex-direction: column; }
  .piano-status { flex: 0 0 auto; }
  .piano-tools { justify-content: flex-start; }
}

/* === v0.6 OP Piano Suite === */
.piano-tools .piano-tool.is-active,
.mini-toggle:has(input:checked) {
  border-color: rgba(255,179,57,.72);
  background: linear-gradient(180deg, rgba(255,179,57,.20), rgba(255,179,57,.07));
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(255,179,57,.22), 0 0 0 1px rgba(255,179,57,.10);
}
.mini-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.24);
  color: rgba(247,243,255,.80);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
  user-select: none;
}
.mini-toggle input {
  width: 11px;
  height: 11px;
  accent-color: var(--gold);
  margin: 0;
}
.piano-tools {
  gap: 4px;
}
.piano-tools .mini-button,
.piano-tools .mini-control,
.piano-tools .mini-toggle {
  border-radius: 0 !important;
}


/* === v0.9 Bigger timeline/piano + integrated track controls === */
:root {
  --rightRailW: 330px;
  --editorDockH: 52vh;
  --arrangeMinH: 290px;
  --trackHeaderW: 315px;
}
.app-shell {
  grid-template-rows: 68px 37px minmax(0, 1fr) 26px !important;
}
.studio-grid {
  min-height: 0 !important;
  height: 100% !important;
  grid-template-columns: minmax(0, 1fr) var(--rightRailW) !important;
}
.center-stage {
  min-height: 0 !important;
  grid-template-rows: minmax(var(--arrangeMinH), 43%) minmax(390px, 57%) !important;
}
.arrange-panel { min-height: 0 !important; }
.arrange-panel .panel-head {
  min-height: 41px !important;
  padding: 5px 10px !important;
}
.arrange-panel .panel-head > div:first-child { min-width: 150px; }
.arrange-panel .panel-head h2 { font-size: 14px !important; }
.arrange-tools {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
}
.arrange-tools .mini-button { white-space: nowrap; }
.tool-sep {
  flex: 0 0 1px;
  height: 24px;
  background: rgba(255,255,255,.12);
  margin: 0 3px;
}
.arrange-canvas {
  height: calc(100% - 41px) !important;
  min-height: 245px !important;
}
.editor-panel { min-height: 0 !important; }
.editor-panel-head { min-height: 33px !important; }
.tab-page { overflow: hidden !important; }
#pianoTab.is-active { gap: 6px; }
.piano-opbar {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: minmax(170px, 260px) minmax(0, 1fr);
  align-items: start;
  padding: 6px !important;
  gap: 6px !important;
  overflow: hidden;
}
.piano-status { min-width: 0 !important; flex: none !important; }
.piano-status small { display: none; }
.piano-tools {
  max-height: 66px;
  overflow-y: auto;
  overflow-x: hidden;
  justify-content: flex-start !important;
  align-content: start;
  scrollbar-width: thin;
}
.piano-tools .mini-button,
.piano-tools .mini-toggle,
.piano-tools .mini-control {
  min-height: 24px !important;
}
#pianoTab .piano-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
  contain: size layout paint;
}
#pianoCanvas {
  min-width: 100%;
  image-rendering: auto;
}
.hidden-color-input {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.right-rail { max-height: none !important; min-height: 0; }
.dock-shelf { min-height: 26px !important; }
.track-control-hint {
  color: rgba(247,243,255,.54);
  font-size: 10px;
}
@media (max-width: 1280px) {
  .center-stage { grid-template-rows: 280px 560px !important; }
  .piano-opbar { grid-template-columns: 1fr !important; }
  .piano-tools { max-height: none; }
}


/* v0.10 empty-workspace + DAW layout cleanup */
:root {
  --rightRailW: 320px;
  --editorDockH: 455px;
}
body.studio-page { overflow: hidden; }
.daw-topbar {
  min-height: 58px;
  border-radius: 0;
  padding: 6px 12px;
  gap: 10px;
}
.brand-mark { width: 38px; height: 38px; border-radius: 4px; font-size: 22px; }
.kicker { font-size: 8px; }
.topbar h1 { font-size: 15px; margin-top: 1px; }
.main-menu button { min-height: 42px; padding: 0 16px; border-radius: 0; }
.transport-core { gap: 0; border-left: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.08); }
.transport-icon { min-width: 72px; border-radius: 0; }
.transport-rec, .ghost-red { min-width: 62px; }
.transport-readouts { gap: 8px; }
.compact-field { min-width: 86px; }
.session-strip { min-width: 300px; }
.top-actions { min-width: 250px; }
.workspace-tabs-clean { display: none; }
.studio-grid {
  grid-template-columns: minmax(0, 1fr) var(--rightRailW) !important;
  gap: 0 !important;
  margin-top: 0 !important;
}
.left-rail { display: none !important; }
.center-stage {
  grid-column: 1;
  grid-template-rows: minmax(245px, 43%) minmax(430px, 57%) !important;
  gap: 0 !important;
  height: 100%;
}
.right-rail { grid-column: 2; }
.arrange-panel { min-height: 240px; position: relative; }
.arrange-panel .panel-head { min-height: 42px; padding: 0 10px; }
.arrange-tools { flex-wrap: wrap; gap: 4px; }
.arrange-tools .mini-button { min-height: 26px; padding: 0 8px; }
.arrange-canvas { height: 100% !important; min-height: 200px !important; }
.empty-arrange-overlay {
  position: absolute;
  inset: 42px 0 0 0;
  display: none;
  place-items: center;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, rgba(185,140,255,.10), transparent 38%),
    linear-gradient(180deg, rgba(5,8,12,.20), rgba(5,8,12,.70));
}
.empty-arrange-overlay.is-visible { display: grid; }
.empty-arrange-overlay > div {
  width: min(760px, calc(100% - 48px));
  padding: 24px;
  border: 1px solid rgba(255,179,57,.32);
  background: rgba(9,12,17,.88);
  box-shadow: 0 20px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  pointer-events: auto;
}
.empty-arrange-overlay h3 { margin: 4px 0 8px; font-size: 22px; }
.empty-arrange-overlay p { color: rgba(247,243,255,.66); }
.editor-panel { min-height: 420px !important; }
#pianoTab.tab-page.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden !important;
  padding: 8px;
}
.piano-opbar {
  display: grid !important;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  align-items: start;
  max-height: 124px;
  overflow: auto;
}
.piano-status { min-width: 0; }
.piano-tools {
  justify-content: flex-start !important;
  align-content: start;
  max-height: 108px;
  overflow: auto;
  padding-right: 4px;
}
.piano-tools .mini-button,
.mini-toggle,
.mini-control { flex: 0 0 auto; }
#pianoTab .piano-wrap {
  min-height: 0;
  height: 100%;
  overflow: auto !important;
  margin-top: 8px;
}
#pianoCanvas { display: block; max-width: none !important; }
.menu-popover {
  position: fixed;
  top: 54px;
  left: 290px;
  z-index: 100;
  min-width: 250px;
  display: none;
  padding: 6px;
  border: 1px solid rgba(255,179,57,.35);
  background: linear-gradient(180deg, rgba(17,21,27,.98), rgba(6,8,11,.98));
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.menu-popover.is-open { display: grid; gap: 2px; }
.menu-popover button {
  min-height: 31px;
  border: 0;
  text-align: left;
  padding: 0 10px;
  background: transparent;
  color: rgba(247,243,255,.86);
  font-weight: 800;
}
.menu-popover button:hover { background: rgba(255,179,57,.12); color: #fff; }
.menu-popover span { display: block; height: 1px; margin: 4px 0; background: rgba(255,255,255,.10); }
.danger-ish {
  border-color: rgba(255,86,116,.35) !important;
  color: #ffd4dd !important;
}
.audio-clip canvas, .audio-clip audio { max-width: 100%; }
@media (max-width: 1180px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) 280px !important; }
  .session-strip { display: none; }
  .piano-opbar { grid-template-columns: 1fr; max-height: 150px; }
}


/* === v0.11 visibility/layout rescue: empty workspace must show, added tracks must draw === */
html,
body,
body.studio-page {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}
.app-shell {
  width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr) 24px !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.daw-topbar { grid-row: 1 !important; height: 58px !important; min-height: 58px !important; }
.workspace-tabs,
.workspace-tabs-clean { display: none !important; }
.studio-grid {
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--rightRailW) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  gap: 0 !important;
}
.left-rail { display: none !important; }
.center-stage {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-rows: minmax(260px, 42%) minmax(0, 58%) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
.right-rail {
  grid-column: 2 !important;
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}
.arrange-panel,
.editor-panel {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.arrange-panel {
  display: grid !important;
  grid-template-rows: 42px minmax(0, 1fr) !important;
  position: relative !important;
}
.arrange-panel .panel-head { height: 42px !important; min-height: 42px !important; }
.arrange-canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
}
.empty-arrange-overlay {
  inset: 42px 0 0 0 !important;
  z-index: 20 !important;
}
.empty-arrange-overlay.is-visible {
  display: grid !important;
}
.editor-panel {
  display: grid !important;
  grid-template-rows: 34px minmax(0, 1fr) !important;
}
.editor-panel-head { height: 34px !important; min-height: 34px !important; }
.tab-page { min-height: 0 !important; height: 100% !important; }
#pianoTab.tab-page.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.piano-opbar {
  max-height: 92px !important;
  overflow: auto !important;
}
#pianoTab .piano-wrap {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
}
#pianoCanvas {
  display: block !important;
  min-height: 360px !important;
  max-width: none !important;
}
.dock-shelf {
  grid-row: 3 !important;
  min-height: 24px !important;
  height: 24px !important;
  position: static !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
.right-rail .dock-panel:not(.is-floating) {
  display: block;
}
.arrange-tools { flex-wrap: nowrap !important; overflow-x: auto !important; }
.arrange-tools .mini-button { white-space: nowrap !important; }
@media (max-width: 1180px) {
  .app-shell { grid-template-rows: 58px minmax(0, 1fr) 24px !important; }
  .studio-grid { grid-template-columns: minmax(0, 1fr) 280px !important; }
  .center-stage { grid-template-rows: minmax(260px, 40%) minmax(0, 60%) !important; }
}


/* === v0.12 armed recording visibility === */
.transport-icon[aria-pressed="true"],
.ui-btn[aria-pressed="true"],
#trackArmBtn.is-active,
#audioRecordIoBtn.is-active {
  background: linear-gradient(180deg, rgba(255,86,116,.30), rgba(90,18,36,.42)) !important;
  border-color: rgba(255,150,174,.58) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(255,61,71,.16) !important;
}
#trackArmBtn.is-active::before {
  content: '● ';
  color: #ff3d47;
}
#audioRecordIoBtn.is-active::before {
  content: '■ ';
  color: #fff;
}
.device-log {
  white-space: pre-line;
}

/* === v0.13 audio timeline, zoom, selectable clips, visible metronome === */
.arrange-scroll {
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: auto hidden;
  background: #070a0e;
  border-top: 1px solid rgba(255,255,255,.07);
  scrollbar-color: rgba(255,179,57,.45) rgba(255,255,255,.08);
}
.arrange-scroll .arrange-canvas {
  height: 100% !important;
  min-height: 220px !important;
  border-top: 0 !important;
}
.arrange-panel {
  grid-template-rows: 42px minmax(0, 1fr) !important;
}
.arrange-panel .panel-head {
  min-height: 42px !important;
}
.arrange-zoom-control {
  min-width: 150px;
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr);
  gap: 6px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  height: 24px;
}
.arrange-zoom-control span {
  color: rgba(247,243,255,.72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.arrange-zoom-control input { width: 100%; }
.metronome-big.is-active {
  border-color: rgba(255,179,57,.72) !important;
  background: linear-gradient(180deg, rgba(255,179,57,.26), rgba(72,48,10,.32)) !important;
  color: #fff !important;
}
.audio-clip {
  grid-template-columns: minmax(160px, 1fr) minmax(190px, 320px) minmax(180px, 360px) auto;
  align-items: center;
}
.audio-clip.is-selected {
  border-color: rgba(109,228,255,.82) !important;
  background: linear-gradient(180deg, rgba(109,228,255,.14), rgba(34,210,216,.06)) !important;
  box-shadow: inset 3px 0 rgba(109,228,255,.95);
}
.audio-clip canvas {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.24);
}
#deleteAudioClipBtn, #downloadAudioClipBtn { white-space: nowrap; }
@media (max-width: 1180px) {
  .audio-clip { grid-template-columns: 1fr; }
  .arrange-zoom-control { min-width: 120px; }
}