/* Keep existing control geometry and semantics; replace only the material. */
body :is(button, .btn, [role="button"], summary, input[type="button"], input[type="submit"], input[type="reset"]) {
  border-radius: 18px;
  border-color: transparent !important;
  background: transparent !important;
  color: #f5f5f5;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px rgb(82 82 82 / .45), inset 0 1px 0 rgb(255 255 255 / .04), 0 8px 24px rgb(0 0 0 / .25) !important;
  text-decoration: none !important;
}

body :is(button, .btn, [role="button"], summary):focus-visible {
  outline: 2px solid rgb(245 245 245 / .6);
  outline-offset: 3px;
}

body :is(button, .btn, [role="button"]):is(:disabled, [disabled], [aria-disabled="true"]) {
  opacity: .55;
  cursor: default;
}

body :is(button, .btn, [role="button"]):is([aria-pressed="true"], [aria-selected="true"]) {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px 0 rgb(255 255 255 / .04), 0 8px 24px rgb(0 0 0 / .25) !important;
}

body .btn-destructive { color: var(--danger); }

.specular-button-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}