/*
 * 「音をゼロから作る」シリーズ共通UI。
 * ファミコン風ジングルを基準に、固有色は生成ボタンと波形だけへ使う。
 */
.tadaoto-retro-jingle-page,
.tadaoto-retro-sfx-page,
.tadaoto-ui-sfx-page,
.tadaoto-voice-beep-page,
.tadaoto-action-sfx-page,
.tadaoto-transition-sfx-page,
.tadaoto-reverse-fx-page,
.tadaoto-ambient-sound-page {
  --generator-wave-bg: #10151a;
  --generator-wave-color: #0693cd;
}

.tadaoto-retro-jingle-page { --generator-wave-color: #f7c948; }
.tadaoto-retro-sfx-page { --generator-wave-color: #37d67a; }
.tadaoto-ui-sfx-page { --generator-wave-color: #5ee8d8; }
.tadaoto-voice-beep-page { --generator-wave-bg: #27131f; --generator-wave-color: #ff7eb6; }
.tadaoto-action-sfx-page { --generator-wave-bg: #281715; --generator-wave-color: #ff6b4a; }
.tadaoto-transition-sfx-page { --generator-wave-bg: #171329; --generator-wave-color: #a88cff; }
.tadaoto-reverse-fx-page { --generator-wave-bg: #171329; --generator-wave-color: #a88cff; }
.tadaoto-ambient-sound-page { --generator-wave-color: #5ac8fa; }

.tadaoto-retro-jingle-page .rjg-app,
.tadaoto-retro-sfx-page .rsx-app,
.tadaoto-ui-sfx-page .uix-app,
.tadaoto-voice-beep-page .vbp-app,
.tadaoto-action-sfx-page .asx-app,
.tadaoto-transition-sfx-page .tsx-app,
.tadaoto-reverse-fx-page .rfx-app,
.tadaoto-ambient-sound-page .amb-app {
  margin: 40px auto 72px;
  max-width: 880px;
}

.tadaoto-voice-beep-page .tool-heading { max-width: none; }
.tadaoto-voice-beep-page .vbp-app .tool-panel { margin: 0; }

.tadaoto-retro-jingle-page .tool-panel + .tool-panel,
.tadaoto-retro-sfx-page .tool-panel + .tool-panel,
.tadaoto-ui-sfx-page .tool-panel + .tool-panel,
.tadaoto-voice-beep-page .tool-panel + .tool-panel,
.tadaoto-action-sfx-page .tool-panel + .tool-panel,
.tadaoto-transition-sfx-page .tool-panel + .tool-panel,
.tadaoto-reverse-fx-page .tool-panel + .tool-panel,
.tadaoto-ambient-sound-page .tool-panel + .tool-panel {
  margin-top: 20px;
}

.tadaoto-voice-beep-page .vbp-presets {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tadaoto-action-sfx-page .asx-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tadaoto-voice-beep-page .vbp-preset,
.tadaoto-action-sfx-page .asx-categories button {
  background: #fff;
  border: 1px solid #565e66;
  border-radius: 12px;
  color: #1f2a33;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  min-height: 56px;
  padding: 12px;
}

.tadaoto-retro-jingle-page .rjg-category:hover,
.tadaoto-retro-jingle-page .rjg-chip:hover { background: #fdf6e3; border-color: var(--generator-wave-color); color: #8a6a10; }
.tadaoto-retro-sfx-page .rsx-category:hover,
.tadaoto-retro-sfx-page .rsx-chip:hover { background: #e9fbf0; border-color: var(--generator-wave-color); color: #187a42; }
.tadaoto-ui-sfx-page .uix-category:hover,
.tadaoto-ui-sfx-page .uix-chip:hover { background: #e6fbf8; border-color: var(--generator-wave-color); color: #167d70; }
.tadaoto-voice-beep-page .vbp-preset:hover,
.tadaoto-voice-beep-page .vbp-preset:focus-visible,
.tadaoto-voice-beep-page .vbp-chip:hover,
.tadaoto-voice-beep-page .vbp-chip:focus-visible { background: #fff1f7; border-color: var(--generator-wave-color); color: #a52e63; }
.tadaoto-action-sfx-page .asx-categories button:hover,
.tadaoto-action-sfx-page .asx-chip:hover { background: #fff0ec; border-color: var(--generator-wave-color); color: #9b351f; }
.tadaoto-ambient-sound-page .amb-category:hover,
.tadaoto-ambient-sound-page .amb-chip:hover { background: #e8f6fd; border-color: var(--generator-wave-color); color: #1b6d8e; }

.tadaoto-retro-jingle-page .rjg-category--random,
.tadaoto-retro-sfx-page .rsx-category--random,
.tadaoto-ui-sfx-page .uix-category--random,
.tadaoto-action-sfx-page .asx-categories .asx-category--random,
.tadaoto-retro-jingle-page .rjg-category--random:hover,
.tadaoto-retro-sfx-page .rsx-category--random:hover,
.tadaoto-ui-sfx-page .uix-category--random:hover,
.tadaoto-action-sfx-page .asx-categories .asx-category--random:hover {
  background: #10151a;
  border-color: #10151a;
  color: #fff;
}

.tadaoto-voice-beep-page .vbp-presets .vbp-preset--random,
.tadaoto-voice-beep-page .vbp-presets .vbp-preset--random:hover,
.tadaoto-voice-beep-page .vbp-presets .vbp-preset--random:focus-visible {
  background: #10151a;
  border-color: #10151a;
  color: #fff;
}

.tadaoto-retro-jingle-page .rjg-wave,
.tadaoto-retro-sfx-page .rsx-wave,
.tadaoto-ui-sfx-page .uix-wave,
.tadaoto-voice-beep-page .vbp-wave,
.tadaoto-action-sfx-page .asx-wave,
.tadaoto-ambient-sound-page .amb-wave {
  background: var(--generator-wave-bg);
  border-radius: 10px;
  display: block;
  height: 90px;
  margin: 20px 0 0;
  width: 100%;
}

.tadaoto-action-sfx-page .asx-current {
  align-items: center;
  display: flex;
  font-size: 15px;
  font-weight: 700;
  gap: 10px;
  margin: 16px 0 0;
}

.tadaoto-action-sfx-page .asx-current small { color: var(--tool-muted); font-size: 11px; font-weight: 400; }

.tadaoto-voice-beep-page .vbp-actions,
.tadaoto-action-sfx-page .asx-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.tadaoto-voice-beep-page .vbp-button,
.tadaoto-action-sfx-page .asx-button {
  align-items: center;
  background: #fff;
  border: 1px solid #b8bec5;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--tool-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  min-height: 46px;
  padding: 11px 22px;
  text-decoration: none;
}

.tadaoto-voice-beep-page .vbp-button--primary,
.tadaoto-action-sfx-page .asx-button--primary {
  background: var(--tool-accent);
  border-color: var(--tool-accent);
  color: #fff;
}

.tadaoto-voice-beep-page .vbp-button--primary:hover,
.tadaoto-voice-beep-page .vbp-button--primary:focus-visible,
.tadaoto-action-sfx-page .asx-button--primary:hover,
.tadaoto-action-sfx-page .asx-button--primary:focus-visible {
  background: var(--tool-accent-dark);
  border-color: var(--tool-accent-dark);
  color: #fff;
}

.tadaoto-voice-beep-page .vbp-button--secondary:hover,
.tadaoto-voice-beep-page .vbp-button--secondary:focus-visible,
.tadaoto-action-sfx-page .asx-button--secondary:hover,
.tadaoto-action-sfx-page .asx-button--secondary:focus-visible {
  background: #edf4fc;
  border-color: var(--tool-accent);
  color: var(--tool-accent);
}

.tadaoto-voice-beep-page .vbp-button--play,
.tadaoto-action-sfx-page .asx-button--play {
  flex: 0 0 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  width: 46px;
}

.tadaoto-retro-jingle-page .rjg-option input,
.tadaoto-retro-jingle-page .rjg-toggles input,
.tadaoto-retro-sfx-page .rsx-wave-type input,
.tadaoto-retro-sfx-page .rsx-slider input,
.tadaoto-ui-sfx-page .uix-timbre input,
.tadaoto-ui-sfx-page .uix-slider input,
.tadaoto-voice-beep-page .vbp-timbre input,
.tadaoto-voice-beep-page .vbp-slider input,
.tadaoto-action-sfx-page .asx-sliders input,
.tadaoto-ambient-sound-page .amb-option input { accent-color: var(--tool-accent); }

.tadaoto-retro-jingle-page .rjg-toggles label:has(input:checked),
.tadaoto-retro-sfx-page .rsx-wave-type label:has(input:checked),
.tadaoto-ui-sfx-page .uix-timbre label:has(input:checked),
.tadaoto-voice-beep-page .vbp-timbre label:has(input:checked) {
  background: #edf4fc;
  border-color: var(--tool-accent);
  box-shadow: inset 0 0 0 1px var(--tool-accent);
  color: var(--tool-accent-dark);
}

.tadaoto-action-sfx-page .asx-history,
.tadaoto-ambient-sound-page .amb-history {
  border-top: 1px solid var(--tool-line);
  margin-top: 22px;
  padding-top: 18px;
}

.tadaoto-action-sfx-page .asx-history h3,
.tadaoto-ambient-sound-page .amb-history h3 { font-size: 14px; margin: 0 0 10px; }
.tadaoto-action-sfx-page .asx-history-list,
.tadaoto-ambient-sound-page .amb-history-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tadaoto-action-sfx-page .asx-chip,
.tadaoto-ambient-sound-page .amb-chip {
  background: #fff;
  border: 1px solid #b8bec5;
  border-radius: 999px;
  color: #1f2a33;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
}

.tadaoto-ambient-sound-page .amb-actions .amb-select {
  flex: 0 0 auto;
  min-width: 104px;
  width: auto;
}

.tadaoto-ambient-sound-page .amb-actions .amb-button--play {
  flex: 0 0 46px;
  min-width: 46px;
  width: 46px;
}

@media (max-width: 640px) {
  .tadaoto-voice-beep-page .vbp-presets,
  .tadaoto-action-sfx-page .asx-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tadaoto-voice-beep-page .vbp-actions,
  .tadaoto-action-sfx-page .asx-actions { display: grid; }
  .tadaoto-voice-beep-page .vbp-button,
  .tadaoto-action-sfx-page .asx-button { width: 100%; }
  .tadaoto-voice-beep-page .vbp-button--play,
  .tadaoto-action-sfx-page .asx-button--play { width: 46px; }
  .tadaoto-ambient-sound-page .amb-actions { display: flex; }
  .tadaoto-ambient-sound-page .amb-actions .amb-select { width: auto; }
}

.tadaoto-suite-page .generator-batch-save { margin-top: 14px; }
.tadaoto-suite-page .generator-batch-note { color: var(--tool-muted); font-size: 12px; line-height: 1.7; margin: 8px 0 0; }