.create-body { height: 100vh; height: 100dvh; overflow: hidden; }
.guest-bar { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; background: #2a1405; color: #ffd9a8; font-size: 13px; padding: 6px 12px; border-bottom: 1px solid #5a2d0c; }

/* ---- 上部バー ---- */
.c-top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.c-top .spacer { flex: 1; }
.title-input { margin: 0; width: min(280px, 30vw); font-weight: 900; font-size: 15px; background: transparent; border-color: transparent; padding: 6px 8px; }
.title-input:hover { border-color: var(--line-2); }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: #777; display: block; }
.sync.ok i { background: var(--ok); }
.sync.busy i { background: var(--amber); animation: blink 1s infinite; }
.sync.bad i { background: var(--danger); }
@keyframes blink { 50% { opacity: .3; } }
.dd { position: relative; }
.peers { display: flex; align-items: center; }
.peers .avatar { border: 2px solid var(--pc, var(--flame)); margin-left: -6px; width: 28px; height: 28px; box-sizing: border-box; }
.peers .avatar:first-child { margin-left: 0; }
.peers .more { font-size: 12px; color: var(--muted); margin-left: 6px; }

/* ---- トランスポート ---- */
.c-transport { display: flex; align-items: center; gap: 18px; padding: 8px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.tp-group { display: flex; align-items: center; gap: 6px; }
.tp-group.right { margin-left: auto; gap: 14px; }
.tp-group.fields { gap: 12px; }
.tp-group label { margin: 0; font-size: 11px; display: flex; flex-direction: column; color: var(--muted); }
.tp-group label input, .tp-group label select { margin-top: 2px; padding: 5px 8px; font-size: 14px; font-weight: 700; width: 74px; }
.tp-group label select { width: 112px; }
#key { width: 64px; }
.tp-btn { font: inherit; font-weight: 700; font-size: 12px; color: var(--text); background: var(--panel-3); border: 1px solid var(--line-2); height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tp-btn:hover { background: #33200f; }
.tp-btn.play { background: linear-gradient(135deg, var(--ember), var(--flame)); color: #1c0b02; border-color: transparent; width: 52px; }
.tp-btn.tog[aria-pressed=true] { background: rgba(255, 138, 31, .18); border-color: var(--flame); color: var(--cream); }
.tp-time { font-family: var(--display); font-size: 12px; min-width: 96px; display: flex; flex-direction: column; line-height: 1.25; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 5px 12px; }
.tp-time b { font-size: 18px; font-weight: 600; color: var(--cream); letter-spacing: .02em; }
.tp-time span { color: var(--muted); font-size: 11px; }
.vol input { width: 110px; margin: 6px 0 0; padding: 0; accent-color: var(--flame); }
.meter { width: 6px; height: 34px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 4px; position: relative; overflow: hidden; }
.meter i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, var(--ok), var(--amber) 70%, var(--danger)); }
.side-toggle { display: none; }

/* ---- メイン ---- */
.c-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 252px minmax(0, 1fr) 296px; }
.pane-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.pane-head h2 { font-size: 14px; }
.c-tracks { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.track-list { overflow: auto; padding: 4px 8px 12px; flex: 1; }
.trk { display: grid; grid-template-columns: 6px 1fr auto auto; gap: 4px 8px; align-items: center; padding: 8px 8px 8px 0; border-radius: 10px; cursor: pointer; border: 1px solid transparent; margin-bottom: 4px; position: relative; }
.trk:hover { background: var(--panel-2); }
.trk.sel { background: var(--panel-3); border-color: var(--line-2); }
.trk-color { align-self: stretch; border-radius: 0 4px 4px 0; }
.trk-name { font-weight: 700; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-inst { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.trk .dots { display: inline-flex; gap: 2px; }
.trk .dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.mini { font: inherit; font-weight: 900; font-size: 11px; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.mini:hover { color: var(--text); }
.mini.on.m { background: #3a1010; color: var(--danger); border-color: #7a2e2e; }
.mini.on.s { background: #3a2a08; color: var(--amber); border-color: #7a5a1d; }
.trk input[type=range] { grid-column: 2 / 5; margin: 0; padding: 0; height: 14px; accent-color: var(--flame); }
.trk.dim .trk-name { opacity: .45; }

.c-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.c-overview { height: 54px; flex: none; background: var(--panel); border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.c-overview canvas { width: 100%; height: 100%; display: block; }
.c-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); flex: none; }
.c-tools label { margin: 0; }
.c-tools .inl { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.c-tools .inl select { margin: 0; width: 92px; padding: 5px 24px 5px 8px; font-size: 13px; }
.c-tools .chk { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.c-tools .vel input { width: 90px; margin: 0; padding: 0; accent-color: var(--flame); }
.c-tools output { font-size: 12px; width: 26px; color: var(--cream); font-weight: 700; }
.c-tools .sp { flex: 1; }
.c-tools .divider { width: 1px; height: 22px; background: var(--line-2); }
.selinfo { font-size: 12px; color: var(--amber); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.seg button { font: inherit; font-weight: 700; font-size: 13px; background: transparent; color: var(--muted); border: 0; padding: 6px 12px; cursor: pointer; border-right: 1px solid var(--line-2); }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--text); background: var(--panel-3); }
.seg button.on { background: linear-gradient(135deg, var(--ember), var(--flame)); color: #1c0b02; }

/* ---- ピアノロール ---- */
#roll { flex: 1; min-height: 0; background: var(--ink); }
.roll { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: 30px minmax(0, 1fr); position: relative; }
.roll-corner { background: #140b07; border-bottom: 1px solid #3a2417; border-right: 1px solid #3a2417; }
.roll-ruler { cursor: pointer; display: block; }
.roll-keys { display: block; cursor: pointer; }
.roll-scroll { overflow: auto; position: relative; }
.roll-stage { position: sticky; top: 0; left: 0; z-index: 1; touch-action: none; }
.roll-stage canvas { position: absolute; left: 0; top: 0; }
.roll-over { pointer-events: none; }
.roll-spacer { pointer-events: none; }

/* ---- 右パネル ---- */
.c-side { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.tabs button { flex: 1; font: inherit; font-weight: 700; font-size: 12.5px; background: none; border: 0; color: var(--muted); padding: 11px 4px; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected=true] { color: var(--cream); border-bottom-color: var(--flame); }
.tabpanel { overflow: auto; padding: 14px; flex: 1; }
.tabpanel h3 { font-size: 13px; margin: 18px 0 8px; color: var(--cream); }
.tabpanel h3:first-child { margin-top: 0; }
.tabpanel label { font-size: 12px; margin-bottom: 12px; }
.tabpanel input[type=range] { padding: 0; margin: 8px 0 0; accent-color: var(--flame); }
.tabpanel .row { display: flex; gap: 8px; flex-wrap: wrap; }
.tabpanel .hint { font-size: 12px; color: var(--muted); line-height: 1.6; }
.rng { display: flex; align-items: center; justify-content: space-between; }
.rng output { font-size: 12px; color: var(--cream); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-pressed=true] { border-color: var(--text); box-shadow: 0 0 0 2px var(--ink) inset; }
.peer-row, .member-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.peer-row .nm, .member-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.invite-out { display: flex; gap: 6px; margin-top: 8px; }
.invite-out input { margin: 0; font-size: 12px; }
.keys { font-size: 12px; color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.keys kbd { background: var(--panel-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 6px; font-family: inherit; font-weight: 700; color: var(--text); font-size: 11px; }
.inst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inst-grid button { font: inherit; font-weight: 700; font-size: 13px; color: var(--text); background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.inst-grid button:hover { border-color: var(--flame); background: var(--panel-3); }
.inst-grid i { width: 18px; height: 18px; border-radius: 50%; display: block; }

.readonly [data-edit] { opacity: .45; pointer-events: none; }

/* ---- 狭い画面 ---- */
@media (max-width: 1100px) {
  .c-main { grid-template-columns: 210px minmax(0, 1fr); }
  .c-side { position: fixed; z-index: 80; right: 0; top: 0; bottom: 0; width: min(320px, 92vw); transform: translateX(100%); transition: transform .2s; box-shadow: -20px 0 60px rgba(0, 0, 0, .6); }
  .c-side.open { transform: none; }
  .side-toggle { display: inline-flex; }
}
@media (max-width: 760px) {
  .c-top { flex-wrap: wrap; gap: 8px; }
  .title-input { width: 100%; order: 5; }
  .peers, .sync span { display: none; }
  .c-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .c-tracks { min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: stretch; }
  .pane-head { flex-direction: column; justify-content: center; gap: 6px; padding: 6px 8px; }
  .pane-head h2 { display: none; }
  .track-list { display: flex; gap: 6px; overflow-x: auto; padding: 6px; }
  .trk { min-width: 150px; margin: 0; }
  .c-tools .sp, .c-tools .divider { display: none; }
  .tp-time { min-width: 80px; }
  .tp-group.right { margin-left: 0; }
  .c-overview { height: 40px; }
}