/* style-layout-pc-v2-sp.css — style-layout-pc-v2.cssの続き: SP幅(≤900px)組み替え+下段バー追記(Speed/Keyステッパー等)。style-layout-pc-v2.cssの直後に読む(順序で上書き) */

/* SP幅(≤900px): #pcV2Layoutを縦flex、アイコンバー=最下部固定(横スクロール)、下段バー=その直上(横スクロール)、パネル=通常非表示で.pcv2-panel-open時にヘッダー直下〜下部バー直上の全面オーバーレイ。波形エリアは本体のまま。#pcV2PanelBody配下はPC幅と同DOM/CSS */
@media screen and (max-width: 900px) {
  body.pc-v2-active #appHeader {
    height: 44px;
    padding: 0 12px;
    gap: 12px;
  }

  body.pc-v2-active #appLogo {
    font-size: 22px;
  }

  /* 【重要】#pcV2BottomBarと#pcV2IconBarの順序はCSS orderでなくplayer-ui-pc-v2.js(syncBottomBarPosition)がDOMを動かして実現(階層が別: BottomBarは#pcV2Root直下、IconBarは#pcV2Layout内) */
  #pcV2Layout {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    flex: 1;
  }

  #pcV2WaveArea {
    flex: 1;
    min-height: 0;
    order: 1;
    padding: 8px 16px;
    padding-bottom: var(--pcv2-wave-fab-space, 62px);
  }

  /* SPでもシークバーを残り高さに伸ばす: style-layout-sp.cssの#vbarContainer{flex-shrink:0}より詳細度を上げて上書き */
  #pcV2WaveArea #vbarContainer {
    flex: 1 1 0;
    min-height: 0;
    gap: 24px;
    padding-top: 22px;
  }

  #pcV2WaveArea .vbar {
    min-height: 20px;
  }

  /* order: 整数のみ有効(小数は無視され先頭に出る不具合があった)。#pcV2WaveArea:1・#pcV2TimeRow:2・アンカータブ:3・#pcV2BottomBar:4・#pcV2IconBar:5 */
  #pcV2BottomBarAnchorTabs {
    display: flex;
    order: 3;
    flex-shrink: 0;
  }

  .pcv2-anchor-tab {
    padding: 10px 20px;
    background: none;
    border: 1px solid var(--border-subtle);
    font-family: var(--font-display, 'Instrument Sans'), sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--icon-muted);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  }

  .pcv2-anchor-tab:hover {
    color: var(--text-bright);
    border-color: rgba(var(--ov), 0.24);
  }

  .pcv2-anchor-tab:active {
    transform: scale(0.94);
    background: rgba(var(--ov), 0.06);
  }

  /* シートの開閉アニメ中もボタン群(下段バー・アイコンバー)の背面に潜るよう、パネル(z-index:100)より前面+不透明背景 */
  #pcV2BottomBar,
  #pcV2IconBar {
    position: relative;
    z-index: 110;
    background: var(--bg-0a0a0c);
  }

  #pcV2BottomBar {
    order: 4;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0px 25px;
    scrollbar-width: none;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }

  #pcV2BottomBar::-webkit-scrollbar {
    display: none;
  }

  #pcV2BottomBar .pcv2-ctrl-group {
    flex-shrink: 0;
  }

  /* 設定帯(2列の格子)+ADD AUDIOを同じ左右端の縦並びに(右寄せの単独ボタンを作らない) */
  #pcV2WaveFabRow {
    left: 14px;
    right: 14px;
    bottom: 14px;
    gap: 8px;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #pcV2WaveFabRow .pcv2-wave-fab-btns { display: grid; grid-template-columns: 1fr; gap: 8px; }
  #pcV2WaveFabRow .panel-fab-btn {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    justify-content: center;
  }

  /* #pcV2TimeRow: 時刻表示は波形ヘッダー(歯車の左)へ移動したため常に非表示(空コンテナ) */
  #pcV2TimeRow {
    display: none;
  }

  /* SP: ファイル名の下に時刻。歯車は右端で2行ぶち抜き。長いファイル名は省略(…) */
  #pcV2WaveHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
  }
  #pcV2WaveHead #appTitle { grid-column: 1; grid-row: 1; min-width: 0; max-width: 100%; }
  #pcV2WaveHead #appTitle #appTitleInner { display: block; overflow: hidden; text-overflow: ellipsis; animation: none !important; transform: none !important; }
  #pcV2WaveHead #appTitle #appTitleText { display: inline; }
  #pcV2WaveHead #appTitle #appTitleText.marquee-clone { display: none; }
  #pcV2WaveHead .time-controls-row { grid-column: 1; grid-row: 2; min-width: 0; }

  #pcV2BottomBar .tripleNavBtn-third {
    padding: 10px 6px;
  }

  #pcV2BottomBar .tripleNavBtn-third svg {
    width: 26px;
    height: 26px;
  }

  #pcV2BottomBar .tripleNavBtn-center svg {
    width: 38px;
    height: 38px;
  }

  #pcV2BottomBar .tripleNavBtn-center,
  #pcV2BottomBar .loopbtn {
    min-height: 70px;
  }

  #pcV2BottomBar .loopbtn {
    padding: 14px 16px;
  }

  #pcV2BottomBar .loopbtn svg {
    width: 26px;
    height: 26px;
    margin: 4px auto;
  }

  /* SP幅アイコンバー: 最下部固定・横並び・横スクロール。padding-bottom=env(safe-area-inset-bottom)+16px(最下端ギリギリだとiPhoneの横スワイプがアプリ切替に奪われる) */
  #pcV2IconBar {
    order: 5;
    flex-direction: row;
    flex-shrink: 0;
    align-items: stretch;
    border-right: none;
    padding: 6px 6px calc(24px + env(safe-area-inset-bottom, 0px));
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #pcV2IconBar::-webkit-scrollbar {
    display: none;
  }

  /* 右端ヒント矢印: #pcV2Layout基準で絶対配置。JS(updateIconBarScrollHint)が.visibleを付外し。初期は非表示(チラつき防止) */
  #pcV2IconBarScrollHint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    height: 66px;
    width: 44px;
    padding-right: 4px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-0a0a0c) 65%);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
  }

  #pcV2IconBarScrollHint.visible {
    opacity: 1;
  }

  #pcV2IconBarScrollHint svg {
    width: 20px;
    height: 20px;
    fill: var(--icon-muted, var(--fg-8b8b9e));
    /* 無限アニメ禁止(再計算)。数回で止める(GOTCHAS.md) */
    animation: pcv2-scroll-hint-nudge 1.6s ease-in-out 3;
  }

  @keyframes pcv2-scroll-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }

  .pcv2-icon-item {
    flex-shrink: 0;
    gap: 8px;
    padding: 12px 10px;
  }

  .pcv2-icon-item svg {
    width: 26px;
    height: 26px;
  }

  .pcv2-icon-item span {
    font-size: 12px;
  }

  .pcv2-icon-item.active::before {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
  }

  #pcV2IconBarSpacer {
    display: none;
  }

  #pcV2IconBarBottom {
    flex-direction: row;
    border-top: none;
    border-left: 1px solid var(--border-subtle);
    padding-top: 0;
    padding-left: 8px;
    margin-left: 4px;
    gap: 4px;
  }

  /* SP幅はKeyboardボタンをCSSで非表示(JSのICON_ITEMSからは消さない=PC表示/機能に影響させない) */
  .pcv2-icon-item[data-panel-id="keyboard"] {
    display: none;
  }

  #pcV2Panel {
    display: none;
  }

  #pcV2Layout.pcv2-panel-open #pcV2Panel {
    animation: qn-sheet-up 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* 下部バー+アイコンバーの高さ分を空ける(bottom:0だと閉じる手段のアイコンバーまで覆い戻れなくなった)。高さはJS(player-ui-pc-v2.js)がCSS変数で設定 */
    bottom: var(--pcv2-bottom-bars-height, 140px);
    /* z-index: .vbar-line(50)・.vbar-label(51)より手前 */
    z-index: 100;
    width: 100%;
    border-right: none;
    background: var(--bg-0a0a0c);
    /* 開いている目印: 上端アクセント線+上向きの影+角丸+つまみ */
    border-top: 2px solid var(--accent-primary);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55);
  }

  #pcV2Layout.pcv2-panel-closing #pcV2Panel {
    animation: qn-sheet-down 230ms cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
  }

  #pcV2Panel #pcV2PanelHeader {
    position: relative;
    padding-top: 22px;
    padding-right: 64px;
  }

  #pcV2Panel #pcV2PanelHeader::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: var(--accent-primary);
    opacity: 0.7;
  }

  #pcV2Panel .qn-sheet-close {
    display: flex;
  }

  #pcV2Panel #pcV2PanelHeader { touch-action: none; }
}

