/* Only the generation page's four-mode selector; shared colors support dark. */
[data-page="generate"] .generator-title-card { flex-wrap: wrap; }
[data-page="generate"] .mode-switcher.omr-mode-switcher {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  width: min(100%, 560px);
  flex-shrink: 0;
}
[data-page="generate"] .omr-mode-switcher .mode-switch-button { min-height: 44px; padding-inline: 8px; white-space: normal; color: var(--text); }
[data-page="generate"] .omr-mode-switcher .mode-switch-button.is-active { color: #17210f; }
[data-page="generate"] .omr-mode-switcher .mode-switch-button:focus-visible { outline: 3px solid var(--pickle-dark); outline-offset: 2px; }
[data-page="generate"] .omr-generation-noscript {
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); line-height: 1.7;
}
[data-page="generate"] .omr-generation-noscript a { color: inherit; text-decoration: underline; }
[data-page="generate"] .custom-combination-settings p { color: var(--text); line-height: 1.7; overflow-wrap: anywhere; }
[data-page="generate"] .custom-combination-settings .primary-button,
[data-page="generate"] .custom-combination-settings .soft-button { margin: 8px 8px 0 0; max-width: 100%; white-space: normal; }
[data-page="generate"] [hidden] { display: none !important; }
@media (max-width: 860px) {
  [data-page="generate"] .header-actions { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  [data-page="generate"] .number-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: min(100%, 350px);
    margin-inline: auto;
    gap: 6px;
  }
  [data-page="generate"] .number-button {
    min-height: 44px;
    aspect-ratio: auto;
    border-radius: 12px;
    font-size: 14px;
  }
  [data-page="generate"] .mode-switcher.omr-mode-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  [data-page="generate"] .omr-mode-switcher .mode-switch-button { white-space: normal; }
}