/* ── Temp Board (right panel card tray) ── */
  .tboard-section {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .tboard-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .tboard-title {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text3);
    text-transform: uppercase;
    flex: 1;
  }
  .tboard-add-btn {
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    border: 1px solid rgba(108,99,255,.4);
    background: rgba(108,99,255,.1);
    color: var(--accent2);
    transition: background-color .15s;
    letter-spacing: .5px;
  }
  .tboard-add-btn:hover { background: rgba(108,99,255,.2); }
  .tboard-clear-btn {
    padding: 4px 8px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 10px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: none;
    color: var(--text3);
    transition: color .15s, border-color .15s;
  }
  .tboard-clear-btn:hover { color: var(--coral); border-color: rgba(255,107,107,.35); }
  .tboard-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 32px;
  }
  .tboard-empty {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text3);
    cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .tboard-empty:hover { border-color: var(--accent); color: var(--accent2); }
  .tcard {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 10px;
    cursor: grab;
    transition: border-color .12s, box-shadow .12s, opacity .12s;
    position: relative;
    user-select: none;
  }
  .tcard:active { cursor: grabbing; }
  .tcard.dragging { opacity: .45; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
  .tcard.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(108,99,255,.3); }
  .tcard-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
  }
  .tcard-drag-handle {
    color: var(--text3);
    font-size: 11px;
    cursor: grab;
    flex-shrink: 0;
    opacity: .5;
    line-height: 1;
  }
  .tcard:active .tcard-drag-handle { cursor: grabbing; }
  .tcard-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
    border-radius: 3px;
    padding: 1px 3px;
    margin: -1px -3px;
  }
  .tcard-name:focus {
    outline: none;
    background: var(--bg4);
    color: var(--text);
  }
  .tcard-wave {
    font-family: var(--mono);
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--bg4);
    border: 1px solid var(--border);
    color: var(--text3);
    flex-shrink: 0;
  }
  .tcard-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 7px;
  }
  .tcard-tag {
    font-family: var(--mono);
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--text3);
    background: var(--bg4);
  }
  .tcard-actions {
    display: flex;
    gap: 4px;
  }
  .tcard-btn {
    flex: 1;
    padding: 5px 4px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 9px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg4);
    color: var(--text2);
    transition: border-color .12s, color .12s;
    text-align: center;
    letter-spacing: .3px;
  }
  .tcard-btn:hover { border-color: var(--border2); color: var(--text); }
  .tcard-btn.play { background: rgba(108,99,255,.15); border-color: rgba(108,99,255,.4); color: var(--accent2); }
  .tcard-btn.play:hover { background: rgba(108,99,255,.28); }
  .tcard-btn.del { }
  .tcard-btn.del:hover { color: var(--coral); border-color: rgba(255,107,107,.35); }
  .tcard-playing-line {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--accent);
    border-radius: 0 0 9px 9px;
    transition: width .08s;
  }
  .tboard-drop-indicator {
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    margin: 1px 0;
    display: none;
  }
  .tboard-drop-indicator.visible { display: block; }

  /* ── Mobile: bottom sheet layout (max-width: 768px) */
  .mobile-footer,
  .mobile-sheet-backdrop {
    display: none;
  }

  @media (max-width: 768px) {
    body {
      min-height: 100dvh;
      height: 100dvh;
      max-height: 100dvh;
      grid-template-rows: auto minmax(0, 1fr);
      padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .layout {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 1fr);
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }

    .panel-resizer { display: none; }

    /* Center: always visible as main content */
    .center {
      display: flex !important;
      width: 100%;
      min-width: 0;
    }

    /* ── Header compact ── */
    header {
      padding: 8px 10px;
      gap: 8px;
      flex-wrap: wrap;
    }
    header h1 {
      font-size: 12px;
      letter-spacing: 1px;
    }
    /* "Web Audio API" badge は省スペースのため非表示（span限定・buttonは除外） */
    header > span.badge:first-of-type {
      display: none;
    }
    .badge {
      font-size: 9px;
      padding: 2px 6px;
    }
    .header-status { font-size: 11px; }

    /* ── Waveform compact ── */
    .visualizer-wrap { padding: 8px 12px 0; }
    canvas { height: 60px; }
    .visualizer-label { font-size: 9px; margin-bottom: 4px; }

    /* ── Editor area compact ── */
    .editor-area { padding: 8px 12px; }
    .section-title { margin-top: 10px; margin-bottom: 6px; }

    /* ── OSCILLATOR buttons ── */
    .wave-selector { gap: 4px; margin-bottom: 10px; }
    .wave-btn { padding: 7px 2px; font-size: 10px; }

    /* ── Params grid: fix overflow + compact ── */
    .params-grid { gap: 6px; margin-bottom: 8px; }
    .param {
      padding: 8px 10px;
      min-width: 0;   /* prevent grid blowout */
      overflow: hidden;
    }
    .param-label {
      font-size: 9px;
      margin-bottom: 6px;
    }
    .param-val { font-size: 11px; }
    input[type="range"] { height: 4px; }

    /* Sidebar & panel: fixed bottom sheets */
    .sidebar,
    .panel {
      display: flex !important;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 78vh;
      z-index: 55;
      border-radius: 16px 16px 0 0;
      border: 1px solid var(--border2);
      border-bottom: none;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
      transform: translateY(100%);
      transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
      flex-direction: column;
      overflow: hidden;
    }
    .sidebar.sheet-open,
    .panel.sheet-open {
      transform: translateY(0);
    }

    /* Drag pill at top of each sheet */
    .sidebar::before,
    .panel::before {
      content: '';
      display: block;
      width: 36px;
      height: 4px;
      border-radius: 2px;
      background: var(--border2);
      margin: 10px auto 4px;
      flex-shrink: 0;
    }

    .sidebar { border-right: none; }
    .panel   { border-left: none; }

    /* Backdrop */
    .mobile-sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 54;
      transform: translateZ(0); /* 独立した compositing layer に昇格 */
    }
    .mobile-sheet-backdrop.is-visible { display: block; }

    /* ── Mobile footer (play + sheet handles) ── */
    .mobile-footer {
      display: flex;
      flex-direction: column;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      background: var(--bg2);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
    }

    .mobile-play-row {
      display: flex;
      align-items: stretch;
      height: 52px;
    }

    .mobile-play-btn {
      flex: 0 0 42%;
      background: var(--accent);
      color: #fff;
      border: none;
      border-right: 1px solid rgba(255,255,255,0.12);
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 2px;
      cursor: pointer;
      transition: background 0.12s;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-play-btn:active { background: var(--accent2); }

    .mobile-vol-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      background: rgba(108, 99, 255, 0.08);
    }
    .mobile-vol-label {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text3);
      letter-spacing: 1px;
      flex-shrink: 0;
    }
    .mobile-vol-slider {
      flex: 1;
      accent-color: var(--accent);
      height: 4px;
      cursor: pointer;
    }
    .mobile-vol-val {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--accent2);
      flex-shrink: 0;
      min-width: 32px;
      text-align: right;
    }

    .mobile-sheet-handles {
      display: flex;
      height: calc(44px + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-sheet-trigger {
      flex: 1;
      background: var(--bg3);
      border: none;
      border-top: 1px solid var(--border);
      color: var(--text2);
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-sheet-trigger:first-child {
      border-right: 1px solid var(--border);
    }
    .mobile-sheet-trigger.is-active {
      background: rgba(108, 99, 255, 0.15);
      color: var(--accent2);
    }

    .toast {
      bottom: calc(104px + env(safe-area-inset-bottom, 0px));
      white-space: normal;
      max-width: calc(100vw - 24px);
      text-align: center;
    }

    /* ── Sidebar (プリセット): 内側リストのみスクロール ── */
    .sidebar-header,
    .cat-tabs {
      flex-shrink: 0;
    }
    .preset-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* フッター(~96px)に隠れないよう末尾に余白 */
      padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Panel (出力・設定): シート全体をスクロール可能に ── */
    .panel {
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      /* フッターに隠れないよう末尾に余白 */
      padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    /* PLAYBACK セクション(再生・音量)はモバイルフッターと重複するため非表示 */
    .panel > div:first-child {
      display: none;
    }
  }