@keyframes qn-sheet-up {
  from { transform: translateY(100%); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
@keyframes qn-sheet-down {
  to { transform: translateY(100%); opacity: 0; }
}

/* シートの閉じるボタン(PC幅は非表示。SP幅の.qn-sheet-closeはdisplay:flex)。見出し右端に重ねる */
.qn-sheet-close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(var(--ov), 0.04);
  color: var(--text-bright);
  cursor: pointer;
}
.qn-sheet-close svg { width: 26px; height: 26px; fill: currentColor; }
.qn-sheet-close:active { transform: scale(0.92); background: rgba(var(--ov), 0.1); }


/* scrollbar-gutter: stable(縦スクロールバーの出没で全体が左右にガタつくのを防ぐ) */
html {
  scrollbar-gutter: stable;
}

#pcV2BottomBar #setABtn .top-controls-btn-label,
#pcV2BottomBar #setBBtn .top-controls-btn-label { display: block; white-space: nowrap; }

#pcV2BottomBar .top-controls-btn-label {
  display: block;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
#pcV2BottomBar .tripleNavBtn-third:not(.tripleNavBtn-center) svg {
  margin: 6px auto;
  display: block;
  box-sizing: content-box;
}
#pcV2BottomBar .tripleNavBtn-third { min-height: 57px; }


