/* 基本設定と変数定義 */
    :root {
      --font-primary: 'Inter', 'Noto Sans JP', sans-serif;
      --base-font-size: 16px;
      /* Light Mode Colors */
      --bg-color-light: #f8f9fa;
      --text-color-light: #212529;
      --card-bg-light: #ffffff;
      --border-color-light: #dee2e6;
      --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08);
      --primary-color-light: #007bff;
      --primary-hover-light: #0056b3;
      --secondary-color-light: #6c757d;
      --secondary-hover-light: #5a6268;
      --danger-color-light: #dc3545;
      --danger-hover-light: #c82333;
      --success-color-light: #28a745;
      --info-color-light: #17a2b8;
      --info-hover-light: #117a8b;
      --control-bg-light: rgba(0, 0, 0, 0.03);
      --control-hover-bg-light: rgba(0, 0, 0, 0.08);
      --progress-bg-light: #e9ecef;
      --progress-value-light: var(--primary-color-light);
      --meter-bg-light: #e0e0e0;
      --meter-bar-light: #69b2f8;
      /* 少し薄い青 */
      --waveform-bg-light: #f0f0f0;
      /* 波形背景 */
      --waveform-playhead-light: var(--danger-color-light);
      /* 再生ヘッド */
      /* Dark Mode Colors */
      --bg-color-dark: #121212;
      --text-color-dark: #e0e0e0;
      --card-bg-dark: #1e1e1e;
      --border-color-dark: #333;
      --shadow-dark: 0 5px 20px rgba(0, 0, 0, 0.3);
      --primary-color-dark: #4dabf7;
      --primary-hover-dark: #1e87f0;
      --secondary-color-dark: #adb5bd;
      --secondary-hover-dark: #ced4da;
      --danger-color-dark: #e94560;
      --danger-hover-dark: #d8314f;
      --success-color-dark: #34c759;
      --info-color-dark: #20c997;
      --info-hover-dark: #1ba97c;
      --control-bg-dark: rgba(255, 255, 255, 0.08);
      --control-hover-bg-dark: rgba(255, 255, 255, 0.15);
      --progress-bg-dark: #333;
      --progress-value-dark: var(--primary-color-dark);
      --meter-bg-dark: #2a2a2a;
      --meter-bar-dark: #4dabf7;
      --waveform-bg-dark: #252525;
      /* 波形背景 */
      --waveform-playhead-dark: var(--danger-color-dark);
      /* 再生ヘッド */
      /* Default to Light Mode Variables */
      --bg-color: var(--bg-color-light);
      --text-color: var(--text-color-light);
      --card-bg: var(--card-bg-light);
      --border-color: var(--border-color-light);
      --shadow: var(--shadow-light);
      --primary-color: var(--primary-color-light);
      --primary-hover: var(--primary-hover-light);
      --secondary-color: var(--secondary-color-light);
      --secondary-hover: var(--secondary-hover-light);
      --danger-color: var(--danger-color-light);
      --danger-hover: var(--danger-hover-light);
      --success-color: var(--success-color-light);
      --info-color: var(--info-color-light);
      --info-hover: var(--info-hover-light);
      --control-bg: var(--control-bg-light);
      --control-hover-bg: var(--control-hover-bg-light);
      --progress-bg: var(--progress-bg-light);
      --progress-value: var(--progress-value-light);
      --meter-bg: var(--meter-bg-light);
      --meter-bar: var(--meter-bar-light);
      --waveform-bg: var(--waveform-bg-light);
      --waveform-playhead: var(--waveform-playhead-light);
      /* Sizes */
      --button-min-size: 160px;
      --button-gap: 25px;
      --icon-size: 2.5em;
      --control-font-size: 1.1em;
      --slider-thumb-size: 12px;
      --progress-bar-height: 8px;
      --delete-button-size: 24px;
      --delete-button-font-size: 12px;
      --loop-indicator-font-size: 0.65em;
      --border-radius: 8px;
      --transition-speed: 0.2s;
      --meter-area-height: 100px;
      /* メーターエリアの高さ */
      --meter-bar-width: 8px;
      /* メーターバーの幅 */
      --meter-gap: 4px;
      /* メーター間のギャップ */
      --waveform-area-height: 120px;
      /* 波形表示エリアの高さ */
      --waveform-playhead-width: 2px;
      /* 再生ヘッド線の太さ */
    }

    body.dark-mode {
      --bg-color: var(--bg-color-dark);
      --text-color: var(--text-color-dark);
      --card-bg: var(--card-bg-dark);
      --border-color: var(--border-color-dark);
      --shadow: var(--shadow-dark);
      --primary-color: var(--primary-color-dark);
      --primary-hover: var(--primary-hover-dark);
      --secondary-color: var(--secondary-color-dark);
      --secondary-hover: var(--secondary-hover-dark);
      --danger-color: var(--danger-color-dark);
      --danger-hover: var(--danger-hover-dark);
      --success-color: var(--success-color-dark);
      --info-color: var(--info-color-dark);
      --info-hover: var(--info-hover-dark);
      --control-bg: var(--control-bg-dark);
      --control-hover-bg: var(--control-hover-bg-dark);
      --progress-bg: var(--progress-bg-dark);
      --progress-value: var(--progress-value-dark);
      --meter-bg: var(--meter-bg-dark);
      --meter-bar: var(--meter-bar-dark);
      --waveform-bg: var(--waveform-bg-dark);
      --waveform-playhead: var(--waveform-playhead-dark);
    }

    /* Global Styles */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      height: 100%;
    }

    body {
      font-family: var(--font-primary);
      font-size: var(--base-font-size);
      margin: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color var(--transition-speed), color var(--transition-speed);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      /* Full viewport height */
    }

    /* Header Layout */
    header {
      background-color: var(--card-bg);
      padding: 12px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--shadow);
      border-bottom: 1px solid var(--border-color);
      transition: background-color var(--transition-speed), border-color var(--transition-speed);
      position: sticky;
      top: 0;
      z-index: 1000;
      flex-shrink: 0;
      /* ヘッダーが縮まないように */
    }

    header h1 {
      margin: 0;
      font-size: 1.5em;
      font-weight: 600;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-grow: 1;
      min-width: 0;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .master-volume-control {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--secondary-color);
    }

    .master-volume-control i {
      font-size: 1.1em;
    }

    .master-volume-control input[type="range"] {
      width: 90px;
      cursor: pointer;
      accent-color: var(--primary-color);
    }

    button#add-sound-btn {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 0.9em;
      font-weight: 500;
      transition: background-color var(--transition-speed), transform 0.1s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    button#add-sound-btn:disabled {
      background-color: var(--secondary-color);
      cursor: not-allowed;
      opacity: 0.7;
    }

    button#add-sound-btn:hover:not(:disabled) {
      background-color: var(--primary-hover);
    }

    button#add-sound-btn:active:not(:disabled) {
      transform: scale(0.98);
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 28px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 28px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }

    input:checked+.slider {
      background-color: var(--primary-color);
    }

    input:checked+.slider:before {
      transform: translateX(22px);
    }

    .mode-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: white;
      /* アイコンの色 */
      font-size: 12px;
      pointer-events: none;
      /* クリックイベントを透過 */
      transition: opacity 0.4s;
      /* Opacityのトランジション */
    }

    .mode-icon:has(.fa-sun) {
      right: 4px;
      transition: opacity 0.4s;
      color: black;
    }

    .mode-icon:has(.fa-moon) {
      left: 4px;
      transition: opacity 0.4s;
      color: white;
    }

    .mode-icon .fa-sun {
      right: 6px;
      transition: opacity 0.4s;
    }

    .mode-icon .fa-moon {
      left: 6px;
      transition: opacity 0.4s;
    }

    input:not(:checked)~.mode-icon .fa-sun {
      opacity: 1;
      /* 右側の太陽を表示 */
    }

    input:not(:checked)~.mode-icon .fa-moon {
      opacity: 0;
      /* 左側の月を非表示 */
    }

    input:checked~.mode-icon .fa-sun {
      opacity: 0;
      /* 右側の太陽を非表示 */
    }

    input:checked~.mode-icon .fa-moon {
      opacity: 1;
      /* 左側の月を表示 */
    }


    #scene-settings-btn {
      background: none;
      border: 1px solid var(--border-color);
      color: var(--secondary-color);
      font-size: 1.1em;
      padding: 6px;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: color var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-left: 5px;
    }

    #scene-settings-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    #scene-settings-btn:hover:not(:disabled) {
      background-color: var(--control-hover-bg);
      color: var(--primary-color);
      border-color: var(--primary-color);
    }

    /* Scene Settings Modal */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 2000;
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal-content {
      background-color: var(--card-bg);
      padding: 25px 30px;
      border-radius: var(--border-radius);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      max-width: 90%;
      width: 500px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      position: relative;
      border: 1px solid var(--border-color);
    }

    .modal-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      font-size: 1.5em;
      color: var(--secondary-color);
      cursor: pointer;
      line-height: 1;
      padding: 0;
      border-radius: 50%;
      transition: color var(--transition-speed), background-color var(--transition-speed);
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .modal-close-btn:hover {
      color: var(--danger-color);
      background-color: var(--control-hover-bg);
    }

    .modal-title {
      margin: 0 0 20px 0;
      font-size: 1.4em;
      font-weight: 600;
      color: var(--primary-color);
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 10px;
    }

    .modal-body {
      overflow-y: auto;
      margin-bottom: 20px;
      flex-grow: 1;
    }

    .modal-scene-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .modal-scene-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-color);
      cursor: pointer;
      border-radius: var(--border-radius);
      transition: background-color var(--transition-speed);
    }

    .modal-scene-list li:last-child {
      border-bottom: none;
    }

    .modal-scene-list li:hover {
      background-color: var(--control-hover-bg);
    }

    .modal-scene-list li.active {
      background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
      font-weight: 500;
    }

    .modal-scene-name {
      flex-grow: 1;
      margin-right: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .modal-scene-actions {
      display: flex;
      gap: 5px;
      flex-shrink: 0;
    }

    .modal-scene-actions button {
      background: none;
      border: none;
      color: var(--secondary-color);
      font-size: 1em;
      padding: 5px;
      border-radius: 50%;
      cursor: pointer;
      transition: color var(--transition-speed);
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .modal-scene-actions button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .modal-scene-actions button:hover:not(:disabled) {
      color: var(--primary-color);
    }

    .modal-scene-actions button.danger:hover:not(:disabled) {
      color: var(--danger-color);
    }

    .modal-footer {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 15px;
      border-top: 1px solid var(--border-color);
      padding-top: 15px;
      margin-top: auto;
      align-items: center;
    }

    .settings-toggles {
      display: flex;
      flex-direction: column;
      /* 縦に並べる */
      gap: 10px;
      /* トグル間のスペース */
      flex-basis: 100%;
      /* モバイルで全幅を使うように */
      order: 1;
      /* モバイルでの表示順序 */
    }

    .popup-setting,
    .sortable-setting {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9em;
      color: var(--secondary-color);
      white-space: nowrap;
    }

    .popup-setting input[type="checkbox"],
    .sortable-setting input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--primary-color);
      flex-shrink: 0;
    }

    .popup-setting label,
    .sortable-setting label {
      cursor: pointer;
      /* ラベルクリックでも反応するように */
      user-select: none;
      /* テキスト選択を防ぐ */
      -webkit-user-select: none;
    }

    .modal-footer .io-controls {
      display: flex;
      gap: 10px;
      order: 2;
    }

    .modal-footer .io-controls button {
      width: auto;
      height: auto;
      padding: 8px 15px;
      border-radius: var(--border-radius);
      background-color: white;
      border: 1px solid var(--info-color);
      color: var(--info-color);
      font-size: 0.9em;
      cursor: pointer;
    }

    .modal-footer .io-controls button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background-color: transparent;
      color: var(--secondary-color);
      border-color: var(--secondary-color);
    }

    .modal-footer .io-controls button:hover:not(:disabled) {
      background-color: var(--info-color);
      color: white;
    }

    .modal-footer .add-scene-btn-wrapper {
      flex-grow: 1;
      min-width: 180px;
      order: 3;
    }

    .modal-footer .add-scene-btn-wrapper button {
      width: 100%;
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 1em;
      font-weight: 500;
      transition: background-color var(--transition-speed);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .modal-footer .add-scene-btn-wrapper button:disabled {
      background-color: var(--secondary-color);
      cursor: not-allowed;
      opacity: 0.7;
    }

    .modal-footer .add-scene-btn-wrapper button:hover:not(:disabled) {
      background-color: var(--primary-hover);
    }

    /* Soundboard Grid & Button Styles */
    main {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--button-min-size), 1fr));
      gap: var(--button-gap);
      padding: 30px;
      max-width: 1400px;
      margin: 30px auto 0;
      /* 下マージンを0に */
      flex-grow: 1;
      /* main が利用可能なスペースを埋めるように */
      width: 100%;
    }

    .fallback-message {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--danger-color);
      font-size: 1.1em;
      padding: 40px 20px;
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
    }

    .empty-state-message {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--secondary-color);
      font-size: 1em;
      padding: 40px 20px;
      border-radius: var(--border-radius);
      margin-top: 0;
    }


    .sound-button {
      position: relative;
      background-color: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      cursor: default;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      overflow: hidden;
      transition: transform 0.2s ease-out, box-shadow var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed);
      aspect-ratio: 1 / 1;
      min-height: var(--button-min-size);
    }

    .sound-button:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    body.dark-mode .sound-button:hover {
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }

    .sound-button.playing {
      border-color: var(--primary-color);
      background-color: color-mix(in srgb, var(--card-bg) 90%, var(--primary-color) 10%);
    }

    body.dark-mode .sound-button.playing {
      background-color: color-mix(in srgb, var(--card-bg) 85%, var(--primary-color) 15%);
    }

    .loop-indicator {
      position: absolute;
      top: 8px;
      left: 8px;
      background-color: var(--success-color);
      color: white;
      font-size: var(--loop-indicator-font-size);
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 4px;
      line-height: 1;
      z-index: 5;
      display: none;
      pointer-events: none;
    }

    .sound-button.loop-on .loop-indicator {
      display: inline-block;
    }

    .button-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      flex-grow: 1;
      width: 100%;
      padding-bottom: 45px;
      /* Make space for absolute controls */
      cursor: pointer;
    }

    .sound-icon {
      font-size: var(--icon-size);
      color: var(--primary-color);
      margin-bottom: 10px;
      transition: color var(--transition-speed);
    }

    .sound-button.playing .sound-icon {
      color: var(--primary-hover);
    }

    /* ドラッグ中の要素のスタイル */
    .sound-button.dragging {
      opacity: 0.4;
      cursor: grabbing;
    }

    /* ドロップ先の候補要素のスタイル */
    .sound-button.drag-over {
      border: 2px solid var(--primary-color);
      box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 50%, transparent);
      transform: scale(1.02);
      transition: transform 0.1s ease-out, box-shadow 0.1s ease-out, border-color 0.1s ease-out;
    }

    /* --- START: Ghost Element Style --- */
    .ghost-element {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.75;
      transform-origin: center center;
      transition: transform 0.05s linear;
      background-color: var(--card-bg);
      border: 1px solid var(--primary-color);
      border-radius: var(--border-radius);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      padding: 10px;
      box-sizing: border-box;
    }

    /* --- END: Ghost Element Style --- */

    /* --- 並び替えが無効な時のパッドのスタイル --- */
    .sound-button:not([draggable="true"]) {
      cursor: default !important;
      background-color: var(--card-bg);
    }

    .sound-button:not([draggable="true"]):hover {
      transform: none;
      box-shadow: var(--shadow);
    }

    .sound-name {
      font-size: 0.9em;
      font-weight: 500;
      color: var(--text-color);
      max-height: 2.8em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
      width: 100%;
      margin-bottom: 5px;
    }

    .time-display {
      font-size: 0.8em;
      color: var(--secondary-color);
      font-family: monospace;
      min-height: 1.2em;
      /* Prevent layout shift */
    }

    .progress-bar {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      height: var(--progress-bar-height);
      background-color: var(--progress-bg);
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
      overflow: hidden;
      cursor: pointer;
    }

    .progress-bar-value {
      height: 100%;
      width: 0%;
      background-color: var(--progress-value);
      transition: width 0.1s linear, background-color var(--transition-speed);
      border-bottom-left-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
      pointer-events: none;
    }

    .sound-button.playing .progress-bar-value {
      background-color: var(--primary-hover);
    }

    .button-controls {
      position: absolute;
      bottom: 5px;
      left: 10px;
      right: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: calc(100% - 20px);
      margin-top: 0;
      padding: 5px 0;
      opacity: 1;
      /* Always visible */
      transition: opacity var(--transition-speed);
    }

    .loop-button {
      background: none;
      border: none;
      color: var(--secondary-color);
      font-size: var(--control-font-size);
      cursor: pointer;
      padding: 5px 8px;
      border-radius: 6px;
      transition: color var(--transition-speed), background-color var(--transition-speed);
      min-width: 40px;
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .loop-button:hover {
      background-color: var(--control-hover-bg);
    }

    .loop-button.active {
      color: var(--success-color);
      background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    }

    .volume-control {
      display: flex;
      align-items: center;
      flex-grow: 1;
      margin-left: 10px;
    }

    .volume-control input[type="range"] {
      width: 100%;
      height: 6px;
      cursor: pointer;
      accent-color: var(--secondary-color);
      background: var(--control-bg);
      border-radius: 3px;
      -webkit-appearance: none;
      appearance: none;
    }

    .volume-control input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--slider-thumb-size);
      height: var(--slider-thumb-size);
      background: var(--secondary-color);
      border-radius: 50%;
      cursor: pointer;
    }

    .volume-control input[type="range"]::-moz-range-thumb {
      width: var(--slider-thumb-size);
      height: var(--slider-thumb-size);
      background: var(--secondary-color);
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    .sound-button:hover .volume-control input[type="range"] {
      accent-color: var(--primary-color);
    }

    .sound-button:hover .volume-control input[type="range"]::-webkit-slider-thumb {
      background: var(--primary-color);
    }

    .sound-button:hover .volume-control input[type="range"]::-moz-range-thumb {
      background: var(--primary-color);
    }

    .delete-button {
      position: absolute;
      top: 8px;
      right: 8px;
      background-color: var(--danger-color);
      color: white;
      border: none;
      border-radius: 50%;
      width: var(--delete-button-size);
      height: var(--delete-button-size);
      font-size: var(--delete-button-font-size);
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity var(--transition-speed), background-color var(--transition-speed), transform 0.1s;
      z-index: 10;
      transform: scale(0.8);
    }

    .sound-button:hover .delete-button {
      opacity: 1;
      transform: scale(1);
    }

    .delete-button:hover {
      background-color: var(--danger-hover);
      transform: scale(1.1);
    }

    .delete-button:active {
      transform: scale(0.95);
    }

    .settings-button {
      background: none;
      border: none;
      color: var(--secondary-color);
      font-size: 0.8em; /* Adjust font size for text */
      cursor: pointer;
      padding: 5px 8px;
      border-radius: 6px;
      transition: color var(--transition-speed), background-color var(--transition-speed);
      min-width: 40px;
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute; /* Keep absolute for now, but adjust positioning */
      top: 25px; /* Align with delete button */
      left: 8px; /* Align with loop indicator */
      font-weight: bold; /* Make text more prominent */
      text-transform: uppercase; /* Optional: uppercase for consistency */
      line-height: 1; /* Ensure single line */
      overflow: hidden; /* Hide overflow text */
      white-space: nowrap; /* Prevent wrapping */
      text-overflow: ellipsis; /* Add ellipsis for long text */
    }

    .settings-button:hover {
      background-color: var(--control-hover-bg);
      color: var(--primary-color);
    }

    .settings-button i {
        font-size: 1.1em; /* Adjust icon size */
    }

    /* --- START: Level Meter Styles --- */
    #level-meter-area {
      position: sticky;
      /* メーターは引き続きスティッキー */
      bottom: var(--waveform-area-height);
      /* 波形エリアの高さ分上にずらす */
      left: 0;
      width: 100%;
      height: var(--meter-area-height);
      background-color: var(--card-bg);
      border-top: 1px solid var(--border-color);
      box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
      padding: 10px 20px;
      display: flex;
      gap: 15px;
      overflow-x: auto;
      overflow-y: hidden;
      z-index: 900;
      /* ヘッダーより下、モーダルより下、波形より上 */
      transition: background-color var(--transition-speed), border-color var(--transition-speed), bottom var(--transition-speed);
      flex-shrink: 0;
      /* メーターエリアが縮まないように */
      align-items: flex-end;
      /* メーターを下揃えに */
    }

    body.dark-mode #level-meter-area {
      box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
    }

    .meter-pair {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 60px;
      /* 各メーターの最小幅 */
      height: 100%;
      padding-top: 5px;
      /* 上部に少し余白 */
    }

    .meter-bars-container {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      /* バーを下から伸ばす */
      gap: var(--meter-gap);
      height: calc(100% - 1.5em - 5px);
      /* ラベルの高さを引く */
      width: 100%;
      margin-bottom: 5px;
      /* ラベルとの間隔 */
    }

    .meter-bar {
      width: var(--meter-bar-width);
      height: 100%;
      background-color: var(--meter-bg);
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }

    .meter-value {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0%;
      /* JSで更新 */
      background-color: var(--meter-bar);
      transition: height 0.05s linear;
      /* 滑らかな変化 */
      border-radius: 2px;
    }

    .meter-label {
      font-size: 0.7em;
      color: var(--secondary-color);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      line-height: 1.5;
    }

    /* --- END: Level Meter Styles --- */

    /* --- START: Waveform Display Styles --- */
    #waveform-display-area {
      position: sticky;
      bottom: 0;
      left: 0;
      width: 100%;
      height: var(--waveform-area-height);
      background-color: var(--waveform-bg);
      border-top: 1px solid var(--border-color);
      box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
      /* 少し濃い影 */
      display: flex;
      /* Canvas を中央揃えにするため */
      justify-content: center;
      align-items: center;
      overflow: hidden;
      /* Canvasがはみ出ないように */
      z-index: 890;
      /* メーターより下 */
      transition: background-color var(--transition-speed), border-color var(--transition-speed), height var(--transition-speed);
      flex-shrink: 0;
      padding: 5px 0;
      /* 上下に少しパディング */
    }

    body.dark-mode #waveform-display-area {
      box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.35);
    }

    #waveform-canvas {
      display: block;
      /* デフォルトのインライン下の余白を消す */
      width: 100%;
      /* 親要素に合わせる */
      height: 100%;
      /* 親要素に合わせる */
      cursor: default;
    }

    /* 波形エリアがない（非表示の）場合のメーター位置 */
    #level-meter-area.no-waveform {
      bottom: 0;
    }

    /* --- END: Waveform Display Styles --- */

    /* --- Responsive Adjustments --- */
    @media (min-width: 769px) {

      /* PC/Tabletでは横並び */
      .settings-toggles {
        flex-direction: row;
        flex-basis: auto;
        /* 幅を自動に */
        order: 0;
        /* 表示順序を戻す */
        gap: 20px;
      }

      .modal-footer .io-controls {
        order: 0;
      }

      .modal-footer .add-scene-btn-wrapper {
        order: 0;
      }
    }

    @media (min-width: 769px) and (max-width: 1024px) {

      /* Tablet */
      :root {
        --button-min-size: 160px;
        --button-gap: 20px;
        --icon-size: 2.2em;
        --control-font-size: 1.2em;
        --slider-thumb-size: 14px;
        --progress-bar-height: 7px;
        --delete-button-size: 26px;
        --delete-button-font-size: 13px;
        --loop-indicator-font-size: 0.7em;
        --meter-area-height: 90px;
        --meter-bar-width: 7px;
        --waveform-area-height: 110px;
        /* Tablet waveform height */
      }

      header {
        padding: 12px 20px;
      }

      .controls {
        gap: 10px;
      }

      .master-volume-control input[type="range"] {
        width: 80px;
      }

      button#add-sound-btn {
        padding: 8px 15px;
        font-size: 0.9em;
      }

      #scene-settings-btn {
        width: 32px;
        height: 32px;
        font-size: 1em;
      }

      main {
        padding: 20px;
      }

      #level-meter-area {
        padding: 8px 15px;
      }

      .master-volume-control {
        display: flex;
      }
    }

    @media (max-width: 768px) {

      /* Mobile */
      :root {
        --button-min-size: 160px;
        --button-gap: 15px;
        --icon-size: 1.8em;
        --control-font-size: 1.1em;
        --slider-thumb-size: 14px;
        --progress-bar-height: 6px;
        --delete-button-size: 22px;
        --delete-button-font-size: 11px;
        --loop-indicator-font-size: 0.6em;
        --meter-area-height: 80px;
        --meter-bar-width: 6px;
        --meter-gap: 3px;
        --waveform-area-height: 100px;
        /* モバイルでは少し小さく */
      }

      header {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        position: static;
        /* モバイルでは固定しない */
      }

      header h1 {
        font-size: 1.3em;
        margin-bottom: 10px;
        text-align: center;
      }

      .controls {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
      }

      

      button#add-sound-btn {
        padding: 10px;
      }

      #scene-settings-btn {
        order: 2;
        width: 38px;
        height: 38px;
        font-size: 1.2em;
      }

      .switch {
        order: 3;
      }

      main {
        padding: 15px;
        margin-top: 15px;
      }

      .sound-name {
        font-size: 0.85em;
      }

      .button-controls {
        gap: 5px;
        opacity: 0.8;
      }

      .volume-control {
        margin-left: 0;
        width: 100%;
      }

      #level-meter-area,
      #waveform-display-area {
        position: static;
        /* モバイルでは固定しない */
        border-top: 1px solid var(--border-color);
        box-shadow: none;
        margin-top: 15px;
        /* main との間隔 */
      }

      #level-meter-area {
        height: var(--meter-area-height);
        padding: 5px 10px;
        gap: 10px;
        bottom: auto;
        /* bottom指定を解除 */
        order: 1;
        /* メーターを先に */
      }

      #waveform-display-area {
        height: var(--waveform-area-height);
        order: 2;
        /* 波形を後に */
        padding: 5px 0;
      }

      #level-meter-area.no-waveform {
        /* モバイルでは no-waveform 関係なし */
        bottom: auto;
      }

      .meter-pair {
        min-width: 50px;
      }

      .meter-label {
        font-size: 0.65em;
      }

      .modal-content {
        width: 95%;
        padding: 20px;
        max-height: 85vh;
      }

      .modal-title {
        font-size: 1.3em;
        margin-bottom: 15px;
      }

      .modal-footer {
        flex-direction: column;
        gap: 15px;
      }

      .modal-footer .add-scene-btn-wrapper button {
        width: 100%;
      }

      .modal-footer .io-controls {
        justify-content: center;
      }

      .popup-setting {
        justify-content: center;
      }
    }

    /* --- Custom Modal Styles --- */
    #custom-modal-footer button {
      border: none;
      padding: 10px 20px;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 0.9em;
      font-weight: 500;
      transition: background-color var(--transition-speed), transform 0.1s;
      color: white;
    }
    #custom-modal-footer button#custom-modal-ok-btn {
        background-color: var(--primary-color);
    }
    #custom-modal-footer button#custom-modal-ok-btn:hover {
        background-color: var(--primary-hover);
    }
    #custom-modal-footer button#custom-modal-cancel-btn {
        background-color: var(--secondary-color);
    }
    #custom-modal-footer button#custom-modal-cancel-btn:hover {
        background-color: var(--secondary-hover);
    }