:root {
  --btn-radius-global: 12px;
  --btn-border: #b6c6d6;
  --btn-border-hover: #8ca5bc;
  --btn-text: #15344d;
  --btn-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(242, 247, 252, 0.97));
  --btn-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 245, 252, 0.99));
  --btn-bg-active: linear-gradient(180deg, rgba(239, 246, 252, 0.99), rgba(231, 241, 250, 0.99));
  --btn-shadow: 0 6px 14px rgba(11, 28, 44, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --btn-shadow-hover: 0 10px 20px rgba(9, 24, 37, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --btn-focus: 0 0 0 3px rgba(86, 170, 224, 0.23);
  --btn-accent-border: #4f9ad1;
  --btn-accent-text: #fff9f4;
  --btn-accent-bg: linear-gradient(180deg, rgba(105, 191, 243, 0.97), rgba(63, 145, 203, 0.99));
  --btn-danger-border: #bf8a93;
  --btn-danger-text: #5d2630;
  --btn-danger-bg: linear-gradient(180deg, rgba(252, 241, 243, 0.99), rgba(247, 231, 235, 0.99));
}

body.dark-mode,
html.dark-mode body {
  --btn-border: #4e7799;
  --btn-border-hover: #6ea7cf;
  --btn-text: #e6f3ff;
  --btn-bg: linear-gradient(180deg, rgba(18, 42, 63, 0.96), rgba(12, 31, 49, 0.95));
  --btn-bg-hover: linear-gradient(180deg, rgba(24, 53, 79, 0.98), rgba(16, 40, 62, 0.97));
  --btn-bg-active: linear-gradient(180deg, rgba(17, 44, 67, 0.98), rgba(12, 34, 53, 0.97));
  --btn-shadow: 0 6px 14px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(171, 220, 251, 0.1);
  --btn-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(183, 226, 253, 0.16);
  --btn-focus: 0 0 0 3px rgba(108, 193, 245, 0.32);
  --btn-accent-border: #74c0ef;
  --btn-accent-text: #fff9f3;
  --btn-accent-bg: linear-gradient(180deg, rgba(111, 198, 246, 0.96), rgba(57, 142, 198, 0.98));
  --btn-danger-border: #915660;
  --btn-danger-text: #ffe5e9;
  --btn-danger-bg: linear-gradient(180deg, rgba(84, 48, 54, 0.97), rgba(65, 37, 43, 0.97));
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  .btn,
  .action-btn,
  .section-btn,
  .blueprint-btn,
  .create-project-btn,
  .btn-submit,
  .dropbtn,
  .icon-btn,
  .transport-btn,
  .player-shell-toggle,
  .auth-action-btn,
  .studio-reset-btn,
  .studio-mini-btn,
  .clear-history-button,
  .delete-history-button,
  .open-sidebar-btn,
  .start-search-link
) {
  border: 1px solid var(--btn-border) !important;
  border-radius: var(--btn-radius-global) !important;
  color: var(--btn-text) !important;
  background: var(--btn-bg) !important;
  box-shadow: var(--btn-shadow) !important;
  text-shadow: none !important;
  font-weight: 760 !important;
  letter-spacing: 0.01em !important;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    background-color 140ms ease,
    color 140ms ease !important;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  .btn,
  .action-btn,
  .section-btn,
  .blueprint-btn,
  .create-project-btn,
  .btn-submit,
  .dropbtn,
  .icon-btn,
  .transport-btn,
  .player-shell-toggle,
  .auth-action-btn,
  .studio-reset-btn,
  .studio-mini-btn,
  .clear-history-button,
  .delete-history-button,
  .open-sidebar-btn,
  .start-search-link
):hover {
  border-color: var(--btn-border-hover) !important;
  background: var(--btn-bg-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-1px);
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  .btn,
  .action-btn,
  .section-btn,
  .blueprint-btn,
  .create-project-btn,
  .btn-submit,
  .dropbtn,
  .icon-btn,
  .transport-btn,
  .player-shell-toggle,
  .auth-action-btn,
  .studio-reset-btn,
  .studio-mini-btn,
  .clear-history-button,
  .delete-history-button,
  .open-sidebar-btn,
  .start-search-link
):active {
  background: var(--btn-bg-active) !important;
  transform: translateY(0);
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  .btn,
  .action-btn,
  .section-btn,
  .blueprint-btn,
  .create-project-btn,
  .btn-submit,
  .dropbtn,
  .icon-btn,
  .transport-btn,
  .player-shell-toggle,
  .auth-action-btn,
  .studio-reset-btn,
  .studio-mini-btn,
  .clear-history-button,
  .delete-history-button,
  .open-sidebar-btn,
  .start-search-link
):focus-visible {
  outline: none !important;
  box-shadow: var(--btn-focus), var(--btn-shadow-hover) !important;
}

:where(
  .btn.primary,
  .action-btn.primary,
  .section-btn-accent,
  .btn-submit,
  .create-project-btn,
  .save-note-btn,
  #find-rhymes-btn
) {
  border-color: var(--btn-accent-border) !important;
  color: var(--btn-accent-text) !important;
  background: var(--btn-accent-bg) !important;
}

:where(
  .delete-btn,
  .clear-history-button,
  .delete-history-button,
  .btn.subtle.is-armed,
  .action-btn.subtle.is-armed
) {
  border-color: var(--btn-danger-border) !important;
  color: var(--btn-danger-text) !important;
  background: var(--btn-danger-bg) !important;
}

:where(
  .transport-btn.active,
  .transport-btn.loop-btn.active,
  .transport-btn.metro-btn.active,
  .transport-btn#clearMarkersButton.active,
  .studio-mini-btn.active
) {
  border-color: var(--btn-accent-border) !important;
  color: var(--btn-accent-text) !important;
  background: var(--btn-accent-bg) !important;
  box-shadow: var(--btn-focus), var(--btn-shadow-hover) !important;
}

:where(.transport-btn.marker-a.is-set) {
  border-color: #d58d97 !important;
  color: #fff4f6 !important;
  background: linear-gradient(180deg, rgba(171, 70, 88, 0.97), rgba(124, 46, 58, 0.97)) !important;
}

:where(.transport-btn.marker-b.is-set) {
  border-color: #df8b39 !important;
  color: #fff8f1 !important;
  background: linear-gradient(180deg, rgba(235, 139, 52, 0.96), rgba(178, 92, 28, 0.97)) !important;
}

:where(.start-search-link, .btn, .action-btn, .create-project-btn) {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

:where(.delete-history-button, .close-button) {
  min-width: 34px;
  min-height: 34px;
  padding: 0.2rem !important;
}

:where(.open-sidebar-btn) {
  border-radius: 999px !important;
  backdrop-filter: blur(6px);
}

:where(button[disabled], input[type="button"][disabled], input[type="submit"][disabled], .btn[aria-disabled="true"]) {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none !important;
}