/* ---------- SPメインドック ----------
   前マーカー/Loop/再生/+Marker/次マーカー/Moreを1行に。再生は円(円角はそのまま)、他は角ボタン。タップ領域は全て48px以上。
   既存の下段バー(#pcV2BottomBar)は「More」で開閉(#pcV2Root.qn-sp-more-open)。押す先は既存ボタン(JSの中継)。 */
#pcV2SpDock { display: none; }
@media screen and (max-width: 900px) {
  #pcV2SpDock {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.7fr 1.2fr 1fr 0.9fr;
    align-items: center;
    order: 3;
    flex-shrink: 0;
    position: relative;
    z-index: 110;
    background: var(--bg-0a0a0c);
    border-top: 1px solid var(--border-subtle);
    padding: 6px 6px 4px;
    gap: 2px;
  }
  #pcV2BottomBarAnchorTabs { display: none; }
  #pcV2Root:not(.qn-sp-more-open) #pcV2BottomBar { display: none; }
  .pcv2-dock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 4px 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--icon-muted);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pcv2-dock-btn svg { width: 28px; height: 28px; fill: currentColor; display: block; }
  .pcv2-dock-btn span { font-size: 11px; line-height: 1; white-space: nowrap; }
  .pcv2-dock-btn:active { background: rgba(var(--ov), 0.06); }
  .pcv2-dock-loop.is-active, .pcv2-dock-more.is-open { color: var(--accent-primary); }
  .pcv2-dock-add { color: var(--accent-primary); }
  .pcv2-dock-add svg { width: 32px; height: 32px; }
  .pcv2-dock-play {
    justify-self: center;
    width: 64px;
    height: 64px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--sidebar-on-accent, #fff);
  }
  .pcv2-dock-play svg { width: 34px; height: 34px; }
  .pcv2-dock-play:active { background: var(--accent-primary); transform: scale(0.94); }
  /* 再生中も停止中と同じ色(緑にしない) */
  .pcv2-dock-play.is-playing { background: var(--accent-primary); }
  .pcv2-dock-more svg { transition: transform 150ms ease; }
  .pcv2-dock-more.is-open svg { transform: rotate(180deg); }
  /* 波形の横スワイプ(シーク)を使うため、縦スクロール以外はブラウザに任せない */
  #vbarRows { touch-action: pan-y; }
}


