:root { --bg: #0d0d0d; --strip: #1e1e1e; --accent: #ff8c00; --on: #00ff66; }
* { box-sizing: border-box; } /* 全要素のサイズ計算を固定 */

body { background: var(--bg); color: #fff; font-family: sans-serif; margin: 0; height: 100vh; overflow: hidden; }

.master-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; background: #222; border-bottom: 2px solid var(--accent); height: 50px; }
.master-controls { display: flex; gap: 4px; }
.master-controls button { padding: 6px 10px; font-weight: bold; border: none; border-radius: 4px; font-size: 11px; cursor: pointer; }

.mixer-grid { display: flex; gap: 8px; padding: 10px; height: calc(100vh - 50px); overflow-x: auto; align-items: flex-start; }

.channel-strip { 
    background: var(--strip); width: 145px; min-width: 145px; 
    height: 98%; max-height: 520px;
    padding: 8px; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; border: 1px solid #333;
}

/* ファイル選択行の改善 */
.file-ctrl-row { display: flex; align-items: center; gap: 5px; background: #000; padding: 2px 5px; border-radius: 4px; overflow: hidden; }
.custom-loader { background: #444; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 12px; cursor: pointer; flex-shrink: 0; }
.custom-loader input { display: none; }
.file-name { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #aaa; }

.param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.param-box { background: #000; padding: 3px; border-radius: 4px; }
.param-box label { display: block; font-size: 8px; color: #888; text-align: center; }
.param-box input { background: transparent; color: #fff; border: none; width: 100%; text-align: center; font-size: 11px; }

.fx-section { background: #2a2a2a; padding: 5px; border-radius: 4px; }
.fx-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.fx-row span { font-size: 9px; color: #888; width: 12px; }
.fx-row input { width: 45px; background: #000; color: #fff; border: none; text-align: center; font-size: 10px; padding: 2px 0; }
.d-label { color: #f44 !important; font-weight: bold; }

.pan-section { background: #111; padding: 4px; border-radius: 4px; width: 100%; }
.pan-row { display: flex; align-items: center; gap: 4px; width: 100%; }
.pan-slider { flex-grow: 1; min-width: 0; } /* 押し出し防止 */
.pan-center-btn { background: #444; color: #fff; border: none; padding: 2px 6px; border-radius: 2px; font-size: 10px; flex-shrink: 0; }

/* フェーダーエリアの修正 */
.fader-container { 
    flex-grow: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 80px; 
    position: relative; /* メモリの基準点 */
    background-color: #0a0a0a;
    border-radius: 4px;
    margin: 0 5px;
    
    /* 背景にメモリを描画（リニアグラデーションで線を引く） */
    background-image: linear-gradient(to bottom, 
        transparent 19%, #666 19%, #666 20%, transparent 20%, /* +3dB */
        transparent 29%, #888 29%, #888 30%, transparent 30%, /* 0dB (中央付近) */
        transparent 39%, #666 39%, #666 40%, transparent 40%, 
        transparent 49%, #666 49%, #666 50%, transparent 50%,
        transparent 59%, #666 59%, #666 60%, transparent 60%,
        transparent 69%, #666 69%, #666 70%, transparent 70%,
        transparent 79%, #666 79%, #666 80%, transparent 80%
    );
    background-size: 15px 100%; /* メモリの横幅 */
    background-repeat: no-repeat;
    background-position: left 25px center; /* 左側に配置 */
}

/* ついでに右側にもメモリを付けるならこちら */
.fader-container::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    width: 50px;
    background: inherit; /* 左側と同じメモリを継承 */
}

.v-fader { 
    appearance: slider-vertical; 
    width: 20px; 
    height: 90%; 
    max-height: 180px;
    cursor: pointer;
    z-index: 2; /* メモリより上に表示 */
}

.footer-btn { text-align: center; }
.ch-on-off { width: 44%; padding: 12px 0; border: none; font-weight: bold; border-radius: 10px; cursor: pointer; font-size: 14px; }
.btn-glow { background: var(--accent); color: #000; }
.btn-danger { background: #d32f2f; color: #fff; }
.btn-export { background: #0288d1; color: #fff; }
.active { background: var(--on) !important; color: #000 !important; }

/* ===== フロートボタン共通 ===== */
.fab {
  position: fixed;
  right: 20px;
  padding: 14px 20px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background 0.3s;
  z-index: 9999;
}

.fab:hover {
  background: #1976d2;
}
.fab1 { bottom: 5px; } /* 上のボタン */

/* スマホ対応 */
@media (max-width: 600px) {
  .fab {
    font-size: 12px;
    padding: 6px 16px;
  }
}