/* ---------- SP: Moreの下段バーは「再生系=1画面」「マーカー系=1画面」の2ページ。各画面はボタンを均等配置(バランス)、横スナップ+右端/左端の矢印で移動 ---------- */
@media (max-width: 900px) {
  #pcV2BottomBar {
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  #pcV2BottomBar #topControls {
    width: 200%;
    flex: 0 0 200%;
    min-width: 200%;
    position: relative !important;
  }
  #pcV2BottomBar .pcv2-ctrl-group {
    flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box;
    padding: 0 16px;
    justify-content: stretch;
    scroll-snap-align: start;
  }
  /* 各ボタンは幅いっぱいを等分(flex:1 1 0) */
  #pcV2BottomBar .pcv2-ctrl-group > * { flex: 1 1 0; min-width: 0; }
  #pcV2BottomBar .pcv2-ctrl-group > * > button { flex: 1 1 0; min-width: 0; }
  #pcV2BottomBar .pcv2-ctrl-divider { display: none; }
  /* ページ移動の矢印(sticky: バーの左右端に固定) */
  #pcV2BottomBar .pcv2-bar-page {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    width: 16px;
    align-self: stretch;
    padding: 0;
    background: none;
    border: none;
    color: var(--icon-muted);
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
  }
  #pcV2BottomBar .pcv2-bar-page svg { width: 20px; height: 20px; margin: 0 -2px; fill: currentColor; }
  #pcV2BottomBar .pcv2-bar-page.is-next { right: 0; margin-left: -16px; order: 99; }
  #pcV2BottomBar .pcv2-bar-page.is-prev { left: 0; margin-right: -16px; order: -1; }
  #pcV2BottomBar.is-page-1 .pcv2-bar-page.is-prev { visibility: hidden; pointer-events: none; }
  #pcV2BottomBar:not(.is-page-1) .pcv2-bar-page.is-next { visibility: hidden; pointer-events: none; }
}
@media (min-width: 901px) {
  #pcV2BottomBar .pcv2-bar-page { display: none; }
}

/* Volume/Speed/KeyのミキサーはPC幅専用(SPの2ページバーには出さない) */
@media (max-width: 900px) {
  /* 下段バー側(非表示)の分は出さない。SPのミキサーはMore(#pcV2MorePanel)内に移して表示する */
  #pcV2BottomBar #pcV2BarMixer, .pcv2-mixer-divider { display: none !important; }
}


/* ---------- SPの再配置: Moreはドックの上に開く(設定帯のみ)/ 前次トラック・リピートは波形ヘッダー右端 / AudioはA・Bと同じ行で小さく ---------- */
#pcV2MorePanel, #pcV2WaveHeadBtns { display: none; } /* PC幅では出さない */
/* A/B(PC幅では出さない)。v4.56.0で:not(.pcv2-fab-tg)を足した時にSP幅の表示(下の@media内の同名ルール)より強くなってSPのA/Bが消えていた(v4.61.0で直した)。PC幅だけに限定する。.panel-fab-btnのdisplay:flexに勝つためidを付ける */
@media (min-width: 901px) { #pcV2WaveFabRow .pcv2-fab-ab:not(.pcv2-fab-tg) { display: none; } }
/* PC幅: 設定帯の右にクリック音(Grid click)と吸着(Marker snap)のON/OFF。SP幅は下の@mediaで既存のA/Bと同じ見た目になる */
#pcV2WaveFabRow .pcv2-fab-tg { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 56px; padding: 0; background: var(--bg-0e0e13); border: 1px solid var(--border-subtle); border-radius: var(--radius-popup); color: var(--icon-muted); box-shadow: none; pointer-events: auto; cursor: pointer; }
#pcV2WaveFabRow .pcv2-fab-tg svg { width: 22px; height: 22px; fill: currentColor; }
#pcV2WaveFabRow .pcv2-fab-tg:hover { color: var(--text-primary, #fff); }
#pcV2WaveFabRow .pcv2-fab-tg.has-point { color: var(--accent-primary); border-color: var(--accent-primary); }
@media screen and (max-width: 900px) {
  /* DOM順は波形→MorePanel→下段バー→ドック→アイコンバー(JS: syncBottomBarPosition)。orderも合わせる */
  /* Moreは波形を縮めず、ドックの上に重ねて開く(外枠は高さ0・中身を上方向へ張り出す) */
  #pcV2MorePanel { order: 2; flex-shrink: 0; height: 0; padding: 0; position: relative; z-index: 105; }
  #pcV2Root.qn-sp-more-open #pcV2MorePanel { display: block; }
  #pcV2MorePanel .pcv2-more-inner { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-0a0a0c); border-top: 1px solid var(--border-subtle); padding: 8px 14px; }
  #pcV2SpDock { order: 3; }
  /* 下段バーの中身は全て他へ移した(再生/マーカー系はドック、トラック/リピートはヘッダー、A/BはAudioの隣、-10s/+10sは廃止)。操作元のボタンはDOMに残す(ドック等が.click()で中継するため) */
  #pcV2BottomBar, #pcV2Root.qn-sp-more-open #pcV2BottomBar { display: none !important; }

  /* 波形ヘッダー: 右端にボタン群(2行ぶち抜き) */
  #pcV2WaveHead { grid-template-columns: minmax(0, 1fr) auto; }
  #pcV2WaveHeadBtns { display: flex; align-items: center; gap: 2px; grid-column: 2; grid-row: 1 / span 2; }
  .pcv2-head-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: none; border-radius: 10px; color: var(--icon-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pcv2-head-btn svg { width: 26px; height: 26px; fill: currentColor; display: block; }
  .pcv2-head-btn:active { background: rgba(var(--ov), 0.08); }
  .pcv2-head-btn.is-active { color: var(--accent-primary); }

  /* 空いた所にA/B */
  #pcV2WaveFabRow .pcv2-wave-fab-btns { display: flex; gap: 8px; align-items: stretch; }
  #pcV2WaveFabRow .pcv2-fab-ab { display: flex; flex: 0 0 auto; width: 34px; justify-content: center; align-items: center; height: 36px; padding: 0; background: none; border: 1px solid var(--border-strong, rgba(var(--ov),0.2)); color: var(--icon-muted); box-shadow: none; }
  #pcV2WaveFabRow .pcv2-fab-ab svg { width: 20px; height: 20px; fill: currentColor; }
  #pcV2WaveFabRow .pcv2-fab-ab .pcv2-ab-t { display: none; }
  /* View(Wave/Chord/Degree)とEditはA/Bの左(JSのsyncMoreExtrasが移す)。入りきらない時はA/Bが次の段へ */
  #pcV2WaveFabRow .pcv2-wave-fab-btns { flex-wrap: wrap; row-gap: 8px; }
  #pcV2WaveFabRow .qn-set-inline-item { pointer-events: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; order: 0; min-width: 0; }
  #pcV2WaveFabRow .qn-view-item .qn-set-inline-label { display: none; }
  #pcV2WaveFabRow .qn-set-inline-item .qn-stepper { height: 36px; }
  #pcV2WaveFabRow .qn-set-inline-item .qn-stepper-btn { width: 24px; }
  #pcV2WaveFabRow .qn-set-inline-item .qn-stepper-btn svg { width: 18px; height: 18px; }
  #pcV2WaveFabRow .qn-set-inline-item .qn-stepper-val { min-width: 44px; padding: 0 2px; }
  #pcV2WaveFabRow .pcv2-wave-fab-btns { gap: 6px; }
  #pcV2WaveFabRow .qn-set-inline-item .qn-stepper.is-tap .qn-stepper-btn { width: auto; min-width: 54px; padding: 0 6px; }
  #pcV2WaveFabRow .pcv2-fab-ab.has-point { color: var(--accent-primary); border-color: var(--accent-primary); }
  #pcV2WaveFabRow .pcv2-fab-ab:hover { background: none; }

  /* More: 設定帯の下にミキサー(Volume=全幅、Speed/Key=2列)。PC下部バーのミキサーと同じ部品・同じ操作 */
  #pcV2MorePanel .qn-wave-bar-strip { margin-bottom: 8px; }
  #pcV2MorePanel #pcV2BarMixer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 10px 16px 12px; background: var(--bg-0e0e13); border: 1px solid var(--border-subtle); border-radius: var(--radius-popup); }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-item[data-mix="vol"] { grid-column: 1 / -1; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-label { font-size: 12px; color: var(--icon-muted); user-select: none; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-val { font-size: 13px; color: var(--text-bright, var(--fg-ffffff)); font-variant-numeric: tabular-nums; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range { width: 100%; height: 32px; margin: 0; accent-color: var(--accent-primary, #3b82f6); }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-volrow { display: flex; align-items: center; gap: 8px; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-mute { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: none; color: var(--icon-muted); }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-mute svg { width: 22px; height: 22px; fill: currentColor; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-mute .pcv2-mix-ico-off, #pcV2MorePanel #pcV2BarMixer .pcv2-mix-mute.is-muted .pcv2-mix-ico-on { display: none; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-mute.is-muted .pcv2-mix-ico-off { display: block; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-mute.is-muted { color: var(--accent-primary, #3b82f6); }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-keyval { min-width: 32px; text-align: center; font-size: 15px; }
}

/* Library: Audio/Folderはパネルタイトルの右(ヘッダー内)に横並びで小さく(PC/SP共通。v4.11.1) */
#pcV2PanelHeader .pcv2-fab-addgroup { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-left: auto; }
#pcV2PanelHeader .pcv2-fab-addgroup .panel-fab-btn { height: 32px; padding: 0 12px; gap: 5px; font-size: 12px; box-shadow: none; }
#pcV2PanelHeader .pcv2-fab-addgroup .panel-fab-btn svg { width: 15px; height: 15px; }

/* Moreミキサーの見た目調整(白枠線を消しBar lengthと同じスライダー外観に / Speedを長くKeyを狭く) + ヘッドのリピートバッジ */
@media (max-width: 900px) {
  #pcV2MorePanel #pcV2BarMixer { grid-template-columns: 1fr auto; gap: 8px 16px; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range {
    -webkit-appearance: none; appearance: none; height: 18px; background: transparent; outline: none; border: none; box-shadow: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range:focus, #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range:focus-visible { outline: none; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent-primary) var(--p, 0%), var(--bg-2a2a34) var(--p, 0%)); border: none; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bg-2a2a34); border: none; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent-primary); }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--text-bright, var(--bg-ffffff)); border: none; box-shadow: none; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text-bright, var(--bg-ffffff)); border: none; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-item[data-mix="key"] { width: 112px; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-keyval { min-width: 28px; font-size: 14px; }
  .pcv2-head-btn { position: relative; }
  .pcv2-head-btn .repeat-one-badge { top: 4px; right: 4px; left: auto; transform: none; width: 13px; height: 13px; font-size: 9px; }
  .pcv2-head-btn .repeat-folder-badge { font-size: 8px; }
  #pcV2WaveHead #appTitle { cursor: pointer; }
  /* 曲があるとき: ヘッダーはLibraryと同じ行(サムネ・曲名・アーティスト) | 時刻(2段) | ボタン群の1行。SKIP/PIN/EDITはPC幅だけ */
  #pcV2WaveHead.has-track { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto; }
  #pcV2WaveHead.has-track #pcV2HeadRow { grid-column: 1; grid-row: 1; }
  #pcV2WaveHead.has-track .time-controls-row { grid-column: 2; grid-row: 1; }
  #pcV2WaveHead.has-track #pcV2WaveHeadBtns { grid-column: 3; grid-row: 1; }
  #pcV2WaveHead.has-track #timeDisplay { flex-direction: column; align-items: flex-end; gap: 0; }
  #pcV2WaveHead.has-track #timeDisplay .time-sep { display: none; }
  #pcV2WaveHead #pcV2HeadRow .playlist-favorite-btn, #pcV2WaveHead #pcV2HeadRow .playlist-act-cell, #pcV2WaveHead #pcV2HeadRow .playlist-head-edit { display: none; }
}

/* ミキサーのスライダーをBar length等(.qn-set-range)と同じ外観に統一(PC/SP共通) */
#pcV2BarMixer .pcv2-mix-range {
  -webkit-appearance: none; appearance: none; height: 18px; background: transparent; outline: none; border: none; box-shadow: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
#pcV2BarMixer .pcv2-mix-range:focus, #pcV2BarMixer .pcv2-mix-range:focus-visible { outline: none; }
#pcV2BarMixer .pcv2-mix-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent-primary) var(--p, 0%), var(--bg-2a2a34) var(--p, 0%)); border: none; }
#pcV2BarMixer .pcv2-mix-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bg-2a2a34); border: none; }
#pcV2BarMixer .pcv2-mix-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent-primary); }
#pcV2BarMixer .pcv2-mix-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--text-bright, var(--bg-ffffff)); border: none; box-shadow: none; }
#pcV2BarMixer .pcv2-mix-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text-bright, var(--bg-ffffff)); border: none; }

/* ミキサーの見出し「ラベル 値」をBar length/Rows(.qn-set-inline)と同じ表示に統一(左寄せで密着・同サイズ・値は太字白。Keyの値も見出し側へ) */
#pcV2Layout #pcV2BarMixer .pcv2-mix-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; }
#pcV2Layout #pcV2BarMixer .pcv2-mix-label { font-size: var(--fs-small); color: var(--icon-muted); white-space: nowrap; }
#pcV2Layout #pcV2BarMixer .pcv2-mix-val, #pcV2Layout #pcV2BarMixer .pcv2-mix-keyval { font-size: var(--fs-small); font-weight: 700; color: var(--text-bright); min-width: 0; text-align: left; font-variant-numeric: tabular-nums; }

/* Keyもスライダー(Volume/Speedと同一外観)。SPはSpeedと半分ずつ */
#pcV2BarMixer .pcv2-mix-key .pcv2-mix-range { width: 100%; }
@media (max-width: 900px) {
  #pcV2MorePanel #pcV2BarMixer { grid-template-columns: 1fr 1fr; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-item[data-mix="key"] { width: auto; }
}

/* SPのMoreでSpeed/Keyにもリセットボタン(Volumeのミュートボタンと同じ位置・サイズ)。PC下部バーでは非表示 */
.pcv2-mix-reset { display: none; }
@media (max-width: 900px) {
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-reset { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: none; color: var(--icon-muted); -webkit-tap-highlight-color: transparent; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-reset svg { width: 22px; height: 22px; fill: currentColor; }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-reset:active { background: rgba(var(--ov), 0.08); color: var(--accent-primary, #3b82f6); }
  #pcV2MorePanel #pcV2BarMixer .pcv2-mix-volrow { gap: 4px; }
  #pcV2MorePanel #pcV2BarMixer { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
}

/* 線の表示ボタン(#pcV2FabSnap): タップで小節+拍→小節→off。小節だけの時は小さく表示 */
#pcV2FabSnap { position: relative; }
#pcV2FabSnap[data-state="Bars"]::after { position: absolute; right: 2px; bottom: 1px; font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 0.2px; }
#pcV2FabSnap[data-state="Bars"]::after { content: "Bar